flex布局回顾

最近开始学习前段了，对于我这个对前段七窍通了六窍的人，学了之后不多温习温习的话，你懂的！
所以今天我就回顾了一下前不久学习的弹性布局的知识，如果有什么错误或者遗漏之处，还望各位大佬指点一二 (˘Δ˘入)

• 弹性布局，又称“Flex布局”是一种通过修改父容器的display属性，让父元素成为一个flex容器，从而设置容器中子元素的排列方式。且几乎兼容所有主流浏览器，很是受欢迎。

介绍弹性布局之前，先来介绍一下参与的属性和轴：
1.主要参与结构；
①容器：需要添加弹性布局的父元素；
②项目：弹性布局容器中的每一个子元素，称为项目；2.轴和方向；
①主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
②交叉轴：与主轴垂直的另一方向，称为交叉轴。
主要容器属性：父元素中的子元素标记1—n的序号；
” display:flex; ”属性:可以让容器脱离常规流，实现弹性布局，但容器自身在文档流中的定位方式依然遵循常规文档流；

2.flex-direction属性决定主轴的方向（即项目的排列方向）；

    row： 主轴为水平方向，排列顺序为从左到右；（默认值）      
    row-reverse： 主轴为水平方向，排列顺 序为从右到左；
    column：主轴为垂直方向，排列顺序为从上到下；     
    column-reverse：主轴为垂直方向，排列顺序为下到上。

3.flex-wrap属性定义，如果一条轴线排不下，如何换行；

     nowrap：不换行。当容器宽度不够时，每个项目会被挤压宽度；（默认值)
     wrap：溢出换行，第一行在容器最上方；      
     wrap-reverse：换行，第一行在容器最下方。   

4.justify-content属性定义了项目在主轴上的对齐方式；

     flex-start：子元素位于主轴起点排列；（默认值） 
     flex-end：子元素位于主轴终点排列；
     center：让子元素居中；
     space-between：分散对齐，子元素之间 的间隔都相等，且两端没有空隙； 
     space-around：分散对齐，子元素之间 的间隔都相等，但子元素与边框的间隔只有子 元素之间间隔的一半，如
     						  同给了子元素一个 magin值。

5、align-items属性定义项目在交叉轴上如何对齐；

      flex-start：子元素与交叉轴的起点对齐；
      flex-end：子元素与交叉轴的终点对齐；              
      center：子元素与交叉轴的中点 对齐；           
      baseline：子元素的第一行文字的基线对齐；（说实话，这个没搞懂，懂得大佬方便的话请赐教一二）             
      stretch：如果项目未设置高度或 设为auto，将占满整个容器的高度。

6、align-content属性定义了多根轴线的对齐方式。（限用于多轴线）

    flex-start：子元素与交叉轴的起点对齐；
    flex-end：子元素与交叉轴的终点对齐；         
    center：子元素与交叉轴的中点对齐； 
    space-between：子元素与交叉轴 两端对齐，轴线之间的 间隔平均分布；          
    space-around：轴线两侧的间隔都相等，轴线之间的间隔是轴线与边框的间隔的两 倍；            
    stretch：轴线占满整个交叉轴。（默认值）

主要项目属性：
order属性：用于决定项目排列顺序，n的数值越小，项目排列越靠前；（默认值为0）
<div style=”order: n”>text

flex-grow属性：用于决定项目在有剩余空间的情况下是否放大和放大的比例；（默认值为0）
<div stayle=”flex-grow: n”>text
n为0时不改变，n的大小决定了放大或缩小的比例。

flex-shrink属性：用于决定项目在空间不足时是否缩小，就算设置了固定宽度，也会缩小。但如果某
个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。（默认值为1）
<div stayle=”flex-shrink: n”>text

Flex-basis属性：用于设置项目宽度，当为默认值时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex- basis，且权重比width属性高，flex-basis将 会覆盖width属性。（默认值为 auto）

align-self属性值：用于定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属
性，属性值与align-items相 同。（默认值为auto）