# Flex 布局 利用Flexbox的力量創建廣泛的布局。 這個組件使用了Flexbox —— 一個比較新的概念，它擁有強大的布局效果。 * * * ## 用法 若要使用這個組件，只需要添加 `.uk-flex` 類到一個 `&lt;div&gt;` 元素。這樣將會創建flex容器。默認地，所有flex條目都會左對齊，并被賦予一致的高度和寬度。 ### Example  ### Markup ``` <div class="uk-flex"> <div>...</div> </div> ``` * * * ### 行內的Flex 默認情況下，flex容器顯示為塊元素。為了仍然保持按照flexbox模型對其內容進行布局，并賦予其行內元素的行為，需要用到 `.uk-flex-inline` 類來替代 `uk-flex`. * * * ## 修飾 你可以添加多個不同的類來調整flex的行為。 ### 對齊 這些類定義flex條目的水平或垂直對齊，并賦予它們彼此之間的間距。 | Class | 描述 | | --- | --- | | `.uk-flex-center` | 添加這個類，水平居中flex條目 | | `.uk-flex-right` | 添加這個類，右對齊flex條目 | | `.uk-flex-top` | 添加這個類，頂部對齊flex條目 | | `.uk-flex-middle` | 添加這個類，垂直居中flex條目 | | `.uk-flex-bottom` | 添加這個類，底部對齊flex條目 | | `.uk-flex-space-between` | 添加這個類，使得條目均勻分布，第一個條目在主軸的開頭，最后一個條目在主軸的末尾。 | | `.uk-flex-space-around` | 添加這個類，使得條目均勻分布,使每個條目具有相同的左右空間。 | ### Example  ### Markup ``` <div class="uk-flex uk-flex-middle uk-flex-space-between">...</div> ``` * * * ### 方向 這些類用于定義flex主軸的方向。默認地，flex條目按照水平從左到右的方向放置。 | Class | 描述 | | --- | --- | | `.uk-flex-row-reverse` | 添加這個類，使flex條目從右到左排列。 | | `.uk-flex-column` | 添加這個類，使flex條目垂直排列成一列。 | | `.uk-flex-column-reverse` | 添加這個類，使flex條目從下到上排列。 | ### Example  ### Markup ``` <div class="uk-flex uk-flex-column uk-flex-column-reverse">...</div> ``` * * * ### 換行 默認情況下，flex條目將它們自身擬合到一行中。添加 `.uk-flex-wrap` 類，使條目不再匹配視口時切換到另一行。要改變條目的方向，使它們從右到左排列，添加 `.uk-flex-wrap-reverse` 類即可。下面這些類用來修飾換行的flex條目的對齊屬性。強制將 flex條目放入一行，添加 `.uk-flex-nowrap` 類即可。 | Class | 描述 | | --- | --- | | `.uk-flex-wrap-top` | 添加這個類，使多行flex條目對齊到頂部。 | | `.uk-flex-wrap-middle` | 添加這個類，使多行flex條目垂直居中。 | | `.uk-flex-wrap-bottom` | 添加這個類，使多行flex條目對齊到底部。 | | `.uk-flex-wrap-space-between` | 添加這個類，使條目的行均勻分布，第一行在容器頂部，最后一行在容器底部。 | | `.uk-flex-wrap-space-around` | 添加這個類，是條目的行均勻分布，每一行都有一樣的空間。 | ### Example  ### Markup ``` <div class="uk-flex uk-flex-wrap uk-flex-wrap-reverse uk-flex-wrap-space-around">...</div> ``` * * * ### 條目排序 默認地，flex條目根據源碼的順序排列。要將某個元素作為第一個或者最后一個進行顯示，只需要添加下列類名中的一個。 | Class | 描述 | | --- | --- | | `.uk-flex-order-first` | 將此條目顯示為第一個 | | `.uk-flex-order-last` | 將此條目顯示為最后一個 | | `.uk-flex-order-first-small` `.uk-flex-order-last-small` | 作用于視口寬度 _480px_ 以上設備。 | | `.uk-flex-order-first-medium` `.uk-flex-order-last-medium` | 作用于視口寬度 _768px_ 以上設備。 | | `.uk-flex-order-first-large` `.uk-flex-order-last-large` | 作用于視口寬度 _960px_ 以上設備。 | | `.uk-flex-order-first-xlarge` `.uk-flex-order-last-xlarge` | 作用于視口寬度 _1220px_ 以上設備。 | ### Example  ### Markup ``` <div class="uk-flex"> <div class="uk-flex-order-first">...</div> </div> ``` * * * ### 條目的規模 要確定一個flex條目需要占用多大的空間，為條目添加以下類中的一個即可。 | Class | Description | | --- | --- | | `.uk-flex-item-none` | 由內容決定其尺寸 | | `.uk-flex-item-auto` | 按條目的內容分配空間 | | `.uk-flex-item-1` | 空間分配完全基于Flex | * * * ## Flex與網格 Flex組件可以與 [網格](grid.html) 組合使用。 ### Example