伸缩容器
定义一个flexbox(伸缩盒布局),需要在一个父级元素上使用display
属性的值:flex
或inline-flex
。这个父级元素将成为flex container(伸缩容器),而它的所有子元素将变成flex item(伸缩项)。
使用flex
值能将元素渲染成为一个块级容器,而使用inline-flex
值则是渲染成一个行内伸缩容器。这些值会将元素格式化,产生flex formatting context(伸缩格式化上下文),这类似于块的格式化上下文,而浮动不会干扰容器,且容器的 margins(所有边距)不会随着这些项目被折叠。
了解更多
属性参考
align-content
行侧轴对齐方式align-items
项目自身侧轴对齐方式flex
伸缩性flex-direction
伸缩流flex-flow
伸缩流与换行flex-wrap
伸缩 - 换行justify-content
主轴对齐
延伸阅读
- CSS Flexbox Guide(CSS 伸缩盒子指南): Basic Concepts of Flexbox(伸缩盒子的基本概念)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Aligning items in a flex container(伸缩容器里的项目对齐方式)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Mastering wrapping of flex items(掌握伸缩项如何进行换行)