Flex(弹性布局)。是一种响应式布局,能自动伸缩盒模型达到自适应的效果。
弹性布局由弹性容器(flex container)和弹性项目(flex item;组成。
在弹性容然中,水平方向称为主轴(main axis)(起点main start,终点main end);垂直方向称为纵铂(ross axis(起点cross stat.终点cross end)。在弹性项目中,元素的宽度称为main size,高度称为cross size。
弹性容器
通过display: flex属性,可将元素声明块级弹性容器;通过dsplay: inline-fex,可将元素声明为行内弹性容器。
1. flex-direction属性
flex-direction指定主轴(main cross)的方向,即元素排列的方向。
//需先声明为flex布局
flex-direction: row | row-reverse | column | column-reverse
//属性解释;
row:水平方向。从左往右
row-reverse:水平方向,从右往左column:垂直方向,从上往下
column-reverse:垂直方向,从下往上
2. flex-wrap属性
flex-wrap属性,指定弹性项目的换行方式,即弹性项目超过一行时如何换行。flex-wrap: no-wrap | wrap | wrap-reverse
//属性解释:
no-wrap:不换行(默认)wrap:正常换行
wrap-reverse:换行.第一行在下方,从下往上换行
3. flex-flow属性
flex-low属性,为fiex-direction和flex-wrap的合并属性。第一个为flex-direction,第二个为flex-wrap
flex-fow: <flex-direction> <flex-wrap>
4. justify-content属性
justify-content属性,指定弹性内容在主轴上的排列方式。
justify-content: flex-start | flex-center / flex-end | space-between | space-around
//属性解释:
flex-start:从主轴起点(main start)到主轴终点(main end)center:居中
flex-end:从主轴终点(main end)到主轴起点(main start)space-between:项目周围的空间相等.但空隙会折叠 space-between:项目周围的空间相等.但空隙不折叠
5. align-items属性
align-items属性,指定弹性项目在纵轴上的对齐方向。align-items: flex-start | center | flex-end | base-line | stretch
//属性解释:
flex-start:项目对齐纵轴的起点(cross start)center:居中
flex-end:项目对齐纵轴的终点(cross end)baseline:基于基线对齐
stretch:拉伸(默认,.从起点(cross start}到终点(croos end)