13-弹性布局

flex布局

传统布局与flex布局（flexible）

• 传统布局：兼容性好，布局繁琐，局限性，不能在移动端很好的布局。

• flex弹性布局：操作方便，布局极为简单，移动端应用很广泛；PC端浏览器支持情况较差；IE11或更低版本，不支持或者部分支持

建议：

• 如果是PC端页面布局，还是选择传统布局方式比较好

• 如果是移动端或不需要考虑兼容性问题的PC端页面布局，我们使用flex弹性布局

一、flex弹性布局原理

• flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设置为flex布局后，子元素的float、clear、vertical-align属性将失效

• 采用flex布局的元素，称为flex容器（flex container），简称“容器”。他们的子元素自动成为容器成员，称为flex项目（flex item），简称为“项目”。

• w3c提供了新的方案，被称为Flex布局（弹性布局）

  • 块：display:flex

  • 内联：displey:inline-flex

• 总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

二、flex布局父项常见属性

• display:flex；

• flex-direction：设置主轴的方向

• justify-content：设置主轴的子元素排列方式

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

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

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

• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

1、主轴与侧轴

我们的元素是跟着主轴来排列的

• 在flex布局中分为主轴和交叉轴两个方向，同样的叫法有行和列、x轴y轴

容器的属性

开启flex布局:display:flex

• 默认布局样式：方向+顺序

  1. 按照容器的水平轴，由左向右自动排列

  2. 如果水平方向排列不下，则元素自动压缩

  3. 如果垂直方向上排列不下，则元素自动溢出

一、flex-direction:设置主轴的方向和排列的起点，即项目的排列方向

• 可选值：

  1. row：默认从做到右

  2. row-reverse：从右到左

  3. column：垂直方向为主轴，元素排序自上往下

  4. column-reverse：垂直方向为主轴，元素排序自下往上

  • 元素默认不会溢出，除非设置换行

二、flex-wrap:设置元素换行

• 给div盒子设置宽度，如果不设置换行会自动压缩修改盒子宽度

• flex-wrap:表示flex容器中的元素在一条轴上如果放置不下，如何换行

• 元素超出容器的高度，自动溢出

• 元素超出容器的宽度，自动压缩

• 可选值：

  1. nowrap:不换行

  2. wrap：换行

     水平方向：当前行的下方

     垂直方向：当前列的右测

     总结：主轴的下方和右测

  3. wrap-reverse:

     水平方向，当前行的上方

     垂直方向，当前列的左测

     总结：主轴的上方和左测

三、justify-content:主轴对齐

1. justify-content：表示元素在主轴上的对齐方式

2. 该属性也被称为元素之间的富裕空间的管理，注意不是元素之间的间距，是没有放满的空间

3. 根据主轴方向不同，对齐略有差异

4. 可选值

   • flex-start：默认值都是从头开始，如主轴是x轴，则从左到右

   • flex-end：从尾部开始对齐

   • center：在主轴上居中对齐

   • space-betewwn：平方剩余空闲

   • space-around：先两段贴边，再平分剩余空间

5. 只决定富裕空间的位置，不会给元素分配空间，也就是元素的固定大小不变

四、align-items:交叉轴的对齐

1. align-items:表示交叉轴的对齐方式

2. 可选值：

   • flex-start:交叉轴的起点

   • flex-end:交叉轴的终点(结束位置)

   • center:交叉轴的中点

   • baseline:以第一行文字的基线对齐

   • stretch：（默认值）拉伸，如果子元素未设置高度或者是auto，将占满整个容器的高度

3. 换行后，如果设置交叉对齐，则所有元素整体下移但两行之间的距离没有变化，所有元素作为一个整体来看待，元素之间存在富裕空间

五、align-content:交叉多轴对齐

1. 当元素设置换行后，当前页面就会出现多行元素，就会出现多个主轴

2. 如果项目只有一根轴线，该属性不起作用

3. 如果设置多个轴对齐，则所有元素都下移，两个之间的间距会变化，所有元素被单独看待，元素之间没有富裕空间

4. 可选值

   • flex-start：交叉轴的起点对齐

   • flex-end:交叉轴的终点对齐

   • center:交叉轴的中间对齐

   • space-between:交叉轴两端对齐，轴线之间的距离平均分布

   • space-around:每个轴线两侧的距离都相等，轴线和边框之间的距离*2=轴线两侧的距离

   • strentch:占满整个交叉轴

六、flex-flow：flex-direction和flex-wrap的简写

• flex-flow:row wrap;(默认值)

• 先布局，再换行

二、容器内部元素的属性/flex布局中子项常见属性

• flex：子项占的份数

• align-selg：控制子项再自己侧轴的排列方式

• order：定义子项的排列前后顺序（数值越小越靠前）

一、order属性

1. order是给容器中的元素设置属性

2. 容器中的元素可以通过order属性设置排列的顺序

3. 默认值为0

4. 数值越小排序越靠前

二、flex-grow属性：放大元素

1. flex-grow:容器中的元素通过grow属性设置元素的放大比例

2. 存在富裕空间才有可能放大

3. 默认值为0

4. grow的值表示剩余的空间按照不同的比例进行分配

• space-between/space-around把富裕空间平均分配。本身元素的大小不变，

• flex-grow把富裕空间按比例分配给元素

三、flex-shrink属性：缩小元素，控制元素压缩

• 当前行放置不下元素的原始大小时，且没有设置换行时会进行压缩

1. flex-shrink:表示元素在容器中如果放置不下，设置元素的缩小比例

2. 默认值为1，如果空间不足则自动压缩缩小

3. 可以设置不同的值进行等比例缩小(将压缩的部分进行等比例分配)

4. 如果一个元素设置为flex-shrink：0，其他元素不设置，当空间不足时，设置为0的不压缩，其余的等比例压缩

5. 如果都设置为1，空间不足，都等比例压缩(默认)

四、flex-basis:设置容器中元素在主轴上的宽度

1. flex-basis：表示设置元素在主轴上的宽度

2. 会默认覆盖掉元素设置的宽/高

五、align-self:设置子项元素在交叉轴上的对齐方式

1. align-self:单独设置一个容器中元素的样式

2. 以交叉轴作为参考点

3. 默认值auto，表示继承父级元素的align-items属性。如果没有父元素等同于strentch(拉伸)

flex属性：是flex-grow\flex-shrink\flex-basis的简写

1. flex:0 [1 auto];后两个属性可选

2. 该属性有两个快捷键：

   • flex:auto;(1 1 auto)

   • flex:none;(0 0 auto)