# Flex 布局
利用Flexbox的力量創建廣泛的布局。
這個組件使用了Flexbox —— 一個比較新的概念,它擁有強大的布局效果。
* * *
## 用法
若要使用這個組件,只需要添加 `.uk-flex` 類到一個 `<div>` 元素。這樣將會創建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

- UIkit 中文文檔
- 開始使用
- 初學者
- 開始使用
- 如何自定義
- 布局示例
- 開發者
- 項目結構
- Less & Sass 文件
- 創建主題
- 創建樣式
- Customizer.json
- JavaScript
- 自定義前綴
- 核心組件
- 默認
- 基礎
- 打印
- 布局類組件
- 網格
- 面板/Panel
- 塊/Block
- 文章
- 評論/Comment
- 效果/Utility
- Flex 布局
- 覆蓋/Cover
- 導航類組件
- 導航菜單
- 導航欄
- 二級導航
- 面包屑/Breadcrumb
- 分頁
- 選項卡
- 縮略圖導航/Thumbnav
- 頁面元素
- 列表
- 描述列表
- 表格
- 表單
- 常用組件
- 按鈕
- 圖標
- 關閉/Close
- 徽章/Badge
- 提示框
- 縮略圖/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 動畫
- 對比度/Contrast
- JAVASCRIPT組件
- 下拉菜單
- 模態對話框
- 抽屜/Off-canvas
- 切換器/Switcher
- 撥動/toggle
- 滾動監聽/Scrollspy
- 平滑滾動
- 附加組件
- 布局類組件
- 動態網格
- 視差網格
- 導航類組件
- 圓點導航
- 滑動導航/Slidenav
- 動態分頁
- 常用組件
- 高級表單
- 文件表單/Form file
- 密碼表單
- 選擇表單
- 占位符
- 進度條/Progress
- JAVASCRIPT組件
- 燈箱/Lightbox
- 自動完成/Autocomplete
- 日期選擇器/Datepicker
- HTML 編輯器
- 滾動條/Slider
- 滑塊集/Slideset
- 幻燈片/Slideshow
- 視差/Parallax
- 手風琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附著/Sticky
- 時間選擇器
- 工具提示/Tooltip
- 上傳