在普通的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)

align-items

align-items属性,定义交叉轴方向上的对齐方式。

特别需要注意的是:这个itemalign-self属性可覆盖boxalign-items属性。
取值说明
flex-start交叉轴的开头
flex-end交叉轴的结尾
center交叉轴的中心
stretch元素被拉伸以适应容器默认
baseline元素位于容器的基线上

下图中,默认flex-direction:row

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

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

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

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

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

align-content

align-contentalign-items基本类似,都是定义交叉轴上的对齐方式的。

align-contentalign-items都区别是:

  • align-items是用于单行子元素的。
  • align-content是应用于多行子元素的。或者说:align-content的操作对象是多行(列)组成的整体。

align-content生效的前提,有两个:

  • 交叉轴方向上多行子元素。
  • 交叉轴上有多余的空间,可以提供给子元素使用。
取值说明
flex-start交叉轴的开头
flex-end交叉轴的结尾
center交叉轴的中心
stretch元素被拉伸以适应容器。默认
space-between各行之间留有空白
space-around各行之前、之间、之后都留有空白

下图中,默认flex-direction:row

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

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

对比范例

下面的例子中,默认flex-direction:column。主轴为纵向column,交叉轴为横向row。那么:

  • justify-content定义纵轴上的对齐方式。
  • align-items定义横轴上的对齐方式。
  • align-content定义多列元素作为一个整体的对齐方式。

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

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

总结

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

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

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

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

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

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