翻譯：孫和
Flexbox 布局，官方叫法是：Flexible Box 布局模式缎患，是CSS3的新型布局模式慕的。它可以用于容器中元素的對(duì)齊、方向和順序挤渔，就算這些元素是動(dòng)態(tài)生成的肮街，就算我們不知道這些元素的尺寸。Flex容器的主要特點(diǎn)是：他可以修改自己子元素的寬高判导，在不同的屏幕尺寸下嫉父，用最好的方式填充空間。
很多設(shè)計(jì)師和程序員發(fā)現(xiàn)flexbox布局很容易使用眼刃，因?yàn)榻o元素定位很容易绕辖，因此可以用很少的代碼實(shí)現(xiàn)很復(fù)雜的布局。這大大簡(jiǎn)化了開發(fā)流程擂红。
Flexbox布局算法基于方向仪际，不像基于垂直或水平方式布局的block和inline。CSS柵格布局模式正逐漸通行于大規(guī)模的布局昵骤，所以Flexbox布局方式一般用于小的應(yīng)用組件树碱。
Flex布局由父容器和他的直接子元素構(gòu)成。父容器被稱為flex container涉茧，子元素被稱為flex items赴恨。
支持最新flexbox規(guī)范的瀏覽器：
Android 4.4+
iOS 7.1+(-webkit前綴)
在父節(jié)點(diǎn)上，設(shè)置display屬性伴栓，就可以用flexbox布局
.flex-container{
display:-webkit-flex;
display:flex;
}
如果你想讓他顯示為行內(nèi)元素
.flex-container{
display:-webkit-inline-flex;
display:inline-flex;
}
注意伦连，在父容器上，這是你唯一要設(shè)置的屬性钳垮。 并且惑淳，他的所有直接子節(jié)點(diǎn)都會(huì)自動(dòng)變?yōu)閒lex items。
.flex-container{
-webkit-flex-direction:row;
flex-direction:row;
}
.flex-container{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
.flex-container{
-webkit-flex-direction:column;
flex-direction:column;
}
.flex-container{
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
.flex-container{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
.flex-container{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
.flex-container{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
.flex-container{
-webkit-flex-flow:<flex-direction>||<flex-wrap>;
flex-flow:<flex-direction>||<flex-wrap>;
}
.flex-container{
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
.flex-container{
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
.flex-container{
-webkit-justify-content:center;
justify-content:center;
}
.flex-container{
-webkit-justify-content:space-between;
justify-content:space-between;
}
.flex-container{
-webkit-justify-content:space-around;
justify-content:space-around;
}
.flex-container{
-webkit-align-items:stretch;
align-items:stretch;
}
