CSS高级技巧（7）伸缩布局

伸缩布局

1. 使用：

display: flex;

flex: 2;    /*可以自由设置占据份数*/

min-width: 200px;   /*限制宽度不被挤压太多*/

max-width: 500px;   /*限制最大宽度*/

 

2. 排列方向：

flex-direction: row;      //默认水平

flex-direction: row-reverse;      //水平排列，反向

flex-direction: clumn;      //排列方式垂直

flex-direction: clumn-reverse;      //垂直排列，反向

 

3. justify-content

文档：https://www.runoob.com/cssref/css3-pr-justify-content.html

属性值

值	描述	测试
flex-start	默认值。项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
center	项目位于容器的中心。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit</