一.flex布局原理
采用Flex布局的元素,称为flex容器,它的所有子元素自动成为容器成员,称为Flex项目
总结flex布局原理:
就是通过给父元素添加flex属性,来控制子盒子的位置和排列方式
二.常见父项属性
1.flex-direction:设置主轴方向
2.justify-content:设置主轴上的子元素排列方式
3.flex-wrap:设置子元素是否换行
4.align-content:设置侧轴上的子元素的排列方式(多行)
5.align-items:设置侧轴上的子元素的排列方式(单行)
6.flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
三.flex-direction设置主轴的方向
flex-direction属性决定主轴的方向(即项目的排列方向)
注意:主轴和侧轴会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴,而我们的子元素跟着主轴来排序的
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
四.justify-content设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
flex-start 默认值从头开始,如果主轴是X轴,则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴则水平居中)
space-around 平分剩余空间
spance-between 先两边贴边 在平分剩余空间
五.flex-wrap设置子元素是否换行
nowrap 默认值,不换行
wrap 换行