为盒状模型提供最大的灵活性
- 将父盒子设置为flex布局以后,子元素的float、clear和vertical-align都将失效
- 伸缩布局=弹性布局=伸缩盒布局=flex布局
1.布局原理
通过给父盒子添加flex布局来控制子盒子的位置和排列方式
2.flex布局常见父项属性
-
flex-direction:设置主轴方向
默认x方向为主轴,取值如下
-
justify-content:设置主轴上的子元素排列方式
注意:使用这个属性前一定要确定好主轴是哪个
-
flex-wrap:设置子元素是否换行
默认不换行,父盒子装不下会缩小子元素的宽度