基本介紹

特點(diǎn)

flexbox是一種css display類型，提供一種更簡(jiǎn)單高效的布局方式；
flexbox可以對(duì)元素相對(duì)于父元素、兄弟元素進(jìn)行定位、控制尺寸、控制間距；
flexbox對(duì)響應(yīng)式有很好的支持；

工作原理

設(shè)置父元素的

display

flex

flex item

兼容性

Flex Container

先來(lái)看一個(gè)最簡(jiǎn)單的flex示例，外層div設(shè)置

display: flex

html:

<div class="flex-container">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>

css:

.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; }
.two{ background: lightgreen; }
.three{ background: skyblue; }

效果：

效果與浮動(dòng)布局類似，但是如果用浮動(dòng)實(shí)現(xiàn)的話需要寫(xiě)更多的代碼，而flex一行就搞定了。

1. Justify Content

如果我們想讓flex item居中排列呢，我們可以給flex container增加一個(gè)css屬性：

justify-content

.flex-container{
...
justify-content: center;
}

效果如圖：

除此之外

justify-content

flex-start

flex-end

space-around

space-between

space-even

2. Align Items

實(shí)現(xiàn)了flex方向的居中后，垂直于主軸方向（cross axis）的居中可以用