关于前端:复习下Flex布局看我整理的有错没

Flex 布局曾经很常见了，前端应该都用过。然而 Flex 布局外面的属性之多，细节之多，工夫就了就容易记不清。
明天从新把 Flex 整顿了下。温习一下，也不便前面开发查看。
文章最初面，说了下怎么记住这几个属性。

概念

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

主轴和穿插轴的方向会受到页面书写模式的影响。下面的图是从左往右从上往下浏览的主轴和穿插轴。前面的例子也都会以这个书写模式来解说。
依照最常见的例子，咱们要记住，主轴就是行，方向从左往右。穿插轴就是列，方向从上往下。
另外，因为书写模式会扭转开始完结的地位，所以，应用 Flex 布局时，属性值不再有 left，top 这些代表方向的变量。而全副改成 start and 这些变量。

容器和我的项目的属性

我把容器和我的项目的属性都整顿了进去。

Flex 容器的属性

Flex 我的项目的属性

举例说明

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 来做。

完结

好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公众号：写代码的浩，求关注 😄。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。