完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素，且父元素未設置高度 ...

容器屬性 容器支持的屬性有：display：通過設置display屬性，指定元素是否為Flex布局。flex-direction：指定主軸方向，決定了項目的排列方式。flex-wrap：排列換行設置。flex-flow:flex-direction和flex-wrap的簡寫形式 ...

在項目中，常常會遇到這樣的需求，要求布局如下所示，同時要求導航區的高度與內容區的高度始終保持一致，以邊框或者背景作為區分。 采用float的方式布局 需要通過js來監控兩個區域的高度變化，將高度的最大值作為兩者的高度 采用flex的方式布局 不需要去處理高度，兩 ...

flex布局很好用，優點很多：靜態流文件，空間概念，主流樣式可以簡單調整，同時支持bfc，空間可以動態分配，專業一維空間布局 這么多優點，所以要提倡使用彈性布局。 空間設置：flex的方向、定位這些可以再父節點設置。 內部單項設置：可擴展，可壓縮，占比，剩余空間占比，獨立對齊。這些需要在子 ...

1.控制軸方向的方法 display: flex;默認沿着X軸排列 如何方塊堆滿容器大於容器寬度。會自動壓縮 flex-direction決定主軸方向（X軸） 屬性值：4個 1：flex-direction: row 默認主軸從左到右，左起點 ...

網頁布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C提出了一種新的方案 - Flex布局，可以簡便、完整、響應式地實現各種頁面布局。已經得到了所有瀏覽器的支持 ...

float的特性一 .元素‘浮動’ .脫離文檔流 .但不脫離文本流 首先看一個案例，直觀的了解下float的特性 這個效果很明顯就是，p1設置了向左浮動，高度50，寬度200，背景綠色。浮動之后有什么影響呢？我們上面注意 ...

轉自阮一峰老師：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是Flex布局？ Flex是Flexible Box的縮寫，顧名思義為“彈性布局”，用來為盒裝模型提供最大的靈活性。 任何一個容器都可以指定 ...