blob: 1643f4afb146878192f98dfed768a2ba724f94e8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
---
title: 伸缩容器
slug: Glossary/Flex_Container
tags:
- CSS
- 伸缩容器
- 伸缩盒子
- 术语
translation_of: Glossary/Flex_Container
---
<p>定义一个{{glossary("flexbox")}}（伸缩盒布局），需要在一个父级元素上使用<code>display</code>属性的值：<code>flex</code>或<code>inline-flex</code>。这个父级元素将成为<strong>flex container</strong>（伸缩容器），而它的所有子元素将变成{{glossary("flex item")}}（伸缩项）。</p>
<p>使用<code>flex</code>值能将元素渲染成为一个块级容器，而使用<code>inline-flex</code>值则是渲染成一个行内伸缩容器。这些值会将元素格式化，产生<strong>flex formatting context</strong>（伸缩格式化上下文），这类似于块的格式化上下文，而浮动不会干扰容器，且容器的margins（所有边距）不会随着这些项目被折叠。</p>
<h2 id="了解更多">了解更多</h2>
<h3 id="属性参考">属性参考</h3>
<div class="index">
<ul>
<li>{{cssxref("align-content")}} 行侧轴对齐方式</li>
<li>{{cssxref("align-items")}} 项目自身侧轴对齐方式</li>
<li>{{cssxref("flex")}} 伸缩性</li>
<li>{{cssxref("flex-direction")}} 伸缩流</li>
<li>{{cssxref("flex-flow")}} 伸缩流与换行</li>
<li>{{cssxref("flex-wrap")}} 伸缩-换行</li>
<li>{{cssxref("justify-content")}} 主轴对齐</li>
</ul>
</div>
<h3 id="延伸阅读">延伸阅读</h3>
<ul>
<li>CSS Flexbox Guide（CSS 伸缩盒子指南）: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a>（伸缩盒子的基本概念） </em></li>
<li>CSS Flexbox Guide（CSS 伸缩盒子指南）: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a>（伸缩容器里的项目对齐方式）</em></li>
<li>CSS Flexbox Guide（CSS 伸缩盒子指南）: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a>（掌握伸缩项如何进行换行）</em></li>
</ul>
|
