CSS-Flex 佈局

原文地址：zclzone.com

Flex 屬性詳述

1. flex-direction

決定主軸的方向,即元素排列的方向，有四種方式:

• row: 主軸爲水平方向，元素沿主軸從左至右排列

• column: 主軸爲豎直方向，元素沿主軸從上至下排列

• row-reverse: 主軸水平，元素從右至左排列，與 row 反向

• column-reverse: 主軸豎直，元素從下至上排列，與 column 反向

2. flex-wrap

默認狀況下，item 排列在一條線上，即主軸上，flex-wrap 決定當排列不下時是否換行以及換行的方式，有三種方式|wrap|wrap-reverse

• nowrap: 自動縮小項目，不換行

• wrap: 換行,第一行在上方

• wrap-reverse: 換行，第一行在下方

3. flex-flow

flex-direction 和 flex-wrap 的簡寫形式

如：row wrap 、 column wrap-reverse 等。默認值爲 row nowrap，即橫向排列 不換行。

4. justify-content

決定元素在主軸上的對齊方式，當主軸沿水平方向時,有五種方式：

• flex-start(默認): 左對齊

• flex-end: 右對齊

• center: 居中對齊

• space-between: 兩端對齊

• space-around: 沿軸線均勻分佈

5. align-items

決定元素在交叉軸上的對齊方式，當主軸沿水平方向時，有五種方式：

• flex-start: 頂端對齊

• flex-end: 底部對齊

• center: 豎直方向上居中對齊

• baseline: 元素第一行文字的底部對齊

• stretch: 當元素未設置高度時，元素將和容器等高對齊

6. align-content

該屬性定義了當有多根主軸時，即 item 不止一行時，多行在交叉軸軸上的對齊方式。注意當有多行時，定義了 align-content 後，align-items 屬性將失效。align-content 可能值含義以下（假設主軸爲水平方向）：

• flex-start：左對齊

• flex-end：右對齊

• center：居中對齊

• space- between：兩端對齊

• space-around：沿軸線均勻分佈

• stretch：各行將根據其 flex-grow 值伸展以充分佔據剩餘空間

flex item 屬性詳述

1. order

der 的值是整數，默認爲 0，整數越小，item 排列越靠前

<div class="wrap">
  <div class="div" style="order:4"><h2>item 1</h2></div>

  <div class="div" style="order:2"><h2>item 2</h2></div>

  <div class="div" style="order:3"><h2>item 3</h2></div>

  <div class="div" style="order:1"><h2>item 4</h2></div>
</div>
複製代碼

2. flex-grow

定義了當 flex 容器有多餘空間時，item 是否放大。默認值爲 0，即當有多餘空間時也不放大；可能的值爲整數，表示不一樣 item 的放大比例，如

<div class="wrap">
  <div class="div" style="flex-grow:1"><h2>item 1</h2></div>

  <div class="div" style="flex-grow:2"><h2>item 2</h2></div>

  <div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>
複製代碼

即當有多餘空間時item一、item二、和item3以1：2:3的比例放大。

3. flex-shrink

定義了當容器空間不足時，item 是否縮小。默認值爲 1，表示當空間不足時，item 自動縮小，其可能的值爲整數，表示不一樣 item 的縮小比例。

4. flex-basis

項目在主軸上佔據的空間，默認值爲 auto。以下代碼

<div class="wrap">
  <div class="div" style="flex-basis:80px"><h2>item 1</h2></div>

  <div class="div" style="flex-basis:160px"><h2>item 2</h2></div>

  <div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div>
複製代碼

5. flex

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 三屬性的簡寫總和.

6. align-self

align-self 屬性容許 item 有本身獨特的在交叉軸上的對齊方式，它有六個可能的值。默認值爲 auto

• auto：和父元素 align-self 的值一致

• flex-start：頂端對齊

• flex-end：底部對齊

• center：豎直方向上居中對齊

• baseline：item 第一行文字的底部對齊

• stretch：當 item 未設置高度時，item 將和容器等高對齊

怕什麼真理無窮，進一寸有進一寸的的驚喜~