学习前端的css过程中，我们经常设计网页，其中最经典的原生设计就是flex和grip两个设计模式，bootstrap就是基于grip这种网格布局设计的，今天来说的是另外的一个flex布局模式。
我们知道flex布局模式中，声明一个父级元素的display为flex之后，其后代的布局方式可以通过justify-content和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）在纵向排列的时候成了控制列排列的属性。具体原因就是一个盒子反转问题，有兴趣的话可以私信交流下！
网友评论