当我们把父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效。通过给父盒子添加flex属性,来控制子盒子的位置的排列方式。
Note: 一定是给父元素设置display:flex。亲爹地!!!
flex-direction:设置主轴的方向(主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。我们的子元素是跟着主轴来排列的)
属性值 | 说明 |
---|---|
flex-direction:row | 默认值从左到右 |
flex-direction:row-reverse | 从右到左 |
flex-direction:column | 默认值从上到下 |
flex-direction:row | 从下到上 |
justify-content:设置主轴上子元素排列方式
属性值 | 说明 |
---|---|
justify-content:row | 默认值从左到右 |
justify-content:row-reverse | 从右到左 |
justify-content:column | 默认值从上到下 |
justify-content:row | 从下到上 |
当有多个子元素时:
属性值 | 说明 |
---|---|
justify-content:center | 沿主轴居中排列 |
justify-content:space-between | 空白间距均匀分布在相邻盒子之间 |
justify-content:sapce-evenly | 弹性盒子与容器间的间距相等 |
justify-content:space-around | 空白间距均匀分布在盒子两侧 |
justify-content:flex-start | 起点开始依次排列 |
justify-content:flex-end | 终点开始依次排列 |
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction 和 flex-wrap