移动端flex学习笔记（黑马教程）-基础概念

布局原理

结论：通过给父盒子设置flex的display属性，来控制子盒子的布局
一旦父盒子设置flex,子盒子就会变成block,可以设置宽高，有点类似于设置了float

父盒子布局常见属性

设置主轴的方向：flex-direction

当存在多个子盒子，需要等间距时：就需要用到：justify-content

子盒子分配剩余空间的方式：justify-content

				display: flex;
				justify-content: space-around;  平均分配剩余空间

				display: flex;
				justify-content: space-between;  先对齐两侧，再平分剩余空间

设置子盒子是否换行：flex-wrap

一旦父盒子设置了flex，则子盒子默认不会换行，会自动压缩每个子盒子的宽度，然后显示在一行：

如果想要不压缩宽度 ，父盒子宽度不够能换行显示时：

侧轴上的元素排布方式

flex-flow

就是主轴为x且换行：

子盒子的常见属性

值得注意的是，它是父盒子先设置：display:flex之后，子盒子再设置flex:所占份数。
并且，谁设置了flex，谁就开始分配剩余空间，如果有多个子元素参与分配，则设置好分配的份数，它们自己会协调好谁多宽的。
例如：左右固定宽度，只有中间参与分配：

然后，左中右三个都用flex:则三者都参与分配