Flex布局的学习总结

序言

九月的尾巴，十月的开头；国庆节快乐 国庆假期快；
趁着国庆假期的功夫，又重温了一下前端三剑客中的CSS，今天主要是记录了一下flex弹性布局

Flex介绍

Flex 是 Flexible Box 的缩写，意为"弹性布局"，主要思想为给与容器内部控制元素高度和宽度的能力；
接下来我们看一下flex的概念图（扒得阮大大的图）

当我们为容器指定为flex布局时，该容器被称为(flex container)，而容器所有的子元素自动成为容器成员，我们称为flex项目(flex item)。

flex container中默认存在俩条隐形的轴，分别为水平的主轴(main axis)和垂直的交叉轴(cross axis)；主轴(main axis)开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴(cross axis)开始的位置称为cross start；交叉轴结束的位置称为cross end；

flex item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。

注意：设置flex布局后，flex item中 float、clear、vertical-align 属性都将失效

容器属性

flex-direction属性

flex-direction决定主轴的方向，有四个值，分别为 row(默认) | row-reverse | column | column-reverse

row：主轴为水平方向，项目沿主轴从左至右排列
column：主轴为竖直方向，项目沿主轴从上至下排列
row-reverse：主轴水平，项目从右至左排列，与row反向
column-reverse：主轴竖直，项目从下至上排列，与column反向

在这里注意一下，row 属性是默认属性，当我们为容器设置 ==display: flex;==后，flex item 自动生效

.container{
  display: flex;
  // flex-direction: row;
}

.container{
  display: flex;
  flex-direction: column;
}

flex-wrap属性

flex-wrap定义 flex-item 超出容器体积如何布局；

nowrap：(默认)自动缩小项目，不换行
wrap：换行，且第一行在上方
wrap-reverse：换行，第一行在下面

.container{
  display: flex;
  flex-wrap: nowrap;
}

.container{
  display: flex;
  flex-wrap: wrap;
}

.container{
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-flow属性

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

.container{
  display: flex;
  flex-flow: column wrap-reverse;
}

justify-content属性

justify-content属性决定 flex item 在主轴上的对齐方式，具体的值如下

flex-start：左对齐
flex-end：右对齐
center：居中对齐
space- between：两端对齐
space-around：沿轴线均匀分布

.container{
  display: flex;
  justify-content: flex-start;
}

.container{
  display: flex;
  justify-content: flex-end;
}

.container{
  display: flex;
  justify-content: center;
}

.container{
  display: flex;
  justify-content: space-between;
}

.container{
  display: flex;
  justify-content: space-around;
}

align-items属性

align-items属性决定 flex item 在交叉轴上的对齐方式，具体的值如下

flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：item第一行文字的底部对齐
stretch：(默认)当item未设置高度时，item将和容器等高对齐

.container{
  display: flex;
  align-items: flex-start;
}

.container{
  display: flex;
  align-items: flex-end;
}

.container{
  display: flex;
  align-items: center;
}

.container{
  display: flex;
  align-items: baseline;
}

.container{
  display: flex;
  align-items: baseline;
}

align-content属性

align-content属性定义了当有多根主轴时(多行 flex item)，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。具体数值如下：

flex-start：左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐
space-around：沿轴线均匀分布
stretch：各行将根据其flex-grow值伸展以充分占据剩余空间

.container{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.container{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.container{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.container{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.container{
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

.container{
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

项目属性（flex item）

order属性

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

<div class="container">
    <div class="item" style="order: 3;">1</div>
    <div class="item" style="order: 2;">2</div>
    <div class="item" style="order: 1;">3</div>
    <div class="item" style="order: 0;">4</div>
</div>

flex-grow属性

flex-grow属性定义当flex容器有多余空间时，flex item是否放大。默认值为0，即当有多余空间时也不放大；

<div class="container">
    <div class="item" style="flex-grow: 1;">1</div>
    <div class="item" style="flex-grow: 0;">2</div>
    <div class="item" style="flex-grow: 0;">3</div>
    <div class="item" style="flex-grow: 0;">4</div>
</div>

注意如果 flex item 的属性都为1，他们将等分空间，如果有一个 flex item 的属性为2，其他为1，他将比其他空间多一倍

flex-shrink属性

flex-shrink属性定义了 flex item 的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果设置为0时，其他为1则前者（flex-shrink: 0）不缩放

<div class="container">
      <div class="item" style="flex-shrink: 1;">1</div>
      <div class="item" style="flex-shrink: 1;">1</div>
      <div class="item" style="flex-shrink: 0;">2</div>
      <div class="item" style="flex-shrink: 1;">1</div>
</div>

flex-basis属性

flex-basis属性定义 flex item 在主轴上占据的空间，默认值为auto

<div class="container">
    <div class="item" style="flex-basis: 80px;">1</div>
    <div class="item" style="flex-basis: 100px;">1</div>
    <div class="item" style="flex-basis: 150px;">2</div>
    <div class="item" style="flex-basis: 80px;">1</div>
</div>

flex属性

flex属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。

align-self属性

align-self属性允许 flex item 有自己独特的在交叉轴上的对齐方式，具体数值如下：

auto：和父元素align-self的值一致
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：item第一行文字的底部对齐
stretch：当item未设置高度时，item将和容器等高对齐

该属性的6个值，除了auto，其他都与align-items属性完全一致。

.item3{
  align-self: flex-end;
}

结尾

以上为 flex 布局学习总结，有点理解不够深，后续会慢慢加强，另外分享一个 flex 使用小技巧
注意 flex 使用时 样式规则记不住怎么办，浏览器帮你解决
当我们为容器设置==display: flex;==后，打开浏览器开发者工具，选择 flexbox 编辑器可以自己选择 flex 样式