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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: flex-wrap
slug: Web/CSS/flex-wrap
tags:
- CSS
- CSS Flexible Boxes
- CSS Property
translation_of: Web/CSS/flex-wrap
---
<p>{{ CSSRef}}</p>
<h2 id="Tóm_tắt">Tóm tắt</h2>
<p>Thuộc tính <strong>flex-wrap</strong> xác định xem flex item có bị ép vào một dòng đơn hay có thể được rớt dòng thành nhiều dòng. Nếu việc rớt dòng được chấp nhận, thuộc tính này còn cho phép bạn xác định hướng để rớt dùng.</p>
<p>{{cssinfo}}</p>
<p>Xem bài <a href="/en/CSS/Using_CSS_flexible_boxes">sử dụng flexible box</a> để biết thêm thông tin cũng như đọc thêm về các thuộc tính khác.</p>
<h2 id="Cú_pháp">Cú pháp</h2>
<pre class="brush:css">flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
</pre>
<h3 id="Các_giá_trị">Các giá trị</h3>
<p>Thuộc tính <strong>flex-wrap</strong> chấp nhận những giá trị sau đây.:</p>
<dl>
<dt><code>nowrap</code></dt>
<dd>Các flex item phải nằm trên một dòng đơn, việc này có thể khiến cho các item này tràn ra ngoài container.</dd>
<dd><strong>Cross-start</strong> sẽ tương đương với <strong>start</strong> hoặc <strong>before</strong> tùy thuộc vào giá trị của {{cssxref("flex-direction")}}.</dd>
<dt><code>wrap</code></dt>
<dd>Những flex item sẽ có thể bị tách thành hai dòng nếu như tổng chiều rộng của các item lớn hơn chiều rộng của container. C<strong>ross-start</strong> sẽ tương đương với <strong>start</strong> hoặc <strong>before</strong> tùy thuộc vào giá trị của <code>flex-direction</code> và <strong>cross-end</strong> sẽ có giá trị ngược lại với <strong>cross-start</strong>.</dd>
<dt><code>wrap-reverse</code></dt>
<dd>Nó giống như <code>wrap</code> nhưng <strong>cross-start</strong> và <strong>cross-end</strong> thì có giá trị ngược lại.</dd>
<dt>
<h3 id="Cú_pháp_chính_quy">Cú pháp chính quy</h3>
</dt>
</dl>
{{csssyntax}}
<h2 id="Ví_dụ">Ví dụ</h2>
<h3 id="HTML">HTML</h3>
<div id="Live_Sample">
<pre class="brush: html"><h4>This is an example for flex-wrap:wrap </h4>
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse </h4>
<div class="content2">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">/* Common Styles */
.content,
.content1,
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
text-align: center;
}
.content div,
.content1 div,
.content2 div {
height: 50%;
width: 50%;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
/* Flexbox Styles */
.content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.content1 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
}
.content2 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap-reverse;
}
</pre>
</div>
<h3 id="Kết_quả">Kết quả</h3>
<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p>
<h2 id="Các_thông_số_kỹ_thuật">Các thông số kỹ thuật</h2>
<table class="standard-table">
<thead>
<tr>
<th>Thông số</th>
<th>Trang thái</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Tương_thích">Tương thích</h2>
<p> </p>
<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("css.properties.flex-wrap")}}</p>
<p> </p>
<h2 id="Xem_thêm">Xem thêm</h2>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Sử dụng flexible boxes</a></li>
</ul>
|
