相信很多小伙伴都听过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;和对应的背景颜色。
![8314df3f38ffb02e515d12ed5212ca28.png](https://i-blog.csdnimg.cn/blog_migrate/07b04083ef9db210dc205a0891e8c95f.png)
(1).垂直方向排列:
![c0ea8846d4ef3760d02379fbab60241b.png](https://i-blog.csdnimg.cn/blog_migrate/f4436b6ea8568529c5e6f0fc0a60301d.png)
![3c007ed41884e8fdc0554073050fe90f.png](https://i-blog.csdnimg.cn/blog_migrate/2784da07fc1855aefb43a515c41a7215.png)
(2).水平方向排列:
![6be4939fabe362dc33cd402fbb594d6b.png](https://i-blog.csdnimg.cn/blog_migrate/296efbc4e602cf0ce3c71ff692cfc32e.png)
![739b248abd54e8cd80768e327e70ad0c.png](https://i-blog.csdnimg.cn/blog_migrate/e70ea629bdb4e3a4ed5a825a3d0e8eae.png)
(3)垂直方向倒序排列:
![9a8b9d59de75eea1282a30e43a0384c9.png](https://i-blog.csdnimg.cn/blog_migrate/b7316deb7b44057f75d0af5dd15ad597.png)
![b0b2d988260dfd943b9ec457b78f77e5.png](https://i-blog.csdnimg.cn/blog_migrate/0c37078842411239184713b4d09d3304.png)
(4)水平方向倒序排列:
![48d5e162f325aef4034328f99d2f147d.png](https://i-blog.csdnimg.cn/blog_migrate/1ccda27f451e67aa7e59784909a17c98.png)
![bea0554b06ff91ee2f39404a37ac2acc.png](https://i-blog.csdnimg.cn/blog_migrate/55cef7528950306565ce813b2e0d8bfe.png)
可以看到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;
![4b4e9887bb16360e58dffb7240e4fabf.png](https://i-blog.csdnimg.cn/blog_migrate/aac47bdfa62bc5399b9e3dd30be92bcc.png)
![312c64d0cc3593d76a075250e8f1f7b9.png](https://i-blog.csdnimg.cn/blog_migrate/97e37a6f87c2773a43c6d703d0a1bde7.png)
![27dfa30d06862baef85cf1bcbfc27d41.png](https://i-blog.csdnimg.cn/blog_migrate/453a347ff7f0f3706ffe98adcb788f15.png)
![10752e97cf321f3f54347ccd7cc917cf.png](https://i-blog.csdnimg.cn/blog_migrate/4f5f99aafdef9a6a6a4b45a7212ad92b.png)
可以看到当排布方向为row时,主轴会、在水平方向根据第一个子元素从左至右对齐。当排布方向为column时,主轴会在垂直方向根据第一个子元素从上至下对齐。主轴可以说是根据flex-direction而决定的。
(2) 当justify-content:flex-end时,会根据最后一个元素对齐:
![0fc062729ee31a92ef50d569b82c11b4.png](https://i-blog.csdnimg.cn/blog_migrate/319d6aa73cfd562e9982615244aac0ef.png)
![af369afa1aee0e036fe1474e899592a0.png](https://i-blog.csdnimg.cn/blog_migrate/f06f20134ceea289d6fbef9f46f76048.png)
(3) justify-content:center;
![6f779ecac49dc3dd9dedf3e985f2bc29.png](https://i-blog.csdnimg.cn/blog_migrate/df557f4811b6ebce63a6fec2b6fbffe7.png)
![c552ba67ec19d9f80b2ef0a59d20af1c.png](https://i-blog.csdnimg.cn/blog_migrate/a02a6d726c2ab18312e5644db2064cdc.png)
可以看到子元素在不同排布方向都居中对齐了。
(4) 当设置justify-content:space-around;
![b50967f6f476502714050116c1c81c93.png](https://i-blog.csdnimg.cn/blog_migrate/3807a22311e8a1098d44755f659e9d89.png)
![21f9806e90aa807b758ed60e1b0a3d87.png](https://i-blog.csdnimg.cn/blog_migrate/8f9962cf2562f86aa6aabfecca4c5a63.png)
可以看到这三个子元素等距分布,“1”所在的这个元素和”3”所在的元素距离两侧的距离是他们距离“2”所在元素的一半。是因为等距分布使得每个子元素两侧的距离都相等。也就是“1”和“2”所在元素之间的距离是“1”所在元素右侧距离+“2”所在元素左侧距离。
(5) 当设置justify-content:space-between;
![24eac41cc05f2959095cc5ad1302bba3.png](https://i-blog.csdnimg.cn/blog_migrate/2cf94313c62f207a71b55dc4bf98c402.png)
![5604e9f2641028100fce19a6546fe77d.png](https://i-blog.csdnimg.cn/blog_migrate/7e0d3a2343ae5d92e142fd2fdfbc8fea.png)
此时“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居中看下交叉轴的用法:
![a5ec69bb71abc267a9ba834d79a2274e.png](https://i-blog.csdnimg.cn/blog_migrate/0c2e682ed49440c26d6cc1f9a4ce4824.png)
(1) 当设置align-items:flex-start;
![b58727cb490910789ff84c32d017cef9.png](https://i-blog.csdnimg.cn/blog_migrate/8c4eb8ee828e27a49511f6ea6e52a3ef.png)
![3513322dc8d4fc5ca2f57fef37f4ebcd.png](https://i-blog.csdnimg.cn/blog_migrate/295c3e1ef0cf10fe71f150c2e5a8f228.png)
图3-1-1是主轴为水平方向,那垂直方向为交叉轴。当设置align-items:flex-start时,子元素在垂直方向从上至下开始对齐;图3-1-2是主轴为垂直方向,那么对应的水平方向为交叉轴。当设置align-items:flex-start时,子元素从左至右开始对齐。
(2) 当设置align-items:flex-end;
![aed1cb3e9ea35d2f1253380bdeeb291e.png](https://i-blog.csdnimg.cn/blog_migrate/783e08cb67f07cc6c1595819e099e0fe.png)
![50213ce6f13d40a9d2b4da562a271032.png](https://i-blog.csdnimg.cn/blog_migrate/ce338a663670b9bc083513660ffefd47.png)
可以看到flex-start和flex-end的差异,原理是一样的,如图3-2-1主轴为水平方向,交叉轴为垂直方向时,flex-end是会让子元素在水平方向从下到上开始对齐;图3-2-2主轴为垂直方向,交叉轴为水平方向时,子元素从右至左开始对齐。
(3)当设置align-items:center;
![74c1c1f5e94f0f309af45faa92d09615.png](https://i-blog.csdnimg.cn/blog_migrate/b00e5f0b065bb7267f74bfb47bb1ff47.png)
![9647124a606751b042ad778bde5d133d.png](https://i-blog.csdnimg.cn/blog_migrate/d94724ccf89d18b223141338f9f163cb.png)
可以看到给align-items设置为center,能实现水平垂直居中。
(4) 当设置align-items:strech;
![efa8bd4a521ca5711f2ad8b3af01f38a.png](https://i-blog.csdnimg.cn/blog_migrate/f987b4bd273d55b3f347ab18251d8172.png)
![0d5654cc1085f011ce7dffb76a61c056.png](https://i-blog.csdnimg.cn/blog_migrate/44e97a09ca6bac8f8de3d4c8c42c45e9.png)
(5) 当设置align-items:baseline;
![a94ce0cf0c2d77a9404309878ce15b5d.png](https://i-blog.csdnimg.cn/blog_migrate/39e943a5e7bd7df6bd27fa3eebbd6227.png)
![5e6d0922cbe92ede62a4761bccf0e84a.png](https://i-blog.csdnimg.cn/blog_migrate/5a0546661fc779002877270ff3d55f83.png)
这是起初我们没有对子元素里的内容做任何变化,元素根据内容里的文字的基线对齐,但是如果改变元素里面内容的字体大小时,会发生怎么样的变化呢?如下:
![ba943869ec37613869ccfe46f34daf13.png](https://i-blog.csdnimg.cn/blog_migrate/dc563f044b2ac9d671dbd280bad24238.png)
![d08a5e965aa33277dee39980f090017d.png](https://i-blog.csdnimg.cn/blog_migrate/3ea8a9b7411eed0db12b81dc93d505aa.png)
可以看到元素之间发生了错位,这是因为baseline时让子元素中的文字对齐,而不是元素本身对齐,baseline将以第一个子元素中的文字底线作为基准对齐的基线,其他后面的元素里的内容将根据这条基线自动对齐,但是这样的话就不能保证子元素对齐,所以就会发生错位。
4. flex-wrap属性:
flex-wrap:nowrap / wrap ;
flex-wrap属性的默认值为nowrap,顾名思义不换行。Wrap则为换行。
![aa7baa73f724da035b5886319cc47d39.png](https://i-blog.csdnimg.cn/blog_migrate/da01f55f3181151befa5477c58a4e441.png)
![58872b826f34e8a5d38c75add2d2f8d8.png](https://i-blog.csdnimg.cn/blog_migrate/c46c97382e32b6976753338ce8a2e2a4.png)
一般情况下,弹性盒子的宽度比子元素的总宽度大时,设置flex-wrap:wrap;是不会换行的。但是当我们在制作响应式网页适应移动端时,屏幕宽度变小,网页的宽度<子元素总宽度,末尾的子元素才会换行。这里我们会发现,换行后的子元素距离第一行元素和底部保持着一定的距离,这样会让网页看起来并不美观。实际上换行后的元素与底部之间的距离=距离第一行元素的距离。我们可以通过缩小父容器的高度来消除这些距离:
![926a2b123524e9a7dce931f6ec7f9717.png](https://i-blog.csdnimg.cn/blog_migrate/9d470bcb98bf73bcc214bcd11fc2d3d7.png)
![a775b8f959b1407ecd22af6c1c6bfaac.png](https://i-blog.csdnimg.cn/blog_migrate/4a95fc9cdbd7dfac928038bd83a41b65.png)
我们只要通过掌握flex-direction、justify-content、align-items、flex-wrap属性的原理和属性值的效果,并且多动动小手操作起来。并不需要死记硬背就能掌握flex的基本布局。