flex注意點
1）當父盒子設定display：flex；子元素的float、clear、vertical-align都會失效
2）採用flex布局的元素，稱為flex容器（flex container），而其中的子元素成為專案(flex item)
3）設定flex之後，其子元素都變為行內塊元素，可設定寬高
4）父盒子設定flex屬性，來控制子盒子
5）設定flex之後，子元素的盒子若裝不下不會自動換行，而是按照比例壓縮
六個屬性個父元素（容器）設定
1）flex-direction（設定主軸方向，預設水平x軸向右,元素跟著主軸來排列）
flex-direction: row（預設左到右）
flex-direction: row-reverse（右到左）
flex-direction: column（上到下）
flex-direction: column-reverse（下到上）
2）justify-content（設定主軸方向的子元素排列方式）
justify-content :flex-start(預設從主軸開始地方排列)
justify-content :flex-end(從主軸結束地方排列)
justify-content :center(居中對齊)
justify-content :space-around(將容器剩餘空間等分)
justify-content :space-between(先兩邊貼邊，然後將容器剩餘空間等分)
3）align-items（設定交叉軸方向的子元素排列方式，主要設定單行）
align-items:flex-start(預設值，交叉軸的開始，交叉軸為y軸的話就靠上排列)
align-items:flex-end(交叉軸的結束，交叉軸為y軸的話就靠下排列)
align-items:stretch;（交叉軸方向不要設定大小，盒子會拉公升到容器一樣大小；比如交叉軸為y軸就不要設定高度，交叉軸為x軸就不要設定寬度）
align-items:center（交叉軸居中對齊；適合單行）;
4）align-content（設定交叉軸方向的子元素排列方式，主要設定多行，屬性比align-items多了兩個）
align-content:flex-start(預設值，交叉軸的開始，交叉軸為y軸的話就靠上排列)
align-content:flex-end(交叉軸的結束，交叉軸為y軸的話就靠下排列)
align-content:stretch;（交叉軸方向不要設定大小，盒子會拉公升到容器一樣大小；比如交叉軸為y軸就不要設定高度，交叉軸為x軸就不要設定寬度）
align-content：centent（交叉軸居中對齊，適合多行文字）
align-content：space-around（均分交叉軸的剩餘空間，相當於給盒子設定了上下margin；例如如果交叉軸為y軸，上下距離是中間的一半）
align-content：space-between（交叉軸開始和結束貼邊，中間空出來）
5）flex-wrap（是否換行，預設不換行）
flex-wrap: nowrap(預設)
flex-wrap: wrap(換行)
6）flex-flow（是flex-direction和flex-wrap的簡寫）
flex-flow:column wrap;(y軸交叉軸，換行)
子元素屬性（專案屬性）記得父盒子設定display:flex;
flex屬性（分配剩餘空間的份額）可以用來做聖杯布局，兩端固定，中間自適應（三個盒子兩個盒子固定寬，中間設定flex：1）；
flex：number
flex-grow;flex-shrink;flex-basis第乙個是分配剩餘空間，第二個是壓縮空間（當容器寬度不夠時），第三個是定義元素空間大小；一般可以簡寫為flex:1 1 auto;比較少用，一般只要寫乙個值就夠了，flex：1；
align-self(單獨設定自己的交叉軸對齊方式，值和align-items差不多)
order(屬性定義專案的排列順序，數值越小，排列越靠前)
flex布局常用樣式
flex容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis flex 左對齊 頂對齊 flex flex 左右居中，上下居中 flexcenter flex column 垂直居中布局 flexclsdirectcolumn flexclsdirectcolum...
CSS布局flex布局常用屬性
display flex使用flex布局首先要設定父容器 水平方向 justify content flex start 起始端對齊 justify content flex end 末尾段對齊 justify content center 居中對齊 justify content space ar...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...