弹性布局知识点总结

弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是现在用到最多的一种实现响应式的方法。

flex布局：

display设置为flex，则当前标签为容器 子元素为项目
功能：所有子元素在一行显示Flex 容器（flex container）：
采用 Flex 布局的元素 简称容器它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
但主轴的开始与结束可以进行更改在容器上设置的属性：
display: flex; /* 设置弹性布局 */ 所有的元素在一行显示
1.设置主轴的开始方向（即项目的排列方向） ： row（行) column（列） reverse（倒序）

 flex-direction: column;   主轴开始的方向变为从上到下依次摆放      
 flex-direction: column-reverse;  项目从下到上依次摆放            
 flex-direction: row;    项目从左到右依次摆放 （为默认值）           
 flex-direction: row-reverse;  项目从右到左依次摆放  

2.设置项目是否换行：flex-wrap
flex-wrap: nowrap; 默认值不换行
flex-wrap:wrap; 设置换行 需满足条件：
flex-wrap:wrap ; 换行，第一行在下方
主轴是水平方向上 ：所有项目的宽度之和大于容器的宽度
主轴是垂直方向上：所有项目的高度之和大于容器的高度
flex-wrap:wrap-reverse; 换行，第一行在下方。
6.以上二者的简写：flex-flow：column wrap（可更换）；
3.主轴上的对齐方式：justify-content:
注：情况1.主轴是水平方向 项目之和应小于容器宽度

   flex-start（默认值左对齐）
    flex-end   右对齐  
    center水平方向居中
    space-between水平方向两端对齐
    space-around水平方向分散对齐（1.获取剩余空间（容器的宽减去所有项目的宽的总和）  2.剩余空间除以项目个数  3.用第二步得出的结果除以2   4.把第三步得出的值分给项目的左右）
    space-evenly;水平方向平均分配

情况2.主轴的方向是Column 属性值：flex-start（默认值顶部对齐）

 flex-end   底部对齐
 center垂直方向水平居中
  space-between垂直方向两端对齐
  space-around垂直方向分散对齐
  space-evenly;垂直方向方向平均分配

情况3：主轴的方向是Column-reverse

```css
flex-start（默认值底部对齐） 
flex-end   顶部对齐
center垂直方向水平居中
space-between垂直方向两端对齐 
space-around垂直方向分散对齐
space-evenly;垂直方向方向平均分配

4.设置交叉轴上的对齐方式
情况1：交叉轴是垂直方向（默认） 配套使用nowrap（不换行）如换行后使用没有效果
属性：align-items:

属性值：
flex-start; 顶部对齐（默认值）
flex-end;底部对齐
center;垂直方向上的居中
情况2.交叉轴是水平方向
flex-start; 顶部对齐
flex-end;底部对齐
center;垂直方向上的居中
baseline；基线对齐         baseline（以文本的基线对齐    ，所有的文本默认值都是以基线对齐）       
stretch （默认值）项目没有高，高为自动 将占满整个容器

扩展：

topline	顶线
middleline	中线
–	–
baseline	基线
bottomline	底线

5.多根轴线对齐 如果项目只有一根轴线，该属性不起作用
属性：align-content 使用时需与wrap（换行 （项目宽总和大于容器宽））适用
情况1.主轴是水平方向

属性值：
flex-start;多行顶部对齐
flex-end; 多行底部对齐
center多行垂直居中
space-around;垂直方向分散对齐
space-between;垂直方向两端对齐
space-evenly；垂直方向平均分配
stretch 撑满容器交叉轴

在项目上设置的属性：

1.order：适用场景：HTML靠前，页面展示靠后 重要的信息要靠前 CEO搜索引擎优化 方便最先获取我页面的重要信息
进行项目的排序 默认值为0 取值越大，越靠后 取值越小 越靠前
**2.flex-grow（项目放大）**当空间多余时 操作步骤： 默认值为0

• 获取剩余空间
• 获取所有项目flex-grow的份数之和
• 剩余空间除以flex-grow的份数之和等于每一份的值
• 将上一步的值，按照每个项目所取flex-grow的值，分给对应的项目

3.flex-shrink（项目缩小）：默认值为1（当空间不足时)
不想缩小就取值为0
flex-shrink：0 取负值无效
值越大，缩小比例越大
值越小，缩小比例越小

• 获取超出的尺寸
• 获取所有项目flex-shrink的份数之和
• 超出的尺寸除以flex-shrink的份数之和等于每一份的值
• 将上一步的值，按照每个项目所取flex-shrink的值，分给对应的项目

4.flex-basis：默认值为auto，即项目的本来大小

5.flex
是前三个的简写：flex：第一个值放大比例 第二个值缩小比例 第三个默认值为auto；
与flex-grow区别：flex会将设置了该属性的项目的宽度也算进剩余空间
6.align-self 属性
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex-start 
flex-end
center 
baseline 
stretch