diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
| commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
| tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/conflicting/web/css/css_flexible_box_layout | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip | |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/conflicting/web/css/css_flexible_box_layout')
3 files changed, 1003 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..d2054bc725 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,408 @@ +--- +title: 使用弹性盒子进行高级布局 +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS3布局模型 + - Flexible_Box + - Flexible_Box_Layout + - Layout + - 弹性盒子 + - 弹性盒子模型 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +<p>使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。</p> + +<h3 id="浮动布局的问题">浮动布局的问题</h3> + +<ul> + <li><strong>难以控制。</strong>如果站点上存在一些不可预知的内容，那么布局将变的难以维护。</li> + <li><strong>源码顺序依赖</strong>。弹性布局依赖于HTML源码，在做响应式设计时将难以为不同的媒体查询变更布局。</li> + <li><strong>列等高问题</strong>。如果容器中有两到三列不同的内容，并且在任意内容的条件下，都需要设置为相同的高度。浮动布局难以实现这个要求。</li> + <li><strong>内容居中</strong>。使用浮动布局难以将内容水平且垂直居中。</li> +</ul> + +<h3 id="弹性盒子如何处理">弹性盒子如何处理</h3> + +<ul> + <li>通过将弹性元素拉伸或缩小来充满可用空间和避免溢出。这种方式解决了新内容的溢出问题并且以开发者期望的情况实施布局。</li> + <li>给予弹性元素成比例的尺寸。</li> + <li>弹性容器内的弹性元素可以从任意方向布局。可以解决在不同媒体查询中元素的顺序问题。使得可见内容的顺序独立于HTML渲染顺序，有利于站点的响应式设计。</li> +</ul> + +<h3 id="弹性盒子属性">弹性盒子属性</h3> + +<p><img alt="placeholder" src="http://saki007ster.github.io/public/images/flex-container.png" title="Flexbox properties"></p> + +<ul> + <li><strong>主轴(main axis)，主轴区域(main dimension)</strong>。弹性容器的主轴指的是弹性元素主要沿着哪个方向布局。它在主轴区域中延伸。</li> + <li><strong>主轴起点(main-Start)，主轴终点(main-end)</strong>。弹性元素被放置于容器中从主轴起点到主轴终点放置。</li> + <li><strong>主轴尺寸(main size)，主轴尺寸属性(main size property)</strong>。一个弹性元素的主轴尺寸指的是其在主轴区域内的长度。其主轴尺寸属性指的是其对应的属性。</li> + <li><strong>侧轴(cross axis)，侧轴区域(cross dimension)</strong>。侧轴垂直于主轴。它在侧轴区域中延伸。</li> + <li><strong>侧轴起点(cross-Start)，侧轴终点(cross-end)</strong>。浮动行被元素填充，并且在容器中沿侧轴方向从起点向终点分布。</li> + <li><strong>侧轴尺寸(cross size)，侧轴尺寸属性(cross size property)</strong>。一个弹性元素的侧轴尺寸指的是其在侧轴区域内的长度。其侧轴尺寸属性指的是其对应的属性</li> +</ul> + +<h4 id="弹性容器属性">弹性容器属性</h4> + +<ul> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-direction">flex-direction</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-wrap">flex-wrap</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-flow">flex-flow</a></li> + <li><a href="https://css-tricks.com/almanac/properties/j/justify-content/">justify-content</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-items</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#align-content-property">align-content</a></li> +</ul> + +<h4 id="弹性元素属性">弹性元素属性</h4> + +<ul> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-order">order</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-self</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-grow">flex-grow</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink">flex-shrink</a></li> + <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-basis">flex-basis</a></li> +</ul> + +<h2 id="弹性盒子混合">弹性盒子混合</h2> + +<p>对于希望在现代浏览器原生支持下使用弹性盒子的用户，这里有全部的支撑表格：<a href="http://caniuse.com/flexbox" style="line-height: 1.5;">http://caniuse.com/flexbox</a></p> + +<p>将会使用：</p> + +<ul> + <li>后备、陈旧的语法（IE10，移动端WebKit内核浏览器－无包裹)</li> + <li>最终标准的语法（FF、Safari、Chrome、IE11、Opera）</li> +</ul> + +<p>启发于：</p> + +<ul> + <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> +</ul> + +<p>可以从这些地方获取帮助：</p> + +<ul> + <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> + <li><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> + <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> + <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> + <li><a href="https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes">https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes</a></li> +</ul> + +<h3 id="弹性容器">弹性容器</h3> + +<p>“flex”值会引起一个元素生成一个盒级的弹性盒子。</p> + +<p>“inline-flex”会生成一个行内弹性盒子。</p> + +<p>display: flex | inline-flex <a href="http://w3.org/tr/css3-flexbox/#flex-containers">http://w3.org/tr/css3-flexbox/#flex-containers</a></p> + +<div> +<pre>@mixin flexbox { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} + +// 使用这样的混合模式 +%flexbox { @include flexbox; }</pre> +</div> + +<div> +<pre>@mixin inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; }</pre> +</div> + +<h3 id="弹性盒子方向">弹性盒子方向</h3> + +<p>“flex-direction”属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。</p> + +<p>值：row | row-reverse | column | column-reverse</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-direction-property">http://w3.org/tr/css3-flexbox/#flex-direction-property</a></p> + +<div> +<pre>@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + +// 简短版本： +@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> +</div> + +<h3 id="弹性盒子换行">弹性盒子换行</h3> + +<p>“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。</p> + +<p>值：nowrap | wrap | wrap-reverse</p> + +<p>默认：nowrap</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-wrap-property">http://w3.org/tr/css3-flexbox/#flex-wrap-property</a></p> + +<div> +<pre>@mixin flex-wrap($value: nowrap) { + // No Webkit Box fallback. + -webkit-flex-wrap: $value; + -moz-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +}</pre> +</div> + +<h3 id="弹性盒子流（简写）">弹性盒子流（简写）</h3> + +<p>“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。</p> + +<p>默认值：row nowrap</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-flow-property">http://w3.org/tr/css3-flexbox/#flex-flow-property</a></p> + +<div> +<pre>@mixin flex-flow($values: (row nowrap)) { + // No Webkit Box fallback. + -webkit-flex-flow: $values; + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +}</pre> +</div> + +<h3 id="弹性盒子顺序">弹性盒子顺序</h3> + +<p>“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序。</p> + +<p>默认值：0</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#order-property">http://w3.org/tr/css3-flexbox/#order-property</a></p> + +<div> +<pre>@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -webkit-order: $int; + -moz-order: $int; + -ms-flex-order: $int; + order: $int; +}</pre> +</div> + +<h3 id="弹性盒子增长">弹性盒子增长</h3> + +<p>“flex-grow”属性设置增长因数，不接受负值。</p> + +<p>默认值：0</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-grow-property">http://w3.org/tr/css3-flexbox/#flex-grow-property</a></p> + +<div> +<pre>@mixin flex-grow($int: 0) { + -webkit-box-flex: $int; + -webkit-flex-grow: $int; + -moz-flex-grow: $int; + -ms-flex-positive: $int; + flex-grow: $int; +}</pre> +</div> + +<h3 id="弹性盒子收缩">弹性盒子收缩</h3> + +<p>“flex-shrink”属性设置了收缩因数，不接受负值。</p> + +<p>默认值：1</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-shrink-property">http://w3.org/tr/css3-flexbox/#flex-shrink-property</a></p> + +<div> +<pre>@mixin flex-shrink($int: 1) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex-negative: $int; + flex-shrink: $int; +}</pre> +</div> + +<h3 id="弹性盒子伸缩">弹性盒子伸缩</h3> + +<p id="“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。"><span style="font-size: 14px; line-height: 1.5;">“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。</span></p> + +<p>值：类似“width”，默认值：<code>auto</code></p> + +<p><a href="http://www.w3.org/TR/css3-flexbox/#flex-basis-property">http://www.w3.org/TR/css3-flexbox/#flex-basis-property</a></p> + +<div> +<pre>@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + -moz-flex-basis: $value; + -ms-flex-preferred-size: $value; + flex-basis: $value; +}</pre> +</div> + +<h3 id="弹性盒子“Flex”属性（简写）">弹性盒子“Flex”属性（简写）</h3> + +<p>“<code>flex</code>”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“<code>flex</code>”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。</p> + +<p>值：<code>none</code> | ||</p> + +<p>默认值：见独立属性（1 1 0）</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#flex-property">http://w3.org/tr/css3-flexbox/#flex-property</a></p> + +<div> +<pre>@mixin flex($fg: 1, $fs: null, $fb: null) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so lets grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box-flex: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -moz-box-flex: $fg-boxflex; + -moz-flex: $fg $fs $fb; + -ms-flex: $fg $fs $fb; + flex: $fg $fs $fb; +}</pre> +</div> + +<h3 id="弹性盒子对齐方式">弹性盒子对齐方式</h3> + +<p>“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。</p> + +<p>提示：以前版本的语法不支持“space-*”值。</p> + +<p>值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#justify-content-property">http://w3.org/tr/css3-flexbox/#justify-content-property</a></p> + +<div> +<pre>@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + -moz-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); }</pre> +</div> + +<h3 id="弹性元素对齐">弹性元素对齐</h3> + +<p>可以设置弹性元素在容器侧轴上的对齐方式，与“justify-content”功能相似但是方向垂直。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）</p> + +<p>值：flex-start | flex-end | center | baseline | stretch 默认值：stretch</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#align-items-property">http://w3.org/tr/css3-flexbox/#align-items-property</a></p> + +<div> +<pre>@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + -moz-align-items: $value; + align-items: $value; +}</pre> +</div> + +<h3 id="弹性元素自对齐">弹性元素自对齐</h3> + +<p>用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。</p> + +<p>值：auto | flex-start | flex-end | center | baseline | stretch 默认值：auto</p> + +<div> +<pre>@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + -moz-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +}</pre> +</div> + +<h3 id="弹性元素内容对齐">弹性元素内容对齐</h3> + +<p>“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。</p> + +<p>值：flex-start | flex-end | center | space-between | space-around | stretch 默认值：stretch</p> + +<p><a href="http://w3.org/tr/css3-flexbox/#align-content-property">http://w3.org/tr/css3-flexbox/#align-content-property</a></p> + +<div> +<pre>@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + -moz-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +}</pre> +</div> diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..d50cf7582f --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,408 @@ +--- +title: 使用 CSS 弹性盒子 +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +tags: + - CSS + - CSS Flexible Boxes + - Flex + - Web + - flexbox + - 弹性 + - 弹性容器 + - 弹性盒子 + - 弹性项目 + - 指南 + - 盒子模型 + - 范例 + - 进阶 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +--- +<div>{{CSSRef}}</div> + +<p><span>CSS3 <strong>弹性盒子</strong>(<strong>Flexible Box</strong> 或 <strong>Flexbox</strong>)，是一种</span>用于在页面上布置元素的<span><a href="/zh-CN/docs/Web/CSS/Layout_mode">布局模式</a>，</span>使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，<span>弹性</span>盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。</p> + +<p>许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。</p> + +<div class="note"><strong>注意：</strong> 虽然 <a href="http://www.w3.org/TR/css3-flexbox/">CSS 弹性盒子布局规范</a> 还处于最终征求意见稿 (Last Call Working Draft)阶段（参见<a href="http://dev.w3.org/csswg/css-flexbox/">最新编辑草案</a>），并非所有浏览器都实现了弹性盒子的所有功能。但，这么说吧，现在全线产品对弹性盒子都有良好支持。最新的兼容性状况可以查看每个具体属性的<a href="/zh-CN/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">兼容性表格</a>获取。</div> + +<h2 id="弹性盒布局概念">弹性盒布局概念</h2> + +<p>在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。</p> + +<p>块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。</p> + +<h2 id="弹性盒布局相关词汇">弹性盒布局相关词汇</h2> + +<p>关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 <code>flex-direction</code> 属性为 <code>row</code>的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。</p> + +<p><img alt="弹性布局相关名词" src="https://mdn.mozillademos.org/files/12998/flexbox.png" style="height: 333px; width: 563px;"></p> + +<dl> + <dt>弹性容器(Flex container)</dt> + <dd>包含着弹性项目的父元素。通过设置 {{Cssxref("display")}} 属性的值为 <code>flex</code> 或 <code>inline-flex</code> 来定义弹性容器。</dd> + <dt>弹性项目(Flex item)</dt> + <dd> + <p>弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。</p> + </dd> + <dt>轴(Axis)</dt> + <dd> + <p>每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为<strong>主轴(main axis)</strong>。垂直于<strong>主轴</strong>的那根轴称为<strong>侧轴(cross axis)</strong>。</p> + + <ul> + <li><code><a href="/zh-CN/docs/Web/CSS/flex-direction">flex-direction</a></code> 确立主轴。</li> + <li><a href="/zh-CN/docs/Web/CSS/justify-content"><code>justify-content</code></a> 定义了在当前行上，弹性项目沿主轴如何排布。</li> + <li><a href="/zh-CN/docs/Web/CSS/align-items"><code>align-items</code></a> 定义了在当前行上，弹性项目沿侧轴默认如何排布。</li> + <li><a href="/zh-CN/docs/Web/CSS/align-self"><code>align-self</code></a> 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 <code>align-items</code> 所确立的默认值。</li> + </ul> + </dd> + <dt>方向(Direction)</dt> + <dd> + <p>弹性容器的<strong>主轴起点(main start)</strong>/<strong>主轴终点(main end)</strong>和<strong>侧轴起点(cross start)</strong>/<strong>侧轴终点(cross end)</strong>描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 <code>writing-mode</code> 确立的方向（从左到右、从右到左，等等）。</p> + + <ul> + <li><a href="/zh-CN/docs/Web/CSS/order"><code>order</code></a> 属性将元素与序号关联起来，以此决定哪些元素先出现。</li> + <li><a href="/zh-CN/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性的简写，决定弹性项目如何排布。</li> + </ul> + </dd> + <dt>行(Line)</dt> + <dd> + <p>根据 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。</p> + </dd> + <dt>尺寸(Dimension)</dt> + <dd> + <p>根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为<strong>主轴尺寸(main size)</strong> ，对应侧轴的称为 <strong>侧轴尺寸(cross size)</strong>。</p> + + <ul> + <li><code><a href="/zh-CN/docs/Web/CSS/min-height">min-height</a></code> 与 <code><a href="/zh-CN/docs/Web/CSS/min-width">min-width</a></code> 属性初始值将为 0。</li> + <li><a href="/zh-CN/docs/Web/CSS/flex"><code>flex</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>、<a href="/zh-CN/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> 属性的简写，描述弹性项目的整体的伸缩性。</li> + </ul> + </dd> +</dl> + +<h2 id="定义一个弹性盒子">定义一个弹性盒子</h2> + +<p>为要使用此样式的元素指派 CSS，需按以下方式设置 <a href="/zh-CN/docs/Web/CSS/display">display</a> 属性：</p> + +<pre class="brush: css">display : flex</pre> + +<p>或者</p> + +<pre class="brush: css">display : inline-flex</pre> + +<p>这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 <code>flex</code> 使弹性容器成为块级元素。值 <code>inline-flex</code> 使弹性容器成为单个不可分的行内级元素。</p> + +<div class="note"><strong>注意：</strong>厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：<code>display : -webkit-flex</code>。</div> + +<h2 id="弹性项目须知">弹性项目须知</h2> + +<p>弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，一个只包含一系列空白符（如一堆空格或制表符等）的匿名弹性项目不会被渲染，就如同对其指派 <code>display: none</code>。</p> + +<p>对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。</p> + +<p>相邻的弹性元素其外边距不会互相合并。使用 <code>auto</code> 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的 <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a>。</p> + +<p>不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题更会出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对这种需要居中的弹性项目，不使用 <code>align-</code> 属性，而使用自动外边距就能解决这个问题。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用，也可以使用自动外边距来替代 <code>justify-</code> 属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过很不幸，如果尝试在多行的弹性框中用基于外边距的居中方法来替代 <code>justify-content</code>，就必须对每一行的第一个和最后一个弹性项目应用外边距。此时除非能够事先预测每一行都结束于哪个元素，否则就不能愉快的在主轴方向上用基于外边距的居中方法来替代 <code>justify-content</code> 属性了。</p> + +<p>再强调一遍，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。{{cssxref("order")}} 属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。</p> + +<h2 id="弹性盒子相关属性">弹性盒子相关属性</h2> + +<h3 id="不影响弹性盒子的属性">不影响弹性盒子的属性</h3> + +<p>由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：</p> + +<ul> + <li><a href="/zh-CN/docs/Web/CSS/Using_CSS_multi-column_layouts">多栏布局模块</a>的 <code>column-*</code> 属性对弹性项目无效。</li> + <li>{{cssxref("float")}} 与 {{cssxref("clear")}} 对弹性项目无效。使用 <code>float</code> 将使元素的 <code>display</code> 属性计为<code>block</code>。</li> + <li>{{cssxref("vertical-align")}} 对弹性项目的对齐无效。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="基本的弹性布局示例">基本的弹性布局示例</h3> + +<p>这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> + + <span class="selector token"><span class="class token">.flex</span> + </span><span class="punctuation token">{</span> + <span class="comment token">/* 基本样式 */</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">350</span>px<span class="punctuation token">;</span> + <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#555</span><span class="punctuation token">;</span> + <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">14</span>px Arial<span class="punctuation token">;</span> + + <span class="comment token">/* 建立弹性框 */</span> + <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> + <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + + <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> + <span class="property token">flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="class token">.flex</span> > div + </span><span class="punctuation token">{</span> + <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span> + <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span> + + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30</span>px<span class="punctuation token">;</span> <span class="comment token">/* 让过渡表现良好。（从/到"width:auto"的过渡 + 至少在 Gecko 和 Webkit 上是有 bug 的。 + 更多信息参见 http://bugzil.la/731886 ） */</span> + + <span class="property token">-webkit-transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span> + <span class="property token">transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/* colors */</span> + <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(1)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#009246</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(2)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#F1F2F1</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(3)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#CE2B37</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + + <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:hover</span> + </span><span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Flexbox nuovo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flex<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>uno<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>due<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>tre<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="圣杯布局示例">圣杯布局示例</h3> + +<p>此示例展示了弹性盒子根据不同屏幕分辨率动态改变布局的能力。下图说明了这种转换。</p> + +<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> + +<p>这里展示的正是针对浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。弹性盒子让这变得很简单。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> + + <span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">24</span>px Helvetica<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#999999</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> </span><span class="punctuation token">{</span> + <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">800</span>px<span class="punctuation token">;</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> + <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + <span class="property token">flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > article </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#cccc33</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#dddd88</span><span class="punctuation token">;</span> + <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span> + <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span> + <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> + <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > nav </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span> + <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> + <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> + <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > aside </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span> + <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> + <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> + <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> + <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token">header, footer </span><span class="punctuation token">{</span> + <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#eebb55</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ffeebb</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/* 窄到已不足以支持三栏 */</span> + <span class="atrule token"><span class="rule token">@media</span> all and <span class="punctuation token">(</span><span class="property token">max-width</span><span class="punctuation token">:</span> 640px<span class="punctuation token">)</span></span> <span class="punctuation token">{</span> + + <span class="selector token"><span class="id token">#main</span>, <span class="id token">#page</span> </span><span class="punctuation token">{</span> + <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> + <span class="property token">flex-direction</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > article, <span class="id token">#main</span> > nav, <span class="id token">#main</span> > aside </span><span class="punctuation token">{</span> + <span class="comment token">/* 恢复到文档内的自然顺序 */</span> + <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token"><span class="id token">#main</span> > nav, <span class="id token">#main</span> > aside, header, footer </span><span class="punctuation token">{</span> + <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> + <span class="property token">max-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>header</span><span class="punctuation token">></span></span>header<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>header</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>main<span class="punctuation token">'</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>article</span><span class="punctuation token">></span></span>article<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>article</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>nav</span><span class="punctuation token">></span></span>nav<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>nav</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>aside</span><span class="punctuation token">></span></span>aside<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>aside</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>footer</span><span class="punctuation token">></span></span>footer<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>footer</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="试验场地">试验场地</h2> + +<p>有几个在线弹性盒子试验场地可供进行各种实验：</p> + +<ul> + <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> + <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> + <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li> +</ul> + +<h2 id="务必牢记">务必牢记</h2> + +<p>描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。</p> + +<p>弹性盒子的排布与<a href="https://developer.mozilla.org/zh-CN/docs/CSS/writing-mode">书写模式</a>是一致的，这意味着排布的<strong>主轴起点</strong>和<strong>主轴终点</strong>根据的是<strong>开始</strong>与<strong>结束</strong>的位置。</p> + +<p><strong>侧轴起点</strong>与<strong>侧轴终点</strong>依赖于<strong>开始</strong>或<strong>前面（before）</strong>的位置定义，而这个“<strong>前面”</strong>依赖于 <a href="/zh-CN/docs/Web/CSS/direction"><code>direction</code></a> 的值。</p> + +<p>只要 <code>break-</code> 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 <code>break-after</code>、<code>break-before</code> 和 <code>break-inside</code>，以及 CSS 2.1 中的 <code>page-break-before</code>、<code>page-break-after</code> 和 <code>page-break-inside</code> 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基础支持（单行弹性框）</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("22.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>多行弹性框</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10<sup>[5]</sup><br> + 15 {{property_prefix("-webkit")}}</td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基础支持（单行弹性框）</td> + <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoMobile("22.0")}}</td> + <td> + <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> + 1.1</p> + </td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>多行弹性框</td> + <td>{{CompatGeckoMobile("28.0")}}</td> + <td>1.3</td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Safari 在版本 6.0 (iOS.1)以前支持的是规范的一个与现有版本不兼容的旧版草案。Safari 6.1（以及 iOS 7 上的 Safari）已更新为支持最终版本。</p> + +<p>[2] 直到 Firefox 22 为止，用户必须修改 <code>about:config</code> 设置，将 <code>layout.css.flexbox.enabled</code> 改为 <code>true</code> 才能激活对弹性盒子的支持。从 Firefox 22 到 Firefox 27，此设置项默认为 <code>true</code>，而 Firefox 28 中取消了此设置项。</p> + +<p>[3] Internet Explorer 10 支持的是规范的一个与现有版本不兼容的旧版草案；Internet Explorer 11 <a href="http://msdn.microsoft.com/zh-CN/library/ie/dn265027%28v=vs.85%29.aspx"> 已更新为 </a> 支持最终版本。</p> + +<p>[4] Android 浏览器直到 4.3 为止支持的是规范的一个与现有版本不兼容的旧版草案。Android 4.4 已更新为支持最终版本。</p> + +<p>[5] 在 Opera 12.10 的<code>弹性盒子</code>初始实现中是没有前缀的，但 Opera 版本 15 到 16 和 Opera Mobile 的 15 到 19 需要 {{property_prefix("-webkit")}}. 在 Opera 17 及 Opera Mobile 24 中再次取消了前缀。</p> + +<p>[6] 直到 Firefox 29 为止，在弹性项目上指定 <code>visibility: collapse</code> 将使其被视为 <code>display: none</code> 处理，而预期的行为是被视为 <code>visibility: hidden</code>。建议的处理方式是在弹性项目上使用 <code>visibility:hidden</code>，这样其行为应当与指派了 <code>visibility:collapse</code> 一致。更多信息，参考 {{bug(783470)}}.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>各浏览器对弹性盒子的实现中的 bug 的信息，请参考 <a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a>。</li> +</ul> diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..9ea8045d96 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,187 @@ +--- +title: 使用flexbox来布局web应用 +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +tags: + - CSS + - 弹性盒子 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +<p>{{CSSRef}}</p> + +<p>使用 <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 {{HTMLElement("div")}} 元素、<a href="/en-US/docs/Web/CSS/position#Absolute_positioning">绝对定位</a> 和一些JavaScript hacks, 使用仅仅几行 <a href="/en-US/docs/Web/CSS">CSS</a> 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：</p> + +<ul> + <li>你想要将一个元素放在页面的中间</li> + <li>你想要一组在垂直方向可以一个紧挨一个的布局容器</li> + <li>你像要创建一行按钮或者其它元素，这些元素在小屏幕中可以垂直折叠</li> +</ul> + +<p>这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 <em>flexbox</em> 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">the more general guide to using CSS flexible boxes</a>.</p> + +<h2 id="基础">基础</h2> + +<p>如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 {{HTMLElement("div")}} 元素中，通过设置 {{cssxref("display")}} 属性为 flex 来使用flexbox，然后设置它任意一行的 {{cssxref("flex-flow")}} <font face="Consolas, Liberation Mono, Courier, monospace">属性</font>, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。</p> + +<p>接下来，只要你想让某个元素使用弹性布局，就为它添加 {{cssxref("flex")}} 属性。一般情况下，你将会使用下列三个值之一：</p> + +<ul> + <li>如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 <code>flex: none</code>，none 将会被解释为 <code>0 0 auto</code>.</li> + <li>如果想要一个固定大小的元素，则设置 <code>flex: 0 0 <em>size。</em></code>如：<code>flex 0 0 60px。</code></li> + <li>如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置 <code>flex: auto，它代表</code> <code>1 1 auto</code>.</li> +</ul> + +<p>有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。</p> + +<h2 id="示例_1_在页面中把一个元素居中">示例 1: 在页面中把一个元素居中</h2> + +<p>在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。</p> + +<h3 id="CSS_内容">CSS 内容</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="HTML_内容">HTML 内容</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('示例_1_在页面中把一个元素居中', 500, 500) }}</p> + +<h2 id="示例2_垂直放置一系列的容器">示例2: 垂直放置一系列的容器</h2> + +<p>假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 {{cssxref("flex")}} 属性，设置头部区域 {{cssxref("flex")}} 属性，底部区域不设置来实现自动扩展功能。</p> + +<h3 id="CSS_内容_2">CSS 内容</h3> + +<pre class="brush: css;highlight:[8,14,18]">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="HTML_内容_2">HTML 内容</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Increase container size</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> +</div> +</pre> + +<h3 id="Javascript_内容">Javascript 内容</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="结果_2">结果</h3> + +<p>{{ EmbedLiveSample('示例2_垂直放置一系列的容器', 500, 500) }}</p> + +<p>这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。</p> + +<h2 id="示例3_创建一个水平折叠的容器">示例3: 创建一个水平折叠的容器</h2> + +<p>在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 {{cssxref("flex-flow")}} 的值为 wrap 来实现。</p> + +<h3 id="CSS_内容_3">CSS 内容</h3> + +<pre class="brush: css;highlight:[4]">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="HTML_内容_3">HTML 内容</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Element 1</div> + <div class="fixed-size">Element 2</div> + <div class="fixed-size">Element 3</div> +</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> +</pre> + +<h3 id="Javascript_内容_2">Javascript 内容</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="结果_3">结果</h3> + +<p>{{ EmbedLiveSample('示例3_创建一个水平折叠的容器', 500, 200) }}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> +</ul> |