## 概述 CSS3在布局方面做了非常大的改進,使得我們隊塊級與安娜蘇的布局排列變得十分靈活,適應性非常強,其強大的伸縮性,在響應式開發中可以發揮極大的作用. 主軸:flex容器的主軸主要用來配置flex項目,默認是水平方向. 側軸:與主軸垂直的軸稱作側軸,默認是垂直方向. 方向:默認主軸從左向右,側軸默認從上到下. 主軸和側軸并不是固定不變的,通過flex-direction可以互換. ## 使用方法 在父盒子中設置屬性display: flex;,然后在子盒子中設置flex: 1; 后面數字沒有單位. 就可以設置平均劃分的等分. 而且是響應式的. ## 最小最大寬度 min-width: 300px; 設置最小像素,小于這個數值就不進行縮放了 max-width:300px; 設置最大像素,不能大于這個數值. ## 固定寬度 設置固定寬度的盒子不進行縮放,并且不參與盒子的劃分.此盒子不設置flex屬性,并且直接設置一個寬度即可. 父盒子1000像素-固定寬度,然后剩余的像素再進行劃分. ## 伸縮布局排列方式 在父盒子中設置 flex-direction: column; 設置主軸方向,即可以豎著排列了. flex-direction: row就是水平排列. flex-direction: row-reverse; 父盒子設置進行水平翻轉. 看案例 : http://m.ctrip.com/html5/ ## justify-content 屬性 子盒子顯示方式 flex-start 貼著父盒子左側對齊 flex-end 貼著父盒子右側對齊,但是順序不變. centre 居中顯示 justify-content: space-between 每個子盒子顯示縫隙.左右的盒子是貼著父盒子的. justify-content: space-around; 子盒子左右都有空隙.類似左右設置margin. ## flex-wrap屬性 當子盒子內容寬度大于父盒子,是否換行.在父盒子設置 flex-wrap: wrap; 換行 flex-wrap: nowrap; 默認值,不換行,強制一行內顯示. flex-wrap: wrap-reverse; 基本不用 ## align-items(調整軸對齊,對用于單行) align-items: center; 即可以垂直居中. align-items: stretch; 子盒子不給高度,子盒子的高度就和父盒子的高度一樣了,子元素的高度拉伸以適應父盒子. ## alingn-content(堆棧) 是針對flex容器里面多軸(多行)居中的情況,必須給父盒子設置下面的屬性,否則沒有效果. display: flex; flex-flow: row wrap; ## order屬性 可以通過此屬性來控制盒子的排列順序,默認值是0. 數值越小,排列越靠前. 但是父盒子要設置display:flex;