flex布局方案已經是前端技術棧家家互曉的網頁布局方案，它為盒狀模型提供最大的靈活性，意為「彈性布局」。有幸讀了阮一峰老師的（flex布局教程-語法篇，flex布局教程-例項篇）並加以研究，受益良多，為我平時網頁布局提供了極大的便利性。flex是一維的東西，所以說它只能控制乙個方向，用座標系來表示就是x軸，y軸中的方向只能選乙個，方向對應flex布局中的flex-direction屬性，其屬性值就是用來控制方向的，即主軸main-axis方向，是水平方向還是垂直方向。水平方向（row）預設起點在左端，垂直方向（column）預設起點在上沿。
有了方向之後就是換行和對齊方式，flex容器屬性（flex-container）的精髓就在於對齊方式，它規定flex-item（即專案）是怎麼對齊的。justify-content屬性定義了專案在主軸的對齊方式，align-items屬性定義了專案在交叉軸（cross axis）的對齊方式。如果想要專案水平垂直居中對齊，下面是再好不過的方案。
display
: flex;
justify-content
: center;
align-items
: center;
flex
:1;/*網格布局*/
flex
: 0 0 33.3%;
/*百分比布局*/
我喜歡用文字記錄我學的東西。
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...