flex-flow
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Thuộc tính viết tắt CSS flex-flow xác định hướng của flex container cũng như hành vi bao dòng của nó.
Try it
flex-flow: row wrap;
flex-flow: row-reverse nowrap;
flex-flow: column wrap-reverse;
flex-flow: column wrap;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
max-height: 300px;
display: flex;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
width: 60px;
margin: 10px;
}
Các thuộc tính thành phần
Thuộc tính này là dạng viết tắt của các thuộc tính CSS sau:
Cú pháp
css
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'> và <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* Giá trị toàn cục */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
Giá trị
Xem flex-direction và flex-wrap để biết chi tiết về các giá trị.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | flex containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Cú pháp hình thức
flex-flow =
<'flex-direction'> ||
<'flex-wrap'>
<flex-direction> =
row |
row-reverse |
column |
column-reverse
<flex-wrap> =
nowrap |
wrap |
wrap-reverse
Ví dụ
Thiết lập column-reverse và wrap
Trong ví dụ này, trục chính là hướng khối với điểm main-start và main-end được đảo ngược. Các flex item được phép bao dòng, tạo ra các dòng mới nếu cần.
css
.container {
flex-flow: column-reverse wrap;
}
Đặc tả
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |