flex
-
flex布局:轴线布局
flex容器
指定flex容器
.container { display: flex/inline-flex; }
flex容器的属性
-
flex-direction:row/row-reverse/column/column-reverse;
决定主轴(main axis)的方向
row:水平,起点左端
row-reverse:水平,起点右端
column:垂直,起点上端
column-reverse:垂直,起点下端
-
flex-wrap:nowrap/wrap/wrap-reverse
决定容器内项目是否能换行
nowrap:主轴尺寸固定,空间不足,不换行而调整项目尺寸
wrap:主轴超出容器时换行,第一行在上
wrap-reverse:主轴超出容器时换行,第一行在下
-
justify-content:flex-start/flex-end/center/space-between/space-around
定义项目在主轴(main axis)的对齐方式
以当flex-direction:row时为例
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目间距相等
space-around:每个项目两侧的距离相等(项目间距是项目与边缘距离的两倍)
-
align-items:flex-start/flex-end/center/baseline/stretch
定义项目在交叉轴(cross axis)的对齐方式
以当flex-direction:row时为例
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉轴中点对齐
baseline:项目第一行文字(一般是文字底部)对齐
stretch:当项目高度未设定(或auto)时,将占满整个容器高度
-
align-content:flex-start/flex-end/center/space-between/space-around/stretch
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
flex项目
-
order:<integar>
定义项目排列顺序;数值越小,排列越靠前
-
flex-grow:<number>
定义项目放大比例
默认为0,即即使存在剩余空间也不放大
属性为1的项目将等分剩余空间
属性为2的项目占据剩余空间是为1的项目的两倍
-
flex-shrink:<number>
定义项目缩小比例
默认为1,即空间不足时都等比例缩小
属性为0的项目在空间不足时不会缩小
-
flex-basis
定义分配多余空间前,该项目占据的主轴空间
浏览区根据这个属性,计算主轴是否有多余空间
默认值为auto,即项目本来的大小(由width、height)决定
-
flex
flex-grow、flex-shrink、flex-basis的简写
-
align-self:flex-start/flex-end/center/baseline/stretch
允许单个项目有与其他项目不一样的对齐方式
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
就相当于align-items属性的单个项目的应用
-