css3彈性方塊布局 Flex

css3彈性方塊布局：flex

比較適合移動端的使用，下面是各瀏覽器的相容情況

先說一下自己的理解。。

剛開始看到這個就有點懵，怎麼一會是box，一會是flexbox，一會又是flex，到底是什麼鬼東西！

其實他們只是不同版本的寫法而已

2009 version

標誌：display: box; or a property that is box- (eg. box-pack)

標誌：display: flexbox; or the flex() function or flex-pack property

標誌：display: flex/inline-flex; and flex- properties

新增了對flex項z-index的規定

沒有大的改動

flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

任何乙個容器都可以指定為flex布局。

行內元素也可以使用flex布局。

webkit核心的瀏覽器，必須加上-webkit字首。

注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。

最後還是上阮大神的文章，講解的很詳細。

CSS3彈性布局flex

彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。彈性容器內包含了乙個或多個彈性子元素。注意 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素...

CSS3 彈性布局 flex

彈性布局 彈性布局又稱彈性盒子，伸縮盒子，是css3中的有一種布局方法，主要用來代替浮動float來完成頁面布局 可以使元素具有彈性，可以根據瀏覽器視窗的大小，進行自適應的放大縮小。要使用彈性布局，就必須先將乙個元素設定為彈性容器 我們可以通過 display 來設定彈性容器 display fle...

CSS3 彈性布局flex

css3中的彈性布局也叫flex布局，它是我們現在主要用的布局方式之一 它的優點就是方便快捷，有更大的靈活性 彈性盒子包括 彈性容器和彈性子元素，彈性容器dispaly flex 彈性子元素flex item 容器屬性 1.換行 flex wrap wrap nowrap 預設 不換行，所有子元素都...