在普通的div里面,对齐方式分为水平对齐和竖直对齐。在flex的世界里面,分为主轴对齐和交叉轴对齐。而且主轴不一定水平,交叉轴也不一定垂直。但是两者肯定是90度直角关系,这就是本文的精髓所在。请阅读本文,了解更多flex弹性布局的详情。

苏南大叔:网页css布局,flex弹性盒子,容器如何设置对齐方式? - css-flex-align
网页css布局,flex弹性盒子,容器如何设置对齐方式?(图11-1)

本文测试环境:macchrome@75.0.3770.100。在阅读本文的内容之前,您一定要弄明白主轴交叉轴及其它相关概念。请参见下面这篇文章:

记住以下观点:

  • 主轴,就是flex-direction定义的那个轴,四个方向都有可能。
  • 交叉轴,就是和主轴90度角垂直的那个轴,不是向右就是向下。
  • 主轴和交叉轴成90度角,并且具有相同的起点。

justify-content

justify-content属性,就是在主轴方向的对齐方式。

取值说明
flex-start主轴的开头默认
flex-end主轴的结尾
center主轴的中心
space-between各行之间留有空白
space-around各行之前、之间、之后都留有空白

下图中,默认flex-direction:row

苏南大叔:网页css布局,flex弹性盒子,容器如何设置对齐方式? - justify-content
网页css布局,flex弹性盒子,容器如何设置对齐方式?(图11-2)

总结

flex弹性盒子模型的box容器属性,到本文就基本描述完毕了。大家多多自己练习一下,才能加深印象。更多相关flex的经验文字,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css    flex

本站的忠实读者小伙伴,正在阅读下面这些文章: