css中盒模型flex布局

1、flex bo垓矗梅吒x是一种弹性盒模型，它可以使得布局变得更加简单和灵活，下图是官网上找到的flex能够实现的一些比较炫酷的功能，下面我们通过一个简单的例子来入门flex布局

2、以这个为例，这是没有设置display属性时的页面布局

3、如果想把它进行flex布局，只需要在需要设置为flex的div中设置display属性为flex即可section { display: flex;}

4、然后刷新页面查看效果，页面就像施了魔法一样自动进行布局，要说明的是，flex默认是按照水平从左到右布局（即主轴方向，与主轴垂直、从上到下为交叉轴方向）

5、可以通过flex-direction属性设置主轴方向，例如fle垓矗梅吒x-direction: column可以让flex容器下面的元素垂直排列，此外row、row-reverse、column-reverse根据字面意思分别是按行方向排序、行反方向排序、列反方向排序，这个大家可以自己尝试

6、但是当元素太多时，挤在一行/列可能会不美观，还可能会溢出父容器

7、为了解决这个问题，可以洫曛晗丕让flex容器包裹子元素:section { ...... flex-wrap: wrap;}，然后给子元素设置最小宽度（或者是高度）：article { ...... flex: 150px;}，这样它就会根据flex容器的宽度，保证每行子元素最小宽度150px的情况下，尽可能的均匀分配子元素的宽度，多余的元素会自动排列到下一行