设置flex中每一行的最后一个元素没有padding_浅谈flex布局及其基本属性

相信很多小伙伴都听过flex布局，flex是flexible box（弹性盒子）的缩写。Flex包括flex container（弹性容器）和flex items（容器里的子元素）这两部分。特别说明一下，一旦建立起flex容器，里面的子元素的块状特性将会消除，也就是display：block；无效了。来说一下flex的一些重要的属性吧。

1. flex-direction属性:

flex-direction：column / row / column-reverse / row-reverse;

flex-direction是指弹性容器中子元素的排布方向，对应的属性值分别是垂直方向排列、水平方向排列、垂直方向倒序排列、水平方向倒序排列。column-reverse 和 row-reverse中的reverse是倒序排布的意思。

先建立弹性盒子html代码如下：

再设置子元素的width：30px；height30px；和对应的背景颜色。

（1）.垂直方向排列：

显示结果

（2）.水平方向排列：

（3）垂直方向倒序排列：

（4）水平方向倒序排列：

可以看到column-reverse（垂直方向倒序排列）是将原来的column排列方向倒过来，即子元素的排列从原来的从上倒下变成从下至上。row-reverse也同理，row的排列方向为从左至右，row-reverse则为从右至左。

2. justify-content属性：

justify-content：flex-start / flex-end / center / space-around / space-between;

justify-contet属性是表示主轴上的对齐方式，也就是用来控制flex-items（子元素）在主轴上的对齐方向的。主轴并不是绝对固定的，它是根据前面的flex-direction属性定义的。flex-direction决定了主轴，比如flex-direction：row；主轴就为row；如果flex-direction：column-reverse；主轴则为column-reverse，这时我们就需要对方向垂直方向设置对齐。我们先对flex-direction属性的row和column举例：

（1） 当设置justify-content：flex-start；

水平方向

垂直方向

可以看到当排布方向为row时，主轴会、在水平方向根据第一个子元素从左至右对齐。当排布方向为column时，主轴会在垂直方向根据第一个子元素从上至下对齐。主轴可以说是根据flex-direction而决定的。

（2） 当justify-content：flex-end时，会根据最后一个元素对齐：

水平排布

垂直排布

（3） justify-content：center；

水平排布

垂直排布

可以看到子元素在不同排布方向都居中对齐了。

（4） 当设置justify-content：space-around；

水平排布

垂直排布

可以看到这三个子元素等距分布，“1”所在的这个元素和”3”所在的元素距离两侧的距离是他们距离“2”所在元素的一半。是因为等距分布使得每个子元素两侧的距离都相等。也就是“1”和“2”所在元素之间的距离是“1”所在元素右侧距离+“2”所在元素左侧距离。

（5） 当设置justify-content：space-between；

水平排布

垂直排布

此时“1” “3”所在元素与两侧的距离为0是因为space-between的原理是让左（上）侧的元素左对齐，右（下）侧的元素右对齐。而中间的元素则等距排列。

我们还要注意当flex-direction：row-rever/ column-reverse反向排布时，只是元素之间的位置顺序倒过来了，但是对齐方式还是一样的。

3. align-items属性：

align-items：flex-start / flex-end / center / baseline / strech;

假如主轴设置在水平方向排布对齐的，但是我们又想在垂直方向也设置对齐方式，这时我们需要用到align-items。align-items属性表示子元素在交叉轴上的对齐方式。交叉轴是和主轴垂直的，所以我们要先确定好主轴才能知道交叉轴 。align-items属性和Justify-content有三个共同的属性值：center、flex-start、flex-end。另外两个是baseline（基线）、stretch。

这里我们以主轴分别为row和column设置center居中看下交叉轴的用法：

（1） 当设置align-items：flex-start；

图3-1-1水平排布

图3-1-2 垂直排布

图3-1-1是主轴为水平方向，那垂直方向为交叉轴。当设置align-items：flex-start时，子元素在垂直方向从上至下开始对齐；图3-1-2是主轴为垂直方向，那么对应的水平方向为交叉轴。当设置align-items：flex-start时，子元素从左至右开始对齐。

（2） 当设置align-items：flex-end；

图3-2-1水平排列

图3-2-2垂直排列

可以看到flex-start和flex-end的差异，原理是一样的，如图3-2-1主轴为水平方向，交叉轴为垂直方向时，flex-end是会让子元素在水平方向从下到上开始对齐；图3-2-2主轴为垂直方向，交叉轴为水平方向时，子元素从右至左开始对齐。

（3）当设置align-items：center；

图3-3-1水平排布

图3-3-2垂直排布

可以看到给align-items设置为center，能实现水平垂直居中。

（4） 当设置align-items：strech；

当我们给子元素设置width：30px；但是高度不设置，此时stretch会根据子元素里面的文字高度自适应，拉伸了子元素的高度。

（5） 当设置align-items：baseline；

这是起初我们没有对子元素里的内容做任何变化，元素根据内容里的文字的基线对齐，但是如果改变元素里面内容的字体大小时，会发生怎么样的变化呢？如下：

可以看到元素之间发生了错位，这是因为baseline时让子元素中的文字对齐，而不是元素本身对齐，baseline将以第一个子元素中的文字底线作为基准对齐的基线，其他后面的元素里的内容将根据这条基线自动对齐，但是这样的话就不能保证子元素对齐，所以就会发生错位。

4. flex-wrap属性：

flex-wrap：nowrap / wrap ；

flex-wrap属性的默认值为nowrap，顾名思义不换行。Wrap则为换行。

一般情况下，弹性盒子的宽度比子元素的总宽度大时，设置flex-wrap：wrap；是不会换行的。但是当我们在制作响应式网页适应移动端时，屏幕宽度变小，网页的宽度<子元素总宽度，末尾的子元素才会换行。这里我们会发现，换行后的子元素距离第一行元素和底部保持着一定的距离，这样会让网页看起来并不美观。实际上换行后的元素与底部之间的距离=距离第一行元素的距离。我们可以通过缩小父容器的高度来消除这些距离：

换行后的元素紧贴第一行的元素

我们只要通过掌握flex-direction、justify-content、align-items、flex-wrap属性的原理和属性值的效果，并且多动动小手操作起来。并不需要死记硬背就能掌握flex的基本布局。