Flex布局基础

Flex 布局

参考地址：https://www.w3school.com.cn/css/css3_flexbox.asp#flex-direction

一、父项目

​ 注意后面所提及的行是根据设置x 还是 y轴为主轴而定的，如果x轴是主轴那么行就是横着的，反之如果是y那么行就是竖着的。

父项目所涉及的属性

flex-direction: 设置主轴的方向
justify-conten: 设置主轴上的子元素排列方式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴上的子元素的排列方式（多行）
align-items: 设置侧轴上的子元素排列方式（单行）
flex-flow: 复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-direction（默认是从左到右，从上到下）:

column 值设置垂直堆叠 flex 项目（从上到下）
column-reverse 值垂直堆叠 flex 项目（但从下到上）
row 值水平堆叠 flex 项目（从左到右）
row-reverse 值水平堆叠 flex 项目（但从右到左）

justify-content（设置主轴上的子元素排列方式）:

​ 注意：这个排列方式是对应主轴而言的，所以我们在使用的时候一定要注意我们当前设置的主轴方向

center 值将 flex 项目在容器的中心对齐
flex-start 值将 flex 项目在容器的开头对齐（默认）
flex-end 值将 flex 项目在容器的末端对齐
space-around 值显示行之前、之间和之后带有空格的 flex 项目
space-between 值显示行之间有空格的 flex 项目

flex-wrap 设置子元素是否换行

​ 注意：如果默认没有换行，flex布局会通过修改子元素的大小来进行一行放置；同时这里的换行如果没有调整，非常难看——解释一下这里难看的前提一般都是设置了justify-content为space-around，这样不足的换行就会不齐，使用左对齐会好点，但是右侧则会有点难看。

wrap 值规定 flex 项目将在必要时进行换行
nowrap 值规定将不对 flex 项目换行（默认）
wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行

align-items 设置侧轴上的子元素排列方式（单行）

​ 注意：首先拉伸是默认值，但是设置了拉伸就不要给子盒子设置高度，否则看不到效果

center 值将 flex 项目在容器中间对齐
flex-start 值将 flex 项目在容器顶部对齐
flex-end 值将弹性项目在容器底部对齐
stretch 值拉伸 flex 项目以填充容器（默认）
baseline 值使 flex 项目基线对齐

align-content 设置侧轴上的子元素排列方式（多行）

​ 注意：这里因为是多行的则轴设置，所以这里需要是设置了flex-wrap为换行的

flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stertch 设置子项元素高度平分父元素高度

flex-flow 为 justify-content 和 flex-warp 属性的复合属性

# 上两句话等价于下面一句
flex-direction: column;
flex-wrap: wrap;
	   ||
flex-flow: column wrap;

二、子项目

子项目中所涉及到的属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order 属性定一子项的排列顺序（前后）

flex 定义子项分配剩余空间，用flex来表示占多少份数

​ 注意：这个属性是定义子项目分配剩余空间，即占父项目剩余空间的多少，如果我们想要实现子元素平均占据父元素空间，可以不设置子项目的宽度高直接flex: 1，如果你想要其中一份占更多就可以调整1到更大的数字

数字，默认0

align-self 控制子项自己在侧轴上的排列方式

​ 注意：这个属性允许单个项目有与其他项目不一样的对齐方式，可覆盖夫项目的 align-items 属性的值。默认值是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

元素的值可以参考 align-items
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stertch 设置子项元素高度平分父元素高度

order 属性定义项目的排列顺序

​ 注意：数值越小越靠前，默认为0。要和z-index区分一下

属性值为数值，值越小越靠前