跳至主要內容

文件

彈性盒

利用彈性盒的強大功能來建立各種版面配置。

彈性盒元件在 UIkit 中建立版面配置方面扮演著重要的角色。許多元件，例如網格以及水平導覽，例如導覽列、子導覽列、麵包屑、分頁、分頁標籤和點導航都是使用彈性盒建構的，並且可以與此元件的實用類別一起使用。

用法

若要套用彈性盒版面配置模型，請使用下列其中一個類別。預設情況下，所有彈性項目都靠左對齊，寬度與其內容一樣寬，並且高度相符。

類別 描述
.uk-flex 建立彈性容器並像區塊元素一樣運作。
.uk-flex-inline 建立彈性容器並像行內元素一樣運作。 
<div class="uk-flex">
    <div></div>
</div>
項目 1
項目 2
項目 3
<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

水平對齊

這些類別定義彈性項目的水平對齊方式，並在它們之間分配空間。將其中一個或多個類別新增至彈性容器，以設定彈性項目的對齊方式。預設情況下，彈性項目會靠左對齊，就像 .uk-flex-left 類別一樣。

類別 描述
.uk-flex-left 新增此類別以將彈性項目靠左對齊。
.uk-flex-center 新增此類別以沿著主軸置中彈性項目。
.uk-flex-right 新增此類別以將彈性項目靠右對齊。
.uk-flex-between 新增此類別以均勻分配項目，使沿著主軸的項目之間有相等的空間。
.uk-flex-around 新增此類別以均勻分配項目，使每個項目的兩側都有相等的空間。
.uk-flex-left@s
.uk-flex-center@s
.uk-flex-right@s
.uk-flex-between@s
.uk-flex-around@s		 僅影響 640px 和更高裝置寬度。
.uk-flex-left@m
.uk-flex-center@m
.uk-flex-right@m
.uk-flex-between@m
.uk-flex-around@m		 僅影響 960px 和更高裝置寬度。
.uk-flex-left@l
.uk-flex-center@l
.uk-flex-right@l
.uk-flex-between@l
.uk-flex-around@l		 僅影響 1200px 和更高裝置寬度。
.uk-flex-left@xl
.uk-flex-center@xl
.uk-flex-right@xl
.uk-flex-between@xl
.uk-flex-around@xl		 僅影響 1600px 和更高裝置寬度。 
<div class="uk-flex uk-flex-center">
    <div></div>
</div>
項目 1
項目 2
項目 3
<div class="uk-flex uk-flex-center">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>
<div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <div></div>
</div>
項目 1
項目 2
項目 3
<div class="uk-flex uk-flex-center@m uk-flex-right@l">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

垂直對齊

這些類別定義彈性項目的垂直對齊方式。預設情況下，彈性項目會填滿其容器的高度，就像 .uk-flex-stretch 類別一樣。

類別 描述
.uk-flex-stretch 新增此類別以展開彈性項目，以填滿其父項的高度。
.uk-flex-top 新增此類別以將彈性項目對齊到頂部。
.uk-flex-middle 新增此類別以沿著交叉軸置中彈性項目。
.uk-flex-bottom 新增此類別以將彈性項目對齊到底部。
.uk-flex-stretch@s
.uk-flex-top@s
.uk-flex-middle@s
.uk-flex-bottom@s		 僅影響 640px 和更高裝置寬度。
.uk-flex-stretch@m
.uk-flex-top@m
.uk-flex-middle@m
.uk-flex-bottom@m		 僅影響 960px 和更高裝置寬度。
.uk-flex-stretch@l
.uk-flex-top@l
.uk-flex-middle@l
.uk-flex-bottom@l		 僅影響 1200px 和更高裝置寬度。
.uk-flex-stretch@xl
.uk-flex-top@xl
.uk-flex-middle@xl
.uk-flex-bottom@xl		 僅影響 1600px 和更高裝置寬度。 
<div class="uk-flex uk-flex-middle"></div>
項目 1
項目 2
…
項目 3
…
…
<div class="uk-flex uk-flex-middle uk-text-center">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2<br>…</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3<br>…<br>…</div>
</div>

方向修飾詞

這些類別定義彈性項目放置的軸及其方向。預設情況下，項目會從左至右水平執行，就像 .uk-flex-row 類別一樣。

類別 描述
.uk-flex-row 新增此類別以將彈性項目佈置為水平列。
.uk-flex-row-reverse 新增此類別以將彈性項目從右至左佈置。
.uk-flex-column 新增此類別以將彈性項目佈置為垂直欄。
.uk-flex-column-reverse 新增此類別以將彈性項目從下至上佈置。
.uk-flex-row@s
.uk-flex-column@s		 僅影響 640px 和更高裝置寬度。
.uk-flex-row@m
.uk-flex-column@m		 僅影響 960px 和更高裝置寬度。
.uk-flex-row@l
.uk-flex-column@l		 僅影響 1200px 和更高裝置寬度。
.uk-flex-row@xl
.uk-flex-column@xl		 僅影響 1600px 和更高裝置寬度。 
<div class="uk-flex uk-flex-column"></div>
項目 1
項目 2
項目 3
<div class="uk-flex uk-flex-column uk-width-1-3">
    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 3</div>
</div>

換行修飾詞

預設情況下，彈性項目會調整為一行並從左至右執行。新增下列其中一個類別以修改換行彈性項目的行為。

類別 描述
.uk-flex-wrap 新增此類別以使彈性項目在不再適合其容器時換行到另一行。
.uk-flex-wrap-reverse 新增此類別以變更項目的方向，使其從右至左執行。
.uk-flex-nowrap 新增此類別以強制將彈性項目放入一行。這是預設行為。

下列類別會修改換行彈性項目的對齊方式。

類別 描述
.uk-flex-wrap-stretch 新增此類別，讓項目線延伸以佔用剩餘空間
.uk-flex-wrap-between 新增此類別以均勻分配項目線，使第一列在容器的頂部，最後一列在容器的底部。
.uk-flex-wrap-around 新增此類別以均勻分配線條，使每行頂部和底部都有相等的空間。
.uk-flex-wrap-top 新增此類別以將多行彈性項目對齊到頂部。
.uk-flex-wrap-middle 新增此類別以垂直置中多行彈性項目。
.uk-flex-wrap-bottom 新增此類別以將多行彈性項目對齊到底部。 
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around"></div>
項目 1
項目 2
項目 3
項目 4
項目 5
項目 6
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around uk-background-muted uk-height-medium">
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 2</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 4</div>
    <div class="uk-width-1-2 uk-card uk-card-default uk-card-body uk-card-small">Item 5</div>
    <div class="uk-width-1-3 uk-card uk-card-default uk-card-body uk-card-small uk-margin-left">Item 6</div>
</div>

項目順序

預設情況下，彈性項目會根據來源順序佈置。若要將特定項目顯示為第一個或最後一個項目，只需新增下列其中一個類別即可。

類別 描述
.uk-flex-first 將項目顯示為第一個項目。
.uk-flex-last 將項目顯示為最後一個項目。
.uk-flex-first@s
.uk-flex-last@s		 僅影響 640px 和更高裝置寬度。
.uk-flex-first@m
.uk-flex-last@m		 僅影響 960px 和更高裝置寬度。
.uk-flex-first@l
.uk-flex-last@l		 僅影響 1200px 和更高裝置寬度。
.uk-flex-first@xl
.uk-flex-last@xl		 僅影響 1600px 和更高裝置寬度。 
<div class="uk-flex">
  <div></div>
  <div class="uk-flex-first"></div>
</div>
項目 1
項目 2
項目 3
<div class="uk-flex">
    <div class="uk-card uk-card-default uk-card-body uk-flex-last uk-margin-left">Item 1</div>
    <div class="uk-card uk-card-default uk-card-body uk-flex-first">Item 2</div>
    <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div>
</div>

項目尺寸

若要判斷彈性項目應佔用多少空間，請將下列其中一個類別新增至項目。預設情況下，項目會根據其內容決定大小，但允許縮小。

類別 描述
.uk-flex-initial 方塊的大小由其內容決定，但會縮小。
.uk-flex-none 方塊的大小由其內容決定。
.uk-flex-auto 分配空間時會考量項目的內容。
.uk-flex-1 分配空間時僅根據彈性來考量。
.uk-flex-initial@s
.uk-flex-none@s
.uk-flex-1@s		 僅影響 640px 和更高裝置寬度。
.uk-flex-initial@m
.uk-flex-none@m
.uk-flex-1@m		 僅影響 960px 和更高裝置寬度。
.uk-flex-initial@l
.uk-flex-none@l
.uk-flex-1@l		 僅影響 1200px 和更高裝置寬度。
.uk-flex-initial@xl
.uk-flex-none@xl
.uk-flex-1@xl		 僅影響 1600px 和更高裝置寬度。

彈性盒與網格

彈性盒元件可以與網格元件中的網格結合使用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Image 
<div class="uk-flex-middle" uk-grid>
    <div class="uk-width-2-3@m">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
    <div class="uk-width-1-3@m uk-flex-first">
        <img src="images/light.jpg" width="1800" height="1200" alt="Image">
    </div>
</div>