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:列数