css彈性布局

在移動端一種方便的布局方式，打破了之前用浮動，定位的布局，更加靈活。

包含父元素和子元素，有對應的屬性應用在父元素和子元素達到布局的目的

要開啟彈性布局，父元素要先加上乙個flex屬性

display: -webkit-flex; /* safari */

display: flex;

當然，行內元素也可以用彈性布局，同樣父元素要加上flex屬性 

display: inline-flex;

另外父元素還可以加上下面6個屬性

flex-direction

flex-wrap
flex-flow
justify-content
align-items
align-content

用的比較多的就2個屬性,子元素的水平和垂直對齊

//子元素水平排列

.box

//子元素垂直排列

.box 

用的最多的就是flex屬性(包含了flex-grow, flex-shrink 和 flex-basis)

flex-grow表示放大比例，預設為0，flex-shrink縮寫比例，預設為1。flex-basis表示子元素寬度，預設auto

.item

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

css 彈性布局

什麼是彈性布局？flex布局，是h5新出的布局方式，主要代替傳統float浮動布局。注意 布局要給父元素設定，子元素按照布局方式排列，他會使塊級元素不獨佔一行。特點 當沒有給彈性布局設定換行時，子元素不會自動換行會在一行顯示。display flex 設定彈性布局 flex direction 設定...

CSS 彈性布局

box box box 基本概念 row 預設值 主軸為水平方向，起點在左端。row reverse 主軸為水平方向，起點在右端。column 主軸為垂直方向，起點在上沿。column reverse 主軸為垂直方向，起點在下沿。nowrap 預設 不換行 wrap 換行，第一行在上方 wrap r...

Css 彈性布局

彈性布局 display flex 要發生彈性布局的子元素，他們的父元素，成為容器需設定display flex flex將塊級元素設定為容器 inline flex將行內元素設定為容器 元素設定為flex容器後，容器的text align，vertical align失效設定主軸的方向 flex ...