伸缩性
flex
是一个 CSS 的display
属性中新添加一个值。随着inline-flex
的使用,它将使它适用的元素成为一个flex container(伸缩容器),而这个元素的每个子元素将成为 flex item(伸缩项目)。伸缩项目将参与到 flex 布局中,所有由 CSS Flexible Box Layout Module(CSS 伸缩盒布局模型)定义的属性都能被它们使用。
flex
属性是flex-grow
, flex-shrink
和 flex-basis
属性的简写。
此外,<flex>
可以作为弹性长度被引用在 CSS Grid(栅格)布局中。
了解更多
属性参考
align-content
堆栈伸缩行align-items
侧轴上项目对齐方式align-self
侧轴上单个项目对齐方式flex
伸缩性flex-basis
伸缩 - 基准值flex-direction
伸缩流方向flex-flow
伸缩流的方向与换行flex-grow
伸缩 - 扩展基数flex-shrink
伸缩 - 收缩比率flex-wrap
伸缩 - 换行justify-content
主轴对齐order
伸缩 - 顺序
延伸阅读
- CSS Flexible Box Layout Module Level 1 Specification(CSS 盒布局模型一级规范)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Basic Concepts of Flexbox(伸缩)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Relationship of flexbox to other layout methods(伸缩盒子与其他布局方法的关系)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Aligning items in a flex container(伸缩容器中项的对齐)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Ordering flex items(伸缩项的顺序)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Controlling Ratios of flex items along the main axis(控制主轴上伸缩项的比率)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Mastering wrapping of flex items(掌握如何包装伸缩项)
- CSS Flexbox Guide(CSS 伸缩盒子指南): Typical use cases of flexbox(伸缩盒子的典型用例)