复习下Flex布局，看我整理的有错没

Flex布局已经很常见了，前端应该都用过。但是Flex布局里面的属性之多，细节之多，时间就了就容易记不清。
今天重新把Flex整理了下。复习一下，也方便后面开发查看。
文章最后面，说了下怎么记住这几个属性。

概念

首先，我们需要了解主轴与交叉轴的概念，使用flex布局的父元素，称为容器(flex container)，它的所有子元素(包含文本，伪元素)都是容器的项目（flex item），
这里的主轴和交叉轴，就是容器的两个轴。如图所示：

主轴和交叉轴的方向会受到页面书写模式的影响。上面的图是从左往右从上往下阅读的主轴和交叉轴。后面的例子也都会以这个书写模式来讲解。
按照最常见的例子，我们要记住，主轴就是行，方向从左往右。交叉轴就是列，方向从上往下。
另外，由于书写模式会改变开始结束的位置，所以，使用Flex布局时，属性值不再有left，top这些代表方向的变量。而全部改成start and这些变量。

容器和项目的属性

我把容器和项目的属性都整理了出来。

Flex容器的属性

属性名	说明	属性值
flex-direction	决定主轴的方向	row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap	项目是否排在一行上	nowrap（默认）：不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。
flex-flow	flex-direction、flex-wrap的简写	\
justify-content	项目在主轴上的对齐方式。	flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 space-evenly：每个项目两侧的间隔以及与边缘的间隔相等。
align-items	项目在交叉轴上如何对齐。	flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content	多根轴线的对齐方式。	flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。

Flex项目的属性

属性名	说明	属性值
order	项目的排列顺序。数值越小，排列越靠前，默认为0	[integer]
flex-grow	项目的放大比例，默认为0	[number]
flex-shrink	项目的缩小比例，默认为1	[number]
flex-basis	在分配多余空间之前，项目占据的主轴空间	[integer]
flex	flex-grow, flex-shrink 和 flex-basis的简写	\
align-self	单个项目覆盖父容器的align-items属性	和父节点的align-items属性值相同

举例说明

Flex容器的属性

flex-direction

flex-direction 决定主轴的方向。

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

flex-wrap

flex-wrap 项目是否排在一行上。

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。
  

justify-content

justify-content 项目在主轴上的对齐方式。

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

align-items

align-items 项目在交叉轴上如何对齐。

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

align-content

align-content 定义了多根轴线的对齐方式。一根轴线不生效。所以必须是设置了flex-wrap为非nowrap且出现了换行才生效。

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

Flex项目的属性

order

项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow

项目的放大比例，默认为0，0表示不缩放

比如图中的例子。容器宽度是400,指定了项目的宽度是60。grow分别设置为0,2,6。那么项目的总宽度是180，比容器400要小。为了能撑满400的宽度，需要对子项目进行放大，放大比例为0,2,6。也就是第二个子项目和第三个子项目需要按照1:3的比例放大，而第一个子项目不放大。
容器空间有220的剩余。按照1:3分配，也就是说，第二个项目节点需要增加55，第3个子项目节点增加165。最后三个子项目的宽度就是 60, 115, 225。

flex-shrink

项目的缩小比例，默认为1，0表示不缩放

比如图中的例子。容器宽度是300, 指定了项目的宽度是120。shrink分别设置为0,2,6。那么项目的总宽度是360，比容器300要大。为了能撑满300的宽度，需要对子项目进行缩小，放大比例为0,2,6。也就是第二个子项目和第三个子项目需要按照1:3的比例缩小，而第一个子项目不缩小。
子项目空间多了60的宽度。按照1:3分配，也就是说，第二个项目节点需要减少15，第3个子项目节点减少45。最后三个子项目的宽度就是 120, 105, 75。

flex-basis

在分配多余空间之前，项目占据的主轴空间。

如果flex-basis:auto，那么项目会设置为width的宽度，或者内容的宽度。否则以flex-basis指定的宽度为准。
以图片中的例子举例，容器的宽度是400。三个子项目的宽度分别是160 280 360。可以算出三个子项目的宽度之和是800，比容器的宽度要多400。因为flex-shrink默认是1。所以需要等比例对三个启动器进行缩小。也就是要对三个子项目缩小一半。最后的项目宽度是80 140 180。

align-self

单个项目覆盖父容器的align-items属性。

最后

Flex的属性很多，最后总结下记忆的方法。

• Flex容器的属性，都是用于解决子项目的方向、换行、对齐的问题的。

  • 首先，项目会有一个方向，所以有flex-direction，来解决子项目的方向，行列各两个方向。
  • Flex容器会有一个主轴，主轴可能存在换行，所以有flex-wrap来控制，有不换行，换行，换行但是行顺序反过来三种情况。
  • 主轴上，子项目有个对齐的情况，用justify-content来对齐。有5种情况，前中后，再加上两种间隔环绕方式。
  • 同理，交叉轴如果是多行，多行的行对齐也需要控制，由align-content来控制。和justify-content类似，5种情况。

  • 最后，项目在单独一行中也需要对齐，用align-items来对齐，前中后三种之外，再加上文字baseline对齐，加高度撑到最大高度后对齐。

    • align-items是控制单个项目的，所以单个项目可以单独指定对齐方式。叫做align-self。align-self需要写到单个的项目节点上。

• Flex项目的属性，解决的是项目在Flex容易中的大小缩放、顺序问题。

  • 首选需要放大，flex-grow来控制。
  • 然后需要缩小，flex-shrink来控制。
  • 最后是宽度管理，实际上，flex项目的width是不生效的，因为flex-basis:auto，所以宽度能以内容为宽度来生效。
  • align-self。容器中见过，可以指定单个项目在一行中的对齐方式，那么单个项目就需要可以覆盖容器指定的对齐方式。这里用align-self来做。

结束

好了，本文到此结束，希望本文对你有所帮助 :-)
最近新弄了一个公众号：写代码的浩，求关注 。后面会逐步把掌握的前端知识以及职场知识沉淀下来。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。