blob: 6d4390071fe1d74472391e86c6ee32b9cc81dbb4 (
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
---
title: CSS 弹性盒子布局
slug: Web/CSS/CSS_Flexible_Box_Layout
tags:
- CSS
- CSS Flexible Boxes
- CSS Reference
- CSS3布模式
- Overview
- TopicStub
- 弹性盒子
- 弹性盒子模型
- 盒子模型
translation_of: Web/CSS/CSS_Flexible_Box_Layout
---
<p>{{CSSRef}}</p>
<p><strong>CSS 弹性盒子布局</strong>是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。</p>
<h2 id="基本例子">基本例子</h2>
<p>在以下示例中，已将容器设置为 <code>display: flex</code> ，这意味着三个子项成为弹性项。<code>justify-content</code> 的值已设置为 <code>space-between</code> ，以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间，左侧和右侧项目与Flex容器的边缘齐平。你还能看到项目在十字轴上拉伸，因为 <code>align-items</code> 的默认值为 <code>stretch</code>。这些项目伸展到Flex容器的高度，使它们看起来都像最高的项目一样高。</p>
<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
<h2 id="参考">参考</h2>
<h3 id="CSS_属性">CSS 属性</h3>
<div class="index">
<ul>
<li>
<div class="index">
<ul>
<li>{{cssxref("flex")}}</li>
<li>{{cssxref("flex-basis")}}</li>
<li>{{cssxref("flex-direction")}}</li>
<li>{{cssxref("flex-flow")}}</li>
<li>{{cssxref("flex-grow")}}</li>
<li>{{cssxref("flex-shrink")}}</li>
<li>{{cssxref("flex-wrap")}}</li>
<li>{{cssxref("order")}}</li>
<li></li>
<li></li>
</ul>
</div>
</li>
</ul>
</div>
<h3 id="对齐属性">对齐属性</h3>
<p>属性 <code>align-content</code>、<code>align-self</code>、<code>align-items</code> 和 <code>justify-content</code> 最初出现在 Flexbox 规范中，但现在在Box Alignment中定义，Flexbox 规范引用了 Box Alignment 规范以获取最新定义。Box Alignment中还定义了其他对齐属性。</p>
<div class="index">
<ul>
<li>{{cssxref("align-content")}}</li>
<li>{{cssxref("align-items")}}</li>
<li>{{cssxref("align-self")}}</li>
<li>{{cssxref("justify-content")}}</li>
<li>{{cssxref("place-content")}}</li>
<li>{{cssxref("row-gap")}}</li>
<li>{{cssxref("column-gap")}}</li>
<li>{{cssxref("gap")}}</li>
<li></li>
</ul>
</div>
<h3 id="术语表">术语表</h3>
<div class="index">
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Flexbox">弹性盒子（Flexbox）</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Flex_Container">伸缩容器 （Flex Container）</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Flex_Item">弹性项目（Flex Item）</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Main_Axis">主轴（Main Axis）</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Cross_Axis">交叉轴（Cross Axis）</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Flex">伸缩性 （Flex）</a></li>
</ul>
</div>
<h2 id="指南">指南</h2>
<dl>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">弹性盒子基本概念</a></dt>
<dd>概述flexbox的功能</dd>
<dt><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">使用 CSS 弹性盒子</a></dt>
<dd>循序渐进的讲解如何用此特性来建立布局。</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Flexbox与其他布局方法的关系</a></dt>
<dd>Flexbox如何与其他布局方法和其他CSS规范相关</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">对齐Flex容器中的项目</a></dt>
<dd>Box Alignment属性如何与flexbox一起使用。</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">弹性项顺序</a></dt>
<dd>解释改变项目顺序和方向的不同方法，并解决这样做的潜在问题。</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">控制柔性项沿主轴的比率</a></dt>
<dd>本文介绍了flex-grow，flex-shrink和flex-basis属性。</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">精通包装弹性项</a></dt>
<dd>如何使用多行创建Flex容器并控制这些行中项目的显示。</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox"> Flexbox 的典型用例</a></dt>
<dd>常见的设计模式是典型的flexbox用例。</dd>
<dt><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">用弹性盒子进行 Web 应用布局</a></dt>
<dd>讲解在 Web 应用的特定环境下如何应用弹性盒子。</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Flexbox的向后兼容性</a></dt>
<dd>Flexbox的浏览器状况，互操作性问题以及支持的旧浏览器和规范版本</dd>
</dl>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注解</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Flexbox') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td>初始定义。</td>
</tr>
</tbody>
</table>
|
