flex弹性盒子模型翻转问题

网页布局最经典的就是flex和grip两个布局，bootstrap就是基于grip这种网格布局设计的，今天来说的是另外的一个flex布局模式。

在flex布局模式中，声明一个父级元素的display为flex之后，其后代的布局方式可以通过justify-conten和align-items分别调节横向和纵向的布局方式。现在要说的是当子代元素排列为row排列和column排列的属性设置：

• 当flex-direction为row的时候，我们想设置横向和纵向的排列方式时，可以通过设置justify-content和align-items的属性来调节。
• 当flex-direction为column的时候，我们设置横向和纵向的排列方式时，就要跟横向排列设置的相反，要通过justify-content和align-items来调节纵向和横向的属性设置。

很绕是不是？这个属性确实很难理解，而且横向排列的时候可以设置align-items为strecth拉伸高度，但是一旦纵向排列就只能在子元素设置flex: 1 1 auto;来调整高度，因为你调整的align-items只是在调整子元素的宽度

总之一句话，子元素横向排列时的控制行排列的属性（justify-content）在纵向排列的时候成了控制列排列的属性。具体原因就是一个盒子反转问题