彈性布局
彈性容器：設定了display:flex;這個元素稱為彈性容器。
裡面的子元素會按照彈性布局方式進行布局。
彈性子元素：彈性容器的直接子元素。
彈性主軸方向：flex-direction
row:左->右，預設;
column:上->下;
row-reverse:右->左;
column-reverse:下->上；
設定主軸內容分布:justify-content
flex-start:向主軸開始位置靠攏（預設）;
center:居中；
flex-end:向主軸結束位置靠攏;
space-around:平均分布，兩邊間距為中間一半。
space-between:平均分布，兩邊沒有間距。
space-evenly:平均分布，兩邊有間距，兩邊間距與中間相等。
設定側軸的內容分布：align-items
stretch(預設):拉伸。若子元素無高度會拉伸到與父元素一致的效果。
子元素設定高度則無效。
flex-start
center
flex-end
彈性布局換行：flex-warp
nowarp(預設):不換行
warp:換行
設定側軸多行分布：align-content
flex-start
flex-end
center
space-between
space-around
space-evenly
彈性布局剩餘空間分布設定:flex
flex:1; 剩餘空間佔乙份
flex:2;剩餘空間佔兩份
...排序:order
子元素按order屬性大小進行排序（小->大）
單獨設定子元素側軸排布：align-self
center
flex-start
flex-end
stretch
彈性布局課堂筆記
彈性布局，又稱 flex布局 是由w3c老大哥於2009年推出的一種布局方式。可以簡便 完整 響應式地實現各種頁面布局。而且已經得到所有主流瀏覽器的支援，我們可以放心大膽的使用。容器 需要新增彈性布局的父元素 專案 彈性布局容器中的每乙個子元素，稱為專案 主軸 在彈性布局中，我們會通過屬性規定水平 ...
CSS Flex彈性布局 筆記
flexbox 是 flexible box 的簡稱 注 意思是 靈活的盒子容器 是 css3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可 地展現出來。它之所以被稱為 flexbox 是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空...
Flex布局（彈性布局）學習筆記
相關的css屬性 flex flow是felx direction和flex wrap的縮寫屬性 flex direction 決定主軸的方向 1.row 主軸方向從左到右 預設值 2.row reverse 主軸方向從右到左 3.column 主軸方向從上到下 4.column reverse 主...