基本介紹

特點

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

工作原理

設置父元素的

display

flex

flex item

兼容性

Flex Container

先來看一個最簡單的flex示例，外層div設置

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; }

效果：

效果與浮動布局類似，但是如果用浮動實現的話需要寫更多的代碼，而flex一行就搞定了。

1. Justify Content

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

justify-content

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

效果如圖：

除此之外

justify-content

flex-start

flex-end

space-around

space-between

space-even

2. Align Items

實現了flex方向的居中后，垂直于主軸方向（cross axis）的居中可以用