笔记四、弹性布局

一、FlexBox布局

       Flexbox（即弹性盒子）布局模式，主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）

（一）FlexBox布局的概念

1. 容器

采用 FlexBox 布局的元素，称为 Flex 容器（flex container），简称"容器"。只需要给元素添加 display 属性，并设置为 flex 即可

<style>
    .container {
      display: flex;
    }
</style>

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis)

• 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
• 交叉轴的开始位置叫做cross start，结束位置叫做cross end。如下：

2.项目

容器中的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。如以上案例中的：.left、.center、.right

注意：设为弹性布局之后，子项的 float、clear 和 vertical-align 属性将失效 

Flex 属性分为两部分：

• 一部分作用于容器称 容器属性
• 另一部分作用于子项称为 子项属性

(二)容器的属性  

1.flex-direction

此属性主要 决定主轴的方向 ，即项目的排列方向。

• row（默认值）：主轴为水平方向，起点在左端，从左往右排列。
• row-reverse：主轴为水平方向，起点在右端，从右往左排列。
• column：主轴为垂直方向，起点在上沿，从上往下排列。
• column-reverse：主轴为垂直方向，起点在下沿，从下往上排列。

2.flex-wrap

       定义伸缩容器里是 单行还是多行显示 ，交叉做的方向决定了新行堆放的方向。Flex项目都尽可能在一行显示，可以根据flex-wrap的属性值来改变，让Flex项目多行显示。

• nowrap：默认属性，不换行。
• wrap：换行，第一行在上方，方向从上往下。
• wrap-reverse：换行，第一行在下方，方向从下至上。

注意：使用该属性，需要 给弹性容器添加固定宽度，当弹性容器宽度超过子项宽度总和时，值设为 wrap 或 wrap-reverse 均不起效果. 

3.flex-flow

       属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。 

4.justify-content

       属性定义了项目在 主轴上的对齐方式 。具体对齐方式与轴的方向有关，假设主轴方向为从左到右：

• flex-start（默认值）：子项按主轴起点线对齐，即左对齐
• flex-end：子项按主轴终点线对齐，即右对齐
• center： 居中排列
• space-between：子项均匀分布，第一项紧贴主轴起点线，最后一项紧贴主轴终点线，子项目之间的间隔都相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于 flex-start。
• space-around：每个项目两侧的间隔相等。并且，项目与容器边框的间隔是项目之间间隔的一半。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于 center。
• space-evenly：弹性容器子项均匀分布，所有项目之间及项目与边框之间的距离相等。

5.align-items

       定义项目在 交叉轴上对齐方式 。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
• flex-start：子项与交叉轴的起点线对齐。
• flex-end：子项与交叉轴的终点线对齐。
• center：与交叉轴的中线对齐。
• baseline: 项目的第一行文字的基线对齐。

6.align-content

       定义了 多根轴线的对齐方式 ，如果项目只有一根轴线，该属性不起作用。
核心是一定是盒子内部的元素超过了盒子项的宽度（默认）出现了换行，也就是 出现多行才会起作用 。

• stretch（默认值）：轴线占满整个交叉轴。（如果子项设定了高度则无法展开.
• flex-start：表示各行与交叉轴的起点线对齐。
• flex-end：表示各行与交叉轴的终点对齐。
• center：表示各行与交叉轴的中心点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。当剩余空间为负数时，效果等同于flex-start。
• space-around：每根轴线两侧的间隔都相等。

注意：该属性只作用于多行的情况（flex-warp: wrap / warp-reverse），在只有一行的弹性容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。

（三）项目的属性

1.order:定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2.flex-grow：定义 项目的放大比例，默认为0，即使存在剩余空间，也不放大。Flex 容器会根据子项设置的扩展比例作为比率来分配剩余空间。

• 当所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有剩余空间）。

• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

3.flex-shrink：定义了项目的 缩小比例，默认为1，即如果空间不足，该项目将缩小。

• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

• 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4.flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，可以设为跟width或height属性一样的值（比如350px）

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