傳統(tǒng)的布局方案，基于 display + position + float 屬性實(shí)現(xiàn)舆吮，但是萎津，傳統(tǒng)的布局方案有很多限制，在布局要求越來越多的今天递宅，很多布局需要花費(fèi)很大精力才能實(shí)現(xiàn)娘香。
在這樣的背景下苍狰，F(xiàn)lex 布局在 2009 年橫空出世，它可以輕松地滿足各種各樣的布局需求烘绽，例如垂直居中等淋昭。它是一個(gè)新的盒子模型概念，彈性容器中的子元素可以在任何方向上根據(jù)已有空間進(jìn)行伸縮自適應(yīng)安接，以實(shí)現(xiàn)最佳的填充視覺效果翔忽，并且子元素之間不會(huì)相互重疊。
運(yùn)用 Flexbox 可以很容易實(shí)現(xiàn)垂直居中等盏檐。其更適用于一個(gè) UI 組件內(nèi)的元素布局呈現(xiàn)歇式。
使用 Flex 很簡(jiǎn)單，只需要指定一個(gè)盒子的 display 屬性即可以胡野。
.container {
display: flex || inline-flex;
}
這個(gè)時(shí)候材失，這個(gè)盒子被叫做“彈性容器”（flex container），盒子里面的子元素叫做“彈性項(xiàng)目”（flex items）硫豆。在這個(gè)容器中龙巨，存在兩條軸線，一條沿著默認(rèn)書寫方向的主軸(main axis)熊响，以及和它垂直的交叉軸(cross axis)旨别， Flex 布局就是在這樣的環(huán)境下實(shí)現(xiàn)的。
書寫模式是一個(gè) W3C 新增的屬性汗茄，可以通過
direction: ltr | rtl;來設(shè)置秸弛，是文本在頁(yè)面內(nèi)的排列方向，由于語言排列方向的差異洪碳，會(huì)有不同書寫方向的需求递览。默認(rèn)情況下，其是從左到右偶宫，從上到下來書寫的非迹，這種情況下，水平方向就是 flex 項(xiàng)目的主軸方向纯趋，垂直方向就是交叉軸方向憎兽。
容器內(nèi)的子元素叫做 flex 項(xiàng)目(flex items)。下面吵冒，就是 Flex 的一些基本概念纯命。
Flex 基本概念
Flex 的基本屬性并不多，常用的也就四五個(gè)痹栖。下面亿汞，分為容器和項(xiàng)目分別介紹。
容器的主要屬性
彈性容器上主要涉及到的概念有以下幾個(gè)：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
下面一次介紹在書寫方向?yàn)閺淖蟮接揖景ⅲ瑥纳现料虑闆r下各個(gè)屬性值以及其值的表現(xiàn)形式疗我。
flex-direction
定義布局的主軸方向咆畏。
.container {
flex-direction: row | row-reverse | column | column-reverse
}
各屬性值分別表示水平（從左到右），水平（從右至左）吴裤，垂直（從上到下）旧找，垂直（從下到上）。
flex-wrap
定義當(dāng)彈性項(xiàng)目超出一行時(shí)麦牺，是否換行钮蛛。
.container {
flex-wrap: wrap | nowrap | wrap-reverse;
}
各個(gè)屬性值分別表示換行，不換行剖膳，向反方向換行（默認(rèn)向上）魏颓。
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 屬性的合寫形式，其默認(rèn)值為：row nowrap,同理可以設(shè)置為 column wrap 等值吱晒。
justify-content
justify-content 用來設(shè)定彈性項(xiàng)目在主軸方向上的對(duì)齊方式甸饱。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items
align-items 表示彈性項(xiàng)目在交叉軸方向上的對(duì)齊方式。其屬性值與 jsutify-content 類似枕荞。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
上面屬性中柜候，設(shè)置為 center 的時(shí)候搞动，很容易實(shí)現(xiàn)垂直居中布局躏精，baseline 表示根據(jù)第一行文字的基線對(duì)齊，stretch 表如果項(xiàng)目沒有設(shè)置高度鹦肿，或者為 auto,則項(xiàng)目在交叉軸方向會(huì)填充滿整個(gè)容器高度矗烛。
align-content
align-content 表示多行項(xiàng)目的對(duì)齊方式，也就是箩溃，在交叉軸上瞭吃，所有的項(xiàng)目是如何排列的。所以其只有在項(xiàng)目不止一行的時(shí)候有效涣旨。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
彈性項(xiàng)目的主要屬性
以上是 flex 容器所具有的主要屬性歪架。下面是 flex 項(xiàng)目的主要屬性設(shè)置。
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
- order
flex-grow
指的是 flex 項(xiàng)目在空間分配上的拉伸因子霹陡，是一個(gè)默認(rèn)為1的數(shù)字和蚪，flex 項(xiàng)目會(huì)根據(jù)設(shè)置的數(shù)值按比例分配。
flex-shrink
指的是 flex 項(xiàng)目在必要時(shí)的收縮因子烹棉，與上面一個(gè)屬性對(duì)應(yīng)攒霹。所謂必要，指的是空間不足的時(shí)候浆洗，屬性值不能為賦值催束，如果屬性值為 0，則該項(xiàng)目不會(huì)收縮伏社。
flex-basis
指的是 flex 項(xiàng)目在分配空間時(shí)的默認(rèn)大小抠刺， flex 項(xiàng)目在這個(gè)參數(shù)的基礎(chǔ)上進(jìn)行伸縮變化塔淤。當(dāng)該屬性的值為 auto 的時(shí)候，其初始的占空間按照其中的內(nèi)容決定速妖。內(nèi)容越多凯沪，其初始值越大。也可以為其設(shè)置初始的寬高度值买优。
flex
flex 是前面三個(gè)屬性的簡(jiǎn)寫形式妨马。 默認(rèn)值為 1 0 auto.
.item {
flex: flex-grow flex-shrink flex-basis;
}
這個(gè)屬性有兩個(gè)特殊的值，auto 和 none杀赢， auto 等價(jià)于 1 1 auto, none 等價(jià)于 0 0 auto.
看下面的例子：
article:nth-child(1) {
flex: 1 200px;
order: 1; /*flex項(xiàng)的排列順序烘跺，默認(rèn)為0，越大越后脂崔，負(fù)數(shù)為前*/
}
article:nth-child(2) {
flex: 5 400px;
}
article:nth-child(3) {
flex: 1 200px;
order: -1;
}
本例中將整個(gè)空間分成了7分滤淳，第一個(gè)和第三個(gè)子項(xiàng)分別占用七分之一的空間，中間一個(gè)占七分之五砌左。后面的 200px 和 400px 意思是 flex 項(xiàng)目的最小寬度脖咐。
align-self
align-self 是前面 align-items 的特殊呼應(yīng)，為一個(gè)或多個(gè)特定的項(xiàng)目設(shè)置在交叉軸上的對(duì)齊方式汇歹，故而屬性值與 align-items 一致屁擅。
.item {
align-self: flex-start | flex-end | stretch | center | baseline;
}
order
通過設(shè)置 order 屬性來改變 flex 項(xiàng)目的默認(rèn)排列順序，默認(rèn)為 0产弹，可以為負(fù)值派歌，越大越后面，越小越前面痰哨。 order 相等時(shí)胶果，位置由 HTML 元素出現(xiàn)的前后確定。
以上就是 Flex 布局的基本知識(shí)和概念斤斧，一共涉及到 12 個(gè)屬性早抠，但常用的就幾個(gè)，多加練習(xí)撬讽，自然很輕松上手蕊连。
下面是一個(gè) flex 布局的基本應(yīng)用示例，運(yùn)用了 flex 的各個(gè)參數(shù)項(xiàng)锐秦。
Example
參考資料
