display:-webkit-flex 定義元素為彈性盒子;
屬性:direction(方向)
flex-direction : row //預設值,子元素正向1 2 3 布局
flex-direction : row-reverse //子元素正向3 2 1 布局
flex-direction:column; //縱向布局 1 2 3
flex-direction:column-reverse; //縱向布局 3 2 1
flex-wrap
-webkit-flex-wrap : nowrap; //預設值,固定畫素的子元素會自動按比例縮放
-webkit-flex-wrap : wrap; //固定畫素的子元素不會自動縮放,而是自動換行
-webkit-flex-wrap : wrap-reverse //與wrap一樣,但是布局是3 2 1
justify-content 父容器水平位置的定位
justify-content : flex-start; //右對齊
justify-content : center; //居中
justify-content : flex-end; //左對齊
justify-content : space-around; //自動對齊
justify-content : space-between; //兩端對齊
align-items 父容器垂直位置的定位
align-items : flex-start; //上對齊
其他與justify一樣
aligh-self 子元素的垂直定位
與父容器定位方式一致
Css3 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
Css3彈性盒子
css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫，只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行，彈性子元素在彈性盒子內一行...
CSS3彈性盒子
css3彈性盒子 彈性盒子是 css3 的一種新的布局模式，是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inli...