Flexbox

用flexbox来代替浏览器的刚性布局，得到更为灵活的边界来设置内容如何显示。

• 排列方向
• 书写模式
• 换行设置
• 视觉上重新排序而不是在DOM中的顺序
• item 中空间转换，根据父级可用空间灵性变化
• 交叉轴上的对齐

先创建一个 flex 容器

<div class="container" >
  <div>item one</div>
  <div>item two</div>
  <div>item three</div>
</div>

要使用 flexbox ，需要先声明使用 flex 格式化上下文而不是常规块或者内联布局。

.container {
  display: flex;
}

此时就获得了一个块级盒子container，并且其中的每一项都默认设置为了display: flex-item
里面的三个div就会展示出flex相关属性的默认值。

• row
• no-wrap
• 不会扩展到占满容器
• 于容器的主轴起点对齐

  主轴（main axis）和交叉轴（cross axis）

  掌握 flexbox 的首要关键点在于理解主轴与交叉轴。主轴由flex-direction设置，而交叉轴就是没有设置的另一个值。——通常默认情况下分别是行、列。

  .parent{
  flex-direction: row|column;
  }

  值得注意的是，如果设置为 row-reverse|colum-reverse，它不仅仅是视觉上变得相反，交互上也有差异。——每次Tab的键移动到的下一项的方位也改变了。仔细观察的话，这终究与HTML元素顺序一致。

  书写模式与方向

  有些语言的书写方向是从右到左的——比如阿拉伯语，那么direction: row就是从右到左。甚至还有竖直书写模式的。

因为出于书写模式与方向的考虑，所以在 flex 中使用的是 start、end，（设置时带上main|cross的前缀）而不是left、right。

换行

默认不换行
设置换行之后，flex container 还会创建 flex lines，每一行都会像一个新的 flex container。——你可以控制每个 flex line 的对齐方式，但不能同时控制全部——这个问题可以用 grid 解决。

flex-flow

这就是方向与换行的简写

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

控制 flex item 中的空间

默认情况下，即使可用容器如果有比显示盒子所需的更多空间，盒子也不会扩大来填充空间。而如果不够则会缩小。

• flex-grow: 0: 空间充足的话，item 也不会扩大，大小与与起始大小一致
• flex-shrink: 1:空间不够的话， item 会缩小，比起始大小小。
• flex-basis: auto: item 的起始尺寸为auto
• flex属性则可以简写以上三个。
  • 可以分别设置
  • 也可以只设置为 atuo 那么等于分别是 1 1 auto：这会使得items 根据自身内容收缩扩张空间来填满可用空间
  • 设置为 1 的话= 1 1 0，就是强制每个item 大小都一致

如果想要每个收缩扩张比例不同，就分别设置每个item的flex属性

控制顺序

.box:nth-child(2) {
  order: 2;
}
.box:nth-child(3) {
  order: 3;
}

注意：如果item在逻辑上本就应该以不同的顺序排列，最好是直接修改HTML

空间分布与对齐方式

容器属性

• justify-content:主轴上的对齐方式
• align-content：多根轴线的对齐方式，如果只有一条轴线——即只有一行该属性不起作用。
• place-content: 上面两个属性的简写
• align-items: 交叉轴上所有项目的对齐方式
  • align-items: flex-start | flex-end | center | baseline | stretch;
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

项目属性

• align-self: 交叉轴上单个项目对齐方式

因为只能控制一维，自然也就没有justify-self这个属性。

• **space-evenly**： 均匀排列每个元素,每个元素之间的间隔相等。（n+1个间隙）
• **space-between**：在左右两侧没有边距。（n-1个间隙）
• **space-around**： 在左右两侧会留下边距，垂直布局同理，每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。。（n+1个间隙）

配合margin可以做到分组的效果

.box:nth-child(5) {
  margin-inline-start: auto;
}

设置第五个item 左侧的auto，使其给推到最右侧。

常用需求：设置水平垂直居中

利用flex非常简单

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;* 
  align-items: center;        *
}