1.將盒子居中：
1.知道小盒子的寬高：left :50%，margin-left：-（小盒子的一半的寬度）
2.不知道小盒子的寬度：left：50% transfrom:translate:(-50%);
2.彈性布局：（預設只有一行 開啟換行：flex-wrap:wrap就不可以用align-items進行設定了。
可以用align-content來代替（注意只對多行管用））
1.使用彈性布局需要在父盒子中開啟彈性布局預設為兩個軸（後代為行內快）：display:flex 元素預設分為兩個軸排布
主軸為x方向 副軸為y方向：
調整元素在主軸上的排布方式：justify-content：
flex-end到主軸末尾
flex-start預設值
center居中
space-between左右靠邊 中間間隙 相等排布
space-around 左右間隙相等
設定副軸的對齊方式：align-items
如果只有一行設定元素 在副軸的對齊方式，
align-items: flex-start
:flex-end
: center
如果設定單個副軸：align-self:覆蓋父元素的align-items
調整主軸的方向：flex-direction:column;還是用justify-content來設定主軸。
預設為一行若要換行為flex-wrap:wrap;
換行之後使用無法使用align-items進行設定
彈性盒子布局
彈性子元素屬性 鳴謝彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空...
flex彈性盒子,,彈性盒子布局
flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...
彈性盒子布局 flex布局
彈性盒子布局方式 box 設為flex布局後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 容器...