Flexbox

背景

Flexbox 是一個(gè)CSS3新增的模塊，主要可以用來方便地進(jìn)行布局操作。

術(shù)語

container, 父容器

container指用于應(yīng)用這個(gè)布局的容器，它的值應(yīng)該為

.container {
  display: flex;
}

1. flex-direction: 指明了布局的方向，

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

包括了豎排還是橫排，reverse就是做逆序排序。默認(rèn)方向?yàn)閺淖笙蛴?，從上到下?/p>

2.flex-wrap: 默認(rèn)情況下，子元素會盡量排在一行，但是你也可以利用這個(gè)屬性讓其換行。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3.flex-flow: 這是flex-direction和flex-wrap的縮寫形式,默認(rèn)值為row nowrap

.container {
  flex-flow: <'flex-direction'> || <'flex-wrap'>;
}

4.justify-content: 該屬性主要用于控制子元素間空余空間的分布，適用于行分布的情況

.container {
  justify-content: flex-start | flex-end | center | space-between| space-around;
}

這里給出各個(gè)屬性值得意義：

5.align-items: 該屬性控制子元素縱軸方向上排列方式

.container {
  align-items: flex-start | flex-end |center | baseline | stretch;
}

6.align-content: 該屬性與justify-content類似，適用于多行內(nèi)容的剩余空間分配情況

.container {
  align-content: flex-start| flex-end | center | space-between |space-around|stretch;
}

屬性總結(jié)

這里其實(shí)你可以將flex-flow的相關(guān)屬性看做是一條軸線(也是主軸main axis)，你用flex-direction來控制這條軸線的方向(橫向或豎向)，而用flex-wrap來控制其子元素是否換行。而容器內(nèi)的各個(gè)子元素將會沿著這條軸線進(jìn)行排布。
另一方面，控制子元素布局方式的屬性依據(jù)其軸線方向。主軸用justify-content,而縱軸方向用align-items和align-content，后者和水平justify-content類似，控制著每行子元素組之間的間距（可以認(rèn)為行間距），而align-items就是控制子元素間的對齊方式的。

children，子元素

說完容器的屬性，再來看一下子元素的屬性。

1. order: 默認(rèn)情況下元素之間的排列順序是按照其在HTML文檔中定義好的順序進(jìn)行排列的，不過可以通過這個(gè)屬性對其進(jìn)行更改。

.item {
  order: <integer>;
}

元素的數(shù)值會按自然數(shù)的排列順序進(jìn)行排序。

2.flex-grow: 這個(gè)屬性控制元素的放大，默認(rèn)值為0，不允許出現(xiàn)負(fù)數(shù)

.item {
  flex-grow: <number>;
}

容器內(nèi)的各個(gè)元素大小是根據(jù)其比例進(jìn)行計(jì)算的，如所有元素都是1，則元素大小就會均分，如果有一個(gè)是2，則這個(gè)元素就會比其他元素都大2倍。

3.flex-shrink: 與flex-grow類似，它是用來控制元素的縮小的，默認(rèn)值為1，也是不允許出現(xiàn)負(fù)值。

4.flex-basis: 在分配容器剩余空間時(shí)會對元素基于此值先進(jìn)行計(jì)算

.item {
  flex-basic: <length> | auto;
}

如果設(shè)置為0， 在內(nèi)容去額外的空間不會被考慮進(jìn)去，如果設(shè)置為auto，則額外的空間會基于flex-grow的值進(jìn)行分配。

5.flex: 這是flex-grow和flex-shrink和flex-basis的縮寫形式,默認(rèn)值為0，1，auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}

6.align-self: 這個(gè)屬性值允許子元素復(fù)寫容器的設(shè)置的align-items值。

.item {
  align-self: auto | flex-start| flex-end| center |baseline|stretch;
}

PS：設(shè)置了flex的子元素，float,clear和vertical-align對其都不會有作用。

屬性總結(jié)

針對子元素之間的屬性，主要是用來設(shè)置子元素的大小而排布順序的。其中伸縮都會根據(jù)容器的軸線進(jìn)行。這樣就可以很容易實(shí)現(xiàn)等分，1：n：1之類的布局方式了。

舉個(gè)栗子??

在這里，舉一個(gè)簡單的例子，利用flexbox可以很容易地解決絕對居中的布局問題，而且代碼量很少。

居中布局

.parent {
  display: flex;
  height: 300px;
}

.child {
  width: 100px;
  height: 100px;
  margin: auto;
}

從上面代碼可以看到，將父元素display的值設(shè)置為flex后，子元素的margin值設(shè)置為auto后就自動居中了，是不是很神奇呢？

參考文檔

A Guide to Flexbox