flex彈性布局

定義

flex是flexible box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。

適用範圍

任何乙個容器都可以指定為flex布局。

關於flex

布局原理

採用flex布局的元素稱為容器，它的所有子元素自動成為容器成員，稱為專案，子容器可以橫向排列也可以縱向排列。

總結原理：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式。

flex布局常見父項屬性

以下6個屬性是對父元素設定的

1.flex-direction： 設定主軸的方向

flex-direction屬性決定主軸的方向（即專案的排列方向）

當確定了一條為主軸，剩下的一條就為側軸

說明row

從左到右(預設值)

row-reverse

從右到左

column

從上到下

column-reverse

從下到上

2.justify-content： 設定主軸上的子元素排列方式

justify-content屬性定義了專案在主軸上的排列方式

說明flex-start

從頭部開始，如果主軸是x軸則從左到右，是y軸則從上到下(預設值)

flex-end

從尾部開始

center

在主軸居中對齊

space-arround

平分剩餘空間

space-between

先兩邊貼邊再平分剩餘空間

3.align-items： 設定側軸上的子元素的排列方式（單行）

align-items屬性定義了側軸上的子元素的排列方式，但側軸上的元素應該只能有一行

說明flex-start

從頭部開始（預設值）

flex-end

從尾部開始

center

在側軸居中對齊

stretch

拉伸

4.align-content： 設定側軸上的子元素的排列方式（多行）

align-contentt屬性定義了側軸上的子元素的排列方式，但側軸上的元素有多行

說明flex-start

從頭部開始(預設值)

flex-end

從尾部開始

center

在側軸居中對齊

space-arround

平分剩餘空間

space-between

先兩邊貼邊再平分剩餘空間

stretch

拉伸

5.flex-wrap： 設定子元素是否換行

說明nowrap

不換行(預設值)

wrap

換行

6.flex-flow：復合屬性，相當於同時設定了flex-direction和flex-wrap

例如 flex-flow：row wrap；即設定主軸橫向排列 且 換行

1.flex： 子專案佔的份數

定義子專案分配剩餘空間所佔份數

語法：flex：

例如：乙個新增flex布局的父盒子有3個div，它們分別所佔份數為1、2、3。

可知將剩餘空間一共分成了1+2+3=6份

所以它們其實就分別分配了剩餘空間的1/6、1/3、1/2。

2.align-self： 控制子項在側軸的排列方式

align-self允許單個單個專案與其他專案不一樣的對齊方式，可覆蓋align-items屬性。可選屬性與align-items一樣，預設值為auto，表示繼承父元素align-items屬性，如果沒有父元素，則等同於stretch。

3. order屬性定義子專案的排列順序

子專案order數值越小，排列越靠前，預設為0。

flex布局（彈性布局）

flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...

Flex布局（彈性布局）

flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...

Flex布局 彈性布局

1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...