Flex 布局
示例
html
<view class="flex">
<view></view>
<view></view>
</view>示例
html
<view class="flex flex-col">
<view></view>
<view></view>
</view>示例
html
<view class="flex items-center">
<view></view>
<view></view>
</view>示例
html
<view class="flex items-center justify-between">
<view></view>
<view></view>
</view>| 类名 | 属性 |
|---|---|
flex | display: flex |
inline-flex | display: inline-flex |
flex-row | flex-direction: row |
flex-row-reverse | flex-direction: row-reverse |
flex-col | flex-direction: column |
flex-col-reverse | flex-direction: column-reverse |
flex-wrap | flex-wrap: wrap |
flex-wrap-reverse | flex-wrap: wrap-reverse |
flex-nowrap | flex-wrap: nowrap |
flex-shrink-0 | flex-shrink: 0 |
justify-start | justify-content: flex-start |
justify-end | justify-content: flex-end |
justify-center | justify-content: center |
justify-between | justify-content: space-between |
justify-around | justify-content: space-around |
justify-evenly | justify-content: space-evenly |
items-start | align-items: flex-start |
items-end | align-items: flex-end |
items-center | align-items: center |
items-baseline | align-items: baseline |
items-stretch | align-items: stretch |
justify-self-auto | justify-self: auto |
justify-self-start | justify-self: start |
justify-self-end | justify-self: end |
justify-self-center | justify-self: center |
justify-self-baseline | justify-self: baseline |
justify-self-stretch | justify-self: stretch |
content-start | align-content: flex-start |
content-end | align-content: flex-end |
content-center | align-content: center |
content-between | align-content: space-between |
content-around | align-content: space-around |
content-evenly | align-content: space-evenly |
self-auto | align-self: auto |
self-start | align-self: flex-start |
self-end | align-self: flex-end |
self-center | align-self: center |
self-baseline | align-self: baseline |
self-stretch | align-self: stretch |