css3-弹性盒模型 用户界面 多列

css3-弹性盒模型     用户界面     多列

弹性盒模型

Flex是flexible  Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性

块元素的Flex布局:

.box{
display:flex;
}

行内元素的Flex布局:

.box{
display:inline-flex;
}

注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效

用法:

方向&换行

flex-direction:column;
/*row 默认,主轴为水平方向,起点在左端*/
/*row-reverse 主轴为水平方向,起点在右端*/
/*column 主轴为垂直方向,起点在上沿*/ /*column-reverse 主轴为垂直方向,起点在下沿*/
flex-wrap: wrap-reverse;
/*nowrap 不换行,默认*/
/*wrap 设置换行,第一行在上面*/
/*wrap-reverse 第一行在下面*/

简写

flex-flow: column wrap;
/*flex-flow是  flex-direction和flex-wrap的简写*/

水平对齐

justify-content: space-around;
/*justify-content 设置盒子水平方向对齐方式*/
/*flex-start  按照轴的起点位置,默认,左对齐*/
/*flex-end  右对齐*/
/*center 居中对齐*/
/*space-between 两端对齐,项目之间的间隔都相等*/
/*space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍*/

多根轴线侧轴对齐

align-content: space-around;  
/*align-content *//*垂直方向的对齐方式*/
/*flex-start 与交叉轴的起点对齐*/
/*flex-end 与交叉轴的终点对齐*/
/*center与交叉轴的中间对齐*/
/*space-between 与交叉轴两端对齐,轴线之间的间隔平均分布*/
/*space-around 每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍*/

侧周对齐

align-items: baseline;  
/*align-items  属性定义项目在交叉轴上如何对齐*/
/*flex-start 与交叉轴的起点对齐*/
/*flex-end 与交叉轴的终点对齐*/
/*center与交叉轴的中间对齐*/
/*baseline 项目的第一行文字的基线对齐*/
/*stretch(默认值) 如果项目未设置高度或设为auto,将占满整个容器的高度*/

flex 设置子元素空间的分配方法

默认值:0,1,auto

语法:

flex:扩展量  收缩量  项目的长度

用户界面

box-sizing:允许您以确切的方式定义适应某个区域的具体内容

语法:box-sizing: content-box|border-box

content-box:在宽高外侧加边框

border-box:在宽高内侧加边框

多列

columns:column-width、 column-count;

column-width:列的宽度

 column-count:列数

posted @ 2018-11-28 09:49  nannanxiaogege  阅读(406)  评论(0编辑  收藏  举报