怎么设置flex布局
Flex翻译为“弹性”,通过给元素设置display属性,属性值为flex或者inline-flex。使其变成弹性容器,容器中的直系子元素就会变为弹性元素。
div{
display: flex;//变成弹性盒
}
弹性盒子可以直接控制子元素的位置
布局父项常见属性
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex:子项目占的份数
align-self:控制子项自己在侧轴的排列方式
order:属性定义子项的排序顺序(前后顺序)