【UI】CSS - Flex

[fayeah]

为什么会出现Flex

布局传统的解决方案是：display + position + float，或事用table、float、inline-block等来布局网站内容，但是这些方式对于复杂页面布局的实现非常麻烦，一个明显的例子就是垂直居中。那么Flex就出现了，它使得网站的布局更加地方便且容易，并且对响应式也非常友好。

兼容性

参考caniuse网站，可以看到对IE11的支持还有有些bug存在，所以在用flex的时候还是要慎重。

使用

使用flexbox非常简单，只需要给容易设置一个display属性即可；

  .flex-container {
    display: -webkit-flex; /* Safari */
    display: flex;
  }

对行内元素同样可以使用flexbox布局：

  .flex-container {
    display: inline-lex;
  }

基本概念

• flex item， 采用了flex布局，它的所有子元素自动成为容器的成员，被称为flex item；
• flex line， flex item是沿着轴线（flex line）定位在容器内的，默认情况下每一个flex容器只有一条flex line；
• main axis和cross axis，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

容器的属性

flex-direction属性，决定主轴的方向（即flex item的排列方向）。

  .container {
    flex-direction: row | row-reverse | column | column-reverse;
  }

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

justify-content属性，定义了flex item在主轴上的对齐方式。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性，定义了flex item在交叉轴的对齐方式。

• flex-start（默认值）：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。ps:很遗憾怎么都没办法实现这个baseline的效果，根据个人经验基本上也用不到。
• stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex-wrap属性，默认情况下，flex item都排在"轴线"（flex line）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

这里要特别注意默认的no-wrap，当flex-item宽度以及margin等的总和大于container的宽度时，会按照百分比来撑满父容器。

align-content属性，定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• stretch（默认值）：轴线占满整个交叉轴。
• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

flex-flow属性，是flex-direction和flex-wrap的简写。

flex-flow: [flex-direction] [flex-wrap]

flex items的属性

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

margin属性，是我们非常熟悉的css属性，但在flex中更加强大，可以吸收多余的空间，使得flex items可以放到不同的位置。

.item1 {
  width: 50px;
  margin-right: auto;
}

这里，margin-right: auto;使得多余的空间被右侧的元素吸收。

align-self属性，允许该item与其他items有不一样的对齐方式，可以覆盖align-items属性。

![flex-align-self]({{ "/assets/flex/flex-align-self.png" | absolute_url }})

这里服容器给定所有items相对于交叉轴居中，而第二个item设定align-self: flex-start，即可实现与别的items不一样的位置。

这里，第一个item有一个固定宽度，item2和item3分别给定flex-grow: 1，即可将剩余空间平分。也可以对某一个item设定flex-grow: 2，就是2:1的关系了。

flex属性，是flex-grow, flex-shrink 和 flex-basis的简写。后两个属性可选。

前面我们提到说如果所有item加起来的宽度大于父容器的宽度，则会按照百分比来填充父容器。那么flex有一个简单的方法来实现百分比填充的效果。简单地使用flex: [number]就能够实现。如果所有item的flex值为1，那么就是把剩余空间平分。

flex还可以设定几个值：flex: initial,flex: auto,flex: none。

总结css的内容是相当繁琐的，我从早上八点开始写，写到现在，当然从中我也收获不少。当你厌倦了用传统的方式实现复杂布局的时候，试试flex吧，能极大地提高前端开发人员的幸福度哟。

---

1. https://bocoup.com/blog/dive-into-flexbox；
2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/；
3. https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties;
4. http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html;