关于前端:复习下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来做。

完结

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