上一节我们说到了,flex布局,何为flex布局,就是一种一维布局模型,一次只能处理一个维度(一行或者一列)上的元素布局,flex布局大部分的属性都是作用于主轴的。
这一节,来说说flex弹性盒模型。其实,要想具有flex弹性布局的特性,就得对这个元素声明display: flex,同时这个元素就成为了弹性容器。
![d5110e2293710b1dd8cb74088a25e0fb.png](https://i-blog.csdnimg.cn/blog_migrate/78429076dd0b648ccca1f250ecf4a106.jpeg)
图一
1,蓝色部分为弹性容器,声明了:display:flex。每个弹性容器都有两根轴:主轴/交叉轴,两轴之间成90度。
2,主轴/交叉轴均有起点和终点,这对于元素的对齐非常重要。
3,弹性容器中的所有子元素称为“弹性元素”(如图中2个弹性元素)注意是弹性元素永远沿主轴排列。
4,弹性元素也可以通过display:flex设置为另一个弹性容器,形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。(如图2)
![cc829e77b849247a616bb71cbdb1091d.png](https://i-blog.csdnimg.cn/blog_migrate/3483a67268b926f0ee9be693ad5e8939.jpeg)
图二
图一的弹性容器变成了图二的弹性元素。这就形成了嵌套的弹性容器模型。以上就是flex弹性盒模型的介绍了,下一节我们将通过代码来实现一下。欢迎大家关注一下微信小程序-你选我选给大家一个更直观的展示。
![380f2e39599c9795cc71d5d00175e10c.png](https://i-blog.csdnimg.cn/blog_migrate/baa30271f556df8aa34b9a0b66766a76.jpeg)