flex弹性盒子布局

Flex 布局教程，前端必会的基础技能，面试必会基础 - 个人文章 - SegmentFault 思否 css - CSS 网格中的 justify-self、justify-items 和 justify-content 有什么区别？ - SegmentFault 思否

迟迟没学会grid，是因为你没理解flex - 前端学习笔记 - SegmentFault 思否 grid与flex

交叉轴 align

在使用 CSS flexbox 布局时，有几个属性可用于在交叉轴上控制元素的对齐方式，这些属性包括：align-items、align-content 和 align-self。

align-items 控制 flex 容器内所有子元素在交叉轴上的对齐方式。可以将它的属性值设置为 flex-start、center、flex-end、baseline 或 stretch。默认值为 stretch。

align-content 与 align-items 相似，但是它在 flex 容器内的多行子元素之间设置对齐方式。它的属性值可以设置为 flex-start、center、flex-end、space-between、space-around 或 stretch。这个属性只有在 flex 容器中有多行子元素时才会生效。如果 flex 容器中只有一行子元素，则 align-content 会被忽略。

align-self 控制单个子元素在交叉轴上的对齐方式，而不是控制所有子元素的对齐方式。可以将它的属性值设置为 auto、flex-start、center、flex-end、baseline 或 stretch。默认值为 auto，表示子元素会继承父元素的 align-items 属性。

简单来说，align-items 和 align-content 控制所有子元素在交叉轴上的对齐方式，而 align-self 控制单个子元素在交叉轴上的对齐方式。align-content 只有在 flex 容器中有多行子元素时才会生效。

主轴 Axis

在使用 CSS flexbox 布局时，有几个属性可用于在主轴上控制元素的对齐方式，这些属性包括：justify-content、justify-items 和 justify-self。

justify-content 控制 flex 容器内所有子元素在主轴上的对齐方式。可以将它的属性值设置为 flex-start、center、flex-end、space-between、space-around 或 space-evenly。默认值为 flex-start。

justify-items 控制 flex 容器内所有子元素在网格容器中的对齐方式。可以将它的属性值设置为 start、center、end、stretch 或 auto。这个属性只有在使用CSS网格布局时才会生效，对于使用 flexbox布局的情况，justify-items 会被忽略。

justify-self 控制单个子元素在主轴上的对齐方式，而不是控制所有子元素的对齐方式。可以将它的属性值设置为 start、center、end、stretch 或 auto。这个属性只有在使用CSS网格布局时才会生效，对于使用 flexbox 布局的情况，justify-self 会被忽略。

简单来说，justify-content 控制所有子元素在主轴上的对齐方式，而 justify-items 控制所有子元素在网格容器中的对齐方式。justify-self 控制单个子元素在主轴上的对齐方式。

总结

• align-items 控制flex容器内所有子元素

• align-content 控制flex容器内多行所有子元素，需设置wrap

• align-self 控制单子子元素

• justify-items 控制grid内所有子元素