| title | slug | l10n | ||
|---|---|---|---|---|
弹性容器 |
Glossary/Flex_Container |
|
{{GlossarySidebar}}
在父元素的 display 属性上使用 flex 或 inline-flex 值可定义{{glossary("flexbox", "弹性盒")}}布局。此元素由此变为弹性容器（flex container），其任意子元素变为{{glossary("flex item", "弹性项目")}}。
flex 值会使元素变为块级弹性容器，而 inline-flex 值则会使元素变为行内级弹性容器。这些值为元素创建了一个弹性格式化上下文，类似于块格式化上下文，其中浮动元素不会侵入容器，容器的边距也不会与项目的边距重叠。
- {{cssxref("align-content")}}
- {{cssxref("align-items")}}
- {{cssxref("flex")}}
- {{cssxref("flex-direction")}}
- {{cssxref("flex-flow")}}
- {{cssxref("flex-wrap")}}
- {{cssxref("justify-content")}}
- CSS 弹性盒指南：flex 布局的基本概念
- CSS 弹性盒指南：对齐弹性容器中的弹性项目
- CSS 弹性盒指南：掌握弹性项目的包装
- Firefox 开发者工具 > 如何：CSS 弹性盒检查器：检查弹性盒布局