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
|
---
title: 弹性盒子与其他布局方法的联系
slug: Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系
tags:
- CSS
- box alignment
- flexbox
translation_of: >-
Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods
---
<div>{{CSSRef}}</div>
<p class="summary">在本文中，我们将了解弹性盒子（Flexbox）如何与所有其他CSS模块相适应。如果您想学习flexbox，我们将一起找出需要注意的规范和flexbox与一些其他模块不同的原因。</p>
<div class="note">
<p><strong>注意：CSS 1和CSS 2是一个单一的整体规范，其中所有CSS都定义在一个文档中。随着CSS成为一种功能更加丰富的语言，各个部分有不同的发展速度，如何维护一个庞大的规范就成了问题。因此现在的CSS是模块化的，不同的CSS模块有不同的规范，一起构成了现在的CSS。这些模块之间相互关联，并且处于不同的开发阶段。</strong></p>
</div>
<h2 id="box_alignment_模块">box alignment 模块</h2>
<p>许多人开始关注flexbox的最初原因是在flex容器中能够很好的对齐其中的元素。flexbox可以设置在其交叉轴以及主轴上的对齐属性。</p>
<p>这些属性最开始出现在flexbox规范中，现在已经成为<a href="https://www.w3.org/TR/css-align-3/">Box Alignment规范</a>的一部分。 这个规范详细说明了在所有布局中（不仅仅是flexbox）对齐属性是如何起作用的。 对齐属性用于设置元素对齐方式和沿轴的空间分配。</p>
<p>之所以在flexbox规范和box alignment模块规范中都有对对齐属性的详细描述，是为了确保flexbox规范的完成不会受box alignment模块规范的影响，因为后者需要详细说明所有的布局类型中的对齐方法。flexbox规范中有一条注释指出将来一旦Box Alignment Level 3完成，它将会取代flexbox规范中的相关定义：</p>
<blockquote>
<p>“注意：虽然对齐属性是在CSS Box Alignment [CSS-ALIGN-3]中定义的，但“ Flexible Box Layout”在此处重现了相关属性的定义，以免形成规范性的依赖关系，而这可能会减慢规范的发展。这些属性仅适用于Flex布局，直到CSS Box Alignment Level 3完成并定义其对其他布局模式的效果；此外，在Box Alignment模块中定义的任何新值都将应用于Flexible Box Layout；换句话说，一旦Box Alignment模块完成，其中的相关定义将取代此处的定义。”</p>
</blockquote>
<p>在本系列的后续文章（在flex容器中对齐元素）中，我们将彻底研究Box Alignment属性如何应用于flex元素。</p>
<h3 id="gap属性">gap属性</h3>
<p>属性{{cssxref("row-gap")}} 和 {{cssxref("column-gap")}}，其简写为{{cssxref("gap")}}，近期添加到了盒子布局规范中。这些属性（名称为<code>grid-row-gap</code>, <code>grid-column-gap</code> and <code>grid-gap</code>）最初定义在CSS网格布局中。但是他们被重命名并移入盒子布局规范。这样的话，所有的布局方法都可以使用这些属性。不过在浏览器实现Flex的这些属性之前只能通过{{cssxref("margin")}} 来控制元素之间的间隙距离。</p>
<h2 id="Writing_Modes">Writing Modes</h2>
<p>In the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of flexbox</a> article, I explained that flexbox is <strong>writing mode aware</strong>. Writing modes are fully detailed in the CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes specification</a>, which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding <strong>block</strong> and <strong>inline</strong> directions is key to new layout methods.</p>
<p>It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See <a href="https://24ways.org/2016/css-writing-modes/">this article</a> for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. </p>
<h3 id="The_writing_modes">The writing modes</h3>
<p>The writing modes specification defines the following values of the {{cssxref("writing-mode")}} property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. You can change the live example below to these modes in order to see what happens to the flex layout.</p>
<ul>
<li><code>horizontal-tb</code></li>
<li><code>vertical-rl</code></li>
<li><code>vertical-lr</code></li>
<li><code>sideways-rl</code></li>
<li><code>sideways-lr</code></li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p>
<p>Note that <code>sideways-rl</code> and <code>sideways-lr</code> have support only in Firefox currently. There are also some known issues with regard to <code>writing-mode</code> and flexbox. You can see more information on browser support in the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">MDN documentation for writing-mode</a>. However if you are planning on using writing modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read!</p>
<p>Note that you would not normally use CSS and the <code>writing-mode</code> property to change an entire document to another writing mode. This would be done via HTML, by adding a <code>dir</code> and <code>lang</code> attribute to the <code>html</code> element to indicate the document language and default text direction. This would mean that the document would display correctly even if CSS did not load.</p>
<h2 id="Flexbox_and_other_layout_methods">Flexbox and other layout methods</h2>
<p>The flexbox specification contains a <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">definition of what happens</a> if an item uses another layout method and then becomes a flex item. For example, if an item is floated and then its parent becomes a flex container. Or, how a flex container behaves as part of layout.</p>
<p>An element set to <code>display: flex</code> behaves in most ways like any other block level container that establishes a containing block. Floats will not intrude, and the containers' margins will not collapse.</p>
<p>With regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having <code>display: flex</code> applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. If you have used the {{cssxref("vertical-align")}} property, as used with <code>inline-block</code> or table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead.</p>
<p>In this next live example the child elements have been floated, and then their container has had <code>display: flex</code> added. If you remove <code>display: flex</code>, you should see that the <code>.box</code> element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply <code>display: flex</code> and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items.</p>
<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p>
<h2 id="Flexbox_and_Grid_Layout">Flexbox and Grid Layout</h2>
<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the <code>flex</code> properties that may have been assigned to the child elements will be ignored.</p>
<p>You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well.</p>
<h3 id="Flex_and_grid_—_whats_the_difference">Flex and grid — what's the difference?</h3>
<p>A common question is to ask what the difference is between Flexbox and CSS Grid Layout — why do we have two specifications that sometimes appear to be doing the same thing?</p>
<p>The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas Grid Layout is a two-dimensional layout method. The example below has a flex layout. As already described in the Basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. When space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other.</p>
<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p>
<p>If we create a very similar layout using Grid, we can control the layout in both rows and columns.</p>
<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p>
<p>These examples point to another key difference between these layout methods. In Grid Layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves.</p>
<p>In some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your CSS. There is rarely a right or wrong answer.</p>
<p>As a rule of thumb, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it.</p>
<p>For more comparisons of grid and flexbox see the article <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a>. This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use.</p>
<h2 id="Flexbox_and_display_contents">Flexbox and display: contents</h2>
<p>The <code>contents</code> value of the {{cssxref("display")}} property is a new value that is described in the spec as follows:</p>
<blockquote>
<p>“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”</p>
</blockquote>
<p>This value of <code>display</code> controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.</p>
<p>In the following live example I have a flex container with three child elements. One of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.</p>
<p>By adding <code>display: contents</code> to the wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. You can try removing the <code>display: contents</code> line to see it return.</p>
<p>Note that this only removes the box from the layout; the sub-children don’t become direct children in any other way. You can see that as I have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children. They have been laid out as flex items, but as they are not direct children they do not get the other styling.</p>
<div class="warning">
<p><strong>Warning</strong>: Use of <code>display: contents</code> will also remove the element from the accessibility tree – screen readers will not see what's inside, just the same as if you used <code>display: none</code>. Use of <code>contents</code> should only be for presentational, not content, elements.</p>
</div>
<p>Also, having removed the box you cannot then use it to — for example — add a background colour behind the nested sub children. If you remove <code>display: contents</code> in this live example you will see that the direct child we are removing has an orange background colour. This also disappears when the box disappears. </p>
<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p>
<p>Browser support for <code>display:contents</code> is limited and required for this demo to work. Firefox supports <code>display: contents</code> already, and the value is being implemented in Chrome. Once there is better browser support this feature will be very useful in circumstances where you need the markup for semantic reasons but do not want to display the box that it would generate by default.</p>
|
