CSS的Flex彈性布局概念

1、flex概念：

flex是flexible box的縮寫，顧名思義為「彈性布局」，用來為盒裝模型提供最大的靈活性。

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

設為flex布局以後，子元素的float、clear和vertical-align屬性將失效

.box

採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。

2、容器的屬性

以下6個屬性設定在容器上。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

.box

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用

order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

css彈性布局（flex）

1 概念解讀 傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。但對於一些特殊的布局方式 如垂直居中 傳統盒模型顯得有點力不從心，而對彈性布局 flex 來說卻很容易實現。2009年，w3c 提出了一種新的方案 flex 布局 flex是flexib...

css的flex彈性布局

效果1 給容器設定屬性justify content space evenly，紅色矩形之間的距離相等。除了space evenly值以外，還有sapce between space around 設定屬性align items center 容器內的專案垂直居中。html 效果二 給容器設定屬性a...

css布局之彈性布局flex

作用 彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。彈性布局是定義在乙個父容器中，加上display flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float clear和vert...