美文网首页
flex布局问题

flex布局问题

作者: curry_li | 来源:发表于2020-11-28 10:07 被阅读0次

    学习前端的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)在纵向排列的时候成了控制列排列的属性。具体原因就是一个盒子反转问题,有兴趣的话可以私信交流下!

    相关文章

      网友评论

          本文标题:flex布局问题

          本文链接:https://www.haomeiwen.com/subject/aqaxwktx.html