flex布局(弹性布局、伸缩布局)

flex是CSS3中的一种布局方式

主要介绍下弹性布局的常用的一些属性

当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴侧轴的概念。

主轴:默认水平向右(类似于X轴)
侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴)

主轴方向(flex-direction)

弹性盒子的主轴方向默认水平向右,但是可以通过flex-direction这个属性改变主轴的方向,如下图:

取值 效果(主轴方向)
row 水平向右(默认)
row-reverse 水平向左
column 垂直向下
column-reverse 垂直向上

主轴对齐方式(justify-content)

取值:
flex-start:向主轴的开始位置对齐
flex布局(弹性布局、伸缩布局)_第1张图片
flex-end:向主轴的结束位置对齐
flex布局(弹性布局、伸缩布局)_第2张图片
center:居中对齐
flex布局(弹性布局、伸缩布局)_第3张图片
space-around:让空白环绕盒子显示
flex布局(弹性布局、伸缩布局)_第4张图片
space-between:让空白只在盒子之间显示
flex布局(弹性布局、伸缩布局)_第5张图片

单行侧轴对齐方式(align-items)

取值

flex-start:向侧轴的开始位置对齐
flex布局(弹性布局、伸缩布局)_第6张图片
flex-end:向侧轴的结束位置对齐
flex布局(弹性布局、伸缩布局)_第7张图片
center:居中对齐
flex布局(弹性布局、伸缩布局)_第8张图片
stretch:让子盒子的高度拉伸显示(默认值)
当盒子内的子元素没有高度时,会默认拉伸
flex布局(弹性布局、伸缩布局)_第9张图片

是否换行(flex-wrap)

flex布局中,默认是单行显示的,如果子元素的宽度之和超出了父元素的宽度,此时子盒子会默认压缩显示。
此时,如果需要设置子元素换行显示(需加在父元素身上),可以使用属性 flex-wrap

属性值 效果
nowrap 不换行(默认值)
wrap 换行

多行侧轴对齐方式(align-content)

之前align-items 只是针对于单行元素的侧轴对齐方式。
如果需要设置多行元素的侧轴对齐方式,此时需要使用 align-content 才行

取值(和align-items差不多):

取值 效果
flex-start 向侧轴的开始位置对齐
flex-end 向侧轴的结束位置对齐
center 居中对齐
stretch 子元素高度拉伸显示(只有没设高才有效果)
space-around 空白环绕盒子显示
space-between 空白只在盒子之间显示

分配子元素空间(flex属性)

作用: 按照份数分配父元素主轴(宽度)的剩余空间

优先分配具体的宽度,剩余的空间再按照份数分配。

代码: flex:份数;

通过flex属性可以很轻松的完成圣杯布局。

子元素排序(order属性)

作用: 设置弹性盒子中子元素的排列顺序,数值越小,排列靠前,默认是0

代码: order:数字;

单个子元素侧轴对齐方式(align-self)

取值(和align-items取值一样):

取值 效果
flex-start 向侧轴的开始位置对齐(默认相当于顶部对齐)
flex-end 向侧轴的结束位置对齐(默认相当于底部对齐)
center 居中对齐
stretch 子元素高度拉伸显示(只有没设高才有效果)

你可能感兴趣的:(HTML+CSS,css3,flex布局)