Flex布局实践

1.什么是flex布局，它能做什么

flex布局翻译为弹性布局，就是会根据外层容器的变化，呈现不同状态，使布局更加灵活方便，任意一个容器都可以被定义为flex布局，我们在平常开发中，移动端使用多一些，像水平排列的导航栏，还有页面上的元素布局，都可以使用flex布局。

看了一些文档，我们照猫画虎，也从它的6个属性出发实践一下，GO！！

注：六个属性分别是---flex-direction、flex-wrap、flex-flow justify-content、align-items、align-content

2.flex布局实践

1.flex-direction

顾名思义，方向，且代表主轴的方向（默认水平为主轴，垂直为交叉轴），也表示你所要操作的容器内元素的排列方向，我们操作一下定义一个div容器，然后再容器中写上两个div并且需要他们进行水平排列，直接在容器中设置flex-direction: row即可；

实践结论：flex在容器元素上设置flex布局属性、内容排列的方向flex-direction

2.flex-wrap

决定容器内元素是否可以换行，那么我们可以知道这么属性也是在容器元素上设置的：

父元素在一定宽度内，如果内容超过，则换行，两个红框是100px，容器只有80px，我们看到，两个红框自动缩小了宽度，适应容器，以至于不被换行，设置为warp必定是超过换行，还有一个warp-reverse，就是向上换行，这个属性开发中基本用不到。

3.flex-flow

这个属性是flex-direction和flex-warp合起来的简写，不多浪费时间，下一个属性；

4.justify-content

属性定义了主轴上的排列方式，回想一下怎么设置主轴方向：flex-direction，我们在设置属性时，看到了很多值，我们来试一下，顺手把容器宽度调整大一些

我们看第一个值

baseline、end、start没有效果

1）center:下图我们清晰的可以看到都排列在了容器的中间

2）flex-end和flex-start设置了排列对齐方式，从头或从尾部

3）space-between：两端对齐,且间隔相同的分部在容器中

4）space-around:元素四周的间隔一样

5.align-items

整体在交叉轴的对齐方式，默认是垂直的，我们来试一下

1）center试了一下垂直居中

2）flex-end、flex-start在垂直上的位置，也就是一个在顶部，一个在底部

3）stretch多行多列时容器中的元素不设置高度，则会自动充满，如下图所示：

6.align-content

定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(这句话是网上查的)

多根轴线也就是有多行多列应该是了

尝试了对齐方式属性，应该和align-items一样，是对于交叉轴来说的对齐方式

flex-start、flex-end、center对齐方式分别是顶部，底部和垂直居中

space-between和space-around分别是内容的等间距和周围间距可以看一下align-items的属性

7.还有一些针对容器元素的

1）order排列顺序，越小排的越靠前

 

2）flex-grow定义了元素的放大比例,且放大的方向也是和flex-direction是一样的。

flex-shrink是缩小比例，且他们增减的比例是 剩余空间大小 * grow

 

3）flex: flex-grow, flex-shrink 和 flex-basis的简写

主轴为水平方向，flex-basis设置剩余空间，设置了flex-basis那么它的宽度会失效，而且如果nav我设置了basis是300，剩余空间是200，我再设置了nav1是300，浏览器自动把nav和nav1平均分配了空间，我再

可以认为，如果flex-basis两个元素设置的相同，且超过了父元素，则平均分配

如果把flex-grow和flex-basis合在一起用，flex-grow设置为1，我们看到nav宽度变成了400px，增加了300px，所以flex-grow是分配剩余空间的倍数大小：300px + 100px = 400px

如果给nav的flex-grow设置为2理论上100px + 300px * 2 = 700px ,远远超过了容器我们看看会发生什么，总结就是超过了就会把剩余部分全部加给子元素

 

我们再试一下子元素全部设置flex-grow，我们可以看到其实是平均分配了，我们再设置宽度为100试一下后，发现结果一样，我们隐约会感觉到如果都设置了grow，他们会按照比例进行分配所有空间

调整一下比例：可以看到宽度比例是2:3，所以我们的猜想是正确的

最后我们把三个属性放在一起

首先我们知道，flex-shrink如果不设置的话，且超过容器宽度，会自动按照宽度的比例分配空间，如果设置flex-shrink就取消了自动缩小，如下，nav占有了所有容器空间，

如果首先两个子元素都不缩小，我们猜测应该会出现超过容器大小的情况：

我们看到nav设置flex-shrink为1，nav1为0，可以看到nav1保持了它的宽度200px，如果返过来，nav保持300px也就是沾满整个容器，那么nav1缩小1倍（超过的一倍）也就是200px，那么我们将不会再看到nav1元素，如果设置2，也就是缩小400px，

如果两个都设置缩小，我们知道如果不设置他们会超出容器200px，查了一下公式：basis1  -  (basis1 * shrink1 /（shrink1 * basis1 + shrink2 * basis2）) * overbasisc 

300 -  (300 * 3/ (300 * 3 + 200 * 1)) * 200 = 300 - 900 / 1100 *200  = 137(四舍五入)，在浏览器上看一下135加上两个border正好137，那么就是这样计算

 

最后三个属性用在一起，也就是直接使用flex属性：

这里我们简单进行记忆，flex设置为none时就自动舍弃了这个元素，不会占有空间，

flex设置为1或者0%时，代表了：宽度为auto，由grow和shrink控制，开发中用到最多的我觉得就是这个，子元素的flex可以进行成比例的展示，为1代表占所有的地1份，如果是2那么就是2份，总共加起来就是分母了；

出现flex：1  2两个时，默认属性是grow和shrink，宽度默认是0，如果flex：1  100px那么默认就是grow和宽度，shrink就是默认为1

 

总结：容器的6个属性需要牢记，对于页面布局将会非常有利，元素的属性，放大缩小，以及例宽度，单独属性比较好记，用在一起的话flex属性，就记住，容器设置display：flex，每个子元素，设置flex的占比，这是开发中使用最多的flex布局实例，其他属性配合使用上面也有介绍。