flex布局 规定了元素如何伸长或缩短以适应容器中的空间,灵活性很高,有以下常用属性
1、flex-grow,指定了该项占容器中剩余空间的多少html
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>
css
#content {
display: flex;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0,0,0,.2);
}
![c273e1e3775921ed4a23c2fe0259f1aa.png](https://i-blog.csdnimg.cn/blog_migrate/5ad581438a148e1a609347e58270f217.png)
2、
flex-direction:row
row-reverse
colum
colum-reverse
![2f51c58cda54f22e723f1a0a83db8f93.png](https://i-blog.csdnimg.cn/blog_migrate/036b043920d36d2aca04e7e3fd206da8.png)
![912e6841e2860717ddcaab30ecd40e3f.png](https://i-blog.csdnimg.cn/blog_migrate/d46bb7419f6190d2f4b7e5be7574ac24.jpeg)
![7749e357cabd8f97c7c0053348486de3.png](https://i-blog.csdnimg.cn/blog_migrate/2ace436e13779459546eea6644228204.jpeg)
![c4324f770c034af9417a663bf6d12afe.png](https://i-blog.csdnimg.cn/blog_migrate/bc3ff88b2ba6e17d66bb3a4a3187f469.jpeg)
3、
flex-wrap:nowrap //默认初始值
wrap
wrap-reverse
![1ecf6e9f30fa241a6144e9e28e0ac372.png](https://i-blog.csdnimg.cn/blog_migrate/eb75ba1503275157b1208756441bde4f.jpeg)
![a66f03410f07b064f82eb4242bfb0ae5.png](https://i-blog.csdnimg.cn/blog_migrate/22c03385eda2e14b2143b1a38ad365e7.jpeg)
![172c1f332cd3d16f0c0a417d34c114e1.png](https://i-blog.csdnimg.cn/blog_migrate/939019b3f0b79127034fcff2c59fc6d2.jpeg)
4、
justify-content:flex-start //默认初始值,左对齐
flex-end//右对齐
center//居中
space-between//两端对齐,项目之间的间隔都相等。
space-around//每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
![78fe460d5595fc3ddf9c962d3ba7fa8c.png](https://i-blog.csdnimg.cn/blog_migrate/16d62e01334bc11853b60d645b839937.jpeg)
5、
align-items:flex-start
flex-end
center
baseline//项目的第一行文字的基线对齐
stretch//默认值,项目未设置高度或设为auto,将占满整个容器的高度。
![adbb6a1f4ca2d508a6069d5e60aea111.png](https://i-blog.csdnimg.cn/blog_migrate/991e6abedb9130149a79933744932fdd.jpeg)
![cea14bc4fde26c793f7fb68950116ddc.png](https://i-blog.csdnimg.cn/blog_migrate/f603750f9eda5dfaa8bc58285493a58e.jpeg)
![85ef993a27a257da4290f6e14702569c.png](https://i-blog.csdnimg.cn/blog_migrate/ed2b23130e1ffe19e71ec6c5ce471819.jpeg)
![d47e1698d6e4b7a9ed70ff86127b4709.png](https://i-blog.csdnimg.cn/blog_migrate/cbed743c10d7bd6bb3f79bc908ceeb00.jpeg)
![7b6997c4b7721097a91cf15544fe2db8.png](https://i-blog.csdnimg.cn/blog_migrate/d81a87604402f79e1c99758d2944f38d.jpeg)