基礎概念
採用flex布局的元素，稱為flex容器。它的所有子元素自動成為容器成員。容器存在兩根主軸：水平軸（主軸）與垂直軸（側軸、交叉軸）。預設沿主軸排列。
給元素設定display: felx,容器就變成了了flex布局。
容器屬性
容器flex布局之後，可設定下面這些屬性：
（1）flex-direction：決定主軸的方向。有四個值可選
(2) flex-wrap: 預設情況下，子元素都排在一條軸線上。使用這個屬性，可以決定當軸線上排不下是否換行
(3) flex-flow: 該屬性是 flex-direction與flex-wrap的簡寫
可以這樣寫：flex-flow: row nowrap。
(4) justify-content: 定義子元素在主軸上的對齊方式
注意：這些屬性都是相對主軸方向而言的
(5) align-items: 定義子元素在側軸上的對齊方式
(6) align-content: 定義多根軸線的對齊方式。（當子容器多行排列時，設定行與行之間的對齊方式。）
子元素的屬性
(1) order: 定義專案的排列順序，數字越小的，排列越在前
例如: order：1如果所有子元素flex-grow屬性都為1，將等分剩餘空間。定義為其他值，則按比例分配剩餘空間
(3) flex-shrink: 定義元素的縮小比例，預設為1
如果所有專案都設定：flex-shrink：1當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
注意：負值對該屬性無效
(4) flex-basis: 定義了在分配多餘空間之前，元素佔據的主軸空間。預設值atuo，即元素本身的大小
比如定義基本值為50，那麼給元素將佔據固定的空間。
(5) flex屬性時：flex-grow、flex-shrink、flex-basis的簡寫，預設值為 0、1、atuo
(6) align-self: 執行某個元素與其他元素有不一樣的對齊方式。
該屬性可以覆蓋父級的align-items屬性。預設值auto，表示繼承父元素的align-items屬性
屬性值： auto | flex-start | flex-end | center | baseline | stretch;
子元素flex屬性計算問題
下列布局在頁面上的寬度比是多少？
.flex
.left
.right
// html
="flex"
>
="left"
>
<
/div>
="right"
>
<
/div>
<
/div>
屬性值：
flex-grow: 定義專案的放大比例，預設為0
flex-shrink: 定義專案的縮小比例，預設為1
flex-basis: 定義了在分配多餘空間之前，專案佔據的主軸空間（main size）,預設為auto
flex: 是flex-grow，flex-shrink和flex-basis的簡寫
<
!doctype html>
"en"
>
"utf-8"
>
test<
/title>
.container
.first
.second
.third
<
/style>
<
/head>
='container'
>
='first'
>
<
/div>
='second'
>
<
/div>
='third'
>
<
/div>
<
/div>
<
/body>
<
/html>
首先計算加上權重的值：1*40 + 3 * 200 + 2 * 40 = 720 px
.first 需要縮小的值：(40
*1/720)*
80=4.44px
.second 需要縮小的值：
(200*3
/720)*
80=66.67px
.first 需要縮小的值：(40
*2/720)*
80=8.89px
50+50*3/5 = 80px, right盒子為100+50*2/5px =120px所以最終為80px: 120px = 2 : 3 css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...
css布局之彈性布局flex
作用 彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。彈性布局是定義在乙個父容器中，加上display flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float clear和vert...
預設布局換行 css 之Flex布局
一 flex 布局是什麼？flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。box 行內元素也可以使用 flex 布局 box 其中webpick伺服器前邊必須加上 webpick 注意，設為 flex 布局以後...