---

前言

你們還在僅僅使用塊、行內、表格、定位等傳統布局方式進行網頁的布局嗎？
告訴你們一個新的布局模式，CSS3中新引入的FlexBox布局，布局方式十分靈活，含有優秀和驚奇的新特性，而且在主流瀏覽器上的兼容也不錯，是新布局方式的首選。
下面說一下。

---

FlexBox簡介

FlexBox布局，全稱“CSS Flexible Box Layout Module”，即伸縮布局盒，目的在于提供一個更好更有效的布局方式，用來控制項目的對齊和自由分配容器空間。

---

基礎術語

FlexBox和CSS3的其它屬性不太一樣，它是一個模塊，并非一個屬性，其中包含多個CSS3 屬性。

看一下基礎術語概念圖：

---

瀏覽器支持

可以看到對于瀏覽器的支持率很好，使用率也達到了90%以上。

瀏覽器的支持：

• Chrome any
• Firefox any
• Safari any
• Opera 12.1+
• IE 10+
• iOS any
• Android any

---

歷史

FlexBox從2009年7月W3C工作草案，一直到現在，話法規范主要分為以下三個版本規范：

• 舊版本： 2009年版本，使用display:box和display:inline-box
• 混合版本： 2011年版本，使用display:flexbox和display:inline-flexbox
• 新版本：使用display:flex和display:inline-flex

所以為了讓各類瀏覽器可以全部兼容，我們至少要寫上面這三種版本的相應語法。

---

各屬性說明

---

display

用于定義FlexBox容器。

.container {display: flex; /* or inline-flex */ }

---

flex-direction

用來設置主軸排列方向。

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

---

flex-wrap

用于設置換行，默認nowrap。

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

---

flex-flow

是flex-direction和flex-wrap兩個屬性的合并縮寫。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

---

justify-content

設置主軸的對齊方式。

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

---

align-items

設置側軸的對齊方式。

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

---

align-content

多行時，側軸的對齊方式。

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

---

order

排序序號。

.item {order: <integer>; }

---

flex-grow

設置項目的擴展比例。

.item {flex-grow: <number>; /* default 0 */ }

---

flex-shrink

設置項目的縮小比例。

.item {flex-shrink: <number>; /* default 1 */ }

---

flex-basis

定義Flex項目在分配Flex容器剩余空間之前的一個默認尺寸。

.item {flex-basis: <length> | auto; /* default auto */ }

如果設置為0，內容不在考慮周圍額外空間。如果設置為auto，額外空間會基于flex-grow值做分布。如下圖所示：

---

flex

flex是flex-grow，flex-shrink和flex-basis三個屬性的縮寫。第二個和第三個參數(flex-shrink和flex-basis)是可選值。其默認值是0 1 auto。

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

---

align-self

用來在單獨的伸縮項目上覆寫默認的對齊方式

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

---

概要圖

---

前綴腳本工具

關于編寫各個不同兼容版本的前綴代碼，可以使用autoprefixer腳本，這個腳本會解析CSS文件并且添加瀏覽器前綴到CSS相應規則中。

自動前綴工具 autoprefixer

---

拓展資源

FlexBox屬性工具 Flexbox playground

FlexBox Games FLEXBOX FROGGY

W3C文檔 Flexbox in the CSS specifications

---

博客名稱：王樂平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS3 FlexBox布局入门简析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。