彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了乙個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
以下元素展示了彈性子元素在一行內顯示，從左到右:
屬性 描述
flex-direction 指定彈性容器中子元素排列方式
flex-wrap 設定彈性盒子的子元素超出父容器時是否換行
flex-flow flex-direction 和 flex-wrap 的簡寫
align-items 設定彈性盒子元素在側軸（縱軸）方向上的對齊方式
align-content 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊
justify-content 設定彈性盒子元素在主軸（橫軸）方向上的對齊方式
1. flex-direction 屬性
決定專案的方向。
注意：如果元素不是彈性盒物件的元素，則 flex-direction 屬性不起作用。
屬性值值 描述
row 預設值。元素將水平顯示，正如乙個行一樣。
row-reverse 與 row 相同，但是以相反的順序。
column 元素將垂直顯示，正如乙個列一樣。
column-reverse 與 column 相同，但是以相反的順序。
2. flex-wrap 屬性
flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
值 描述
nowrap 預設值。規定元素不拆行或不拆列。
wrap 規定元素在必要的時候拆行或拆列。
wrap-reverse 規定元素在必要的時候拆行或拆列，但是以相反的順序。
.flex-container
（1） nowrap (預設)：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
3. flex-flow 屬性
.flex-container值 描述
stretch 預設值。專案被拉伸以適應容器。
center 專案位於容器的中心。
flex-start 專案位於容器的開頭。
flex-end 專案位於容器的結尾。
baseline 專案位於容器的基線上。
CSS3 彈性布局 flex
彈性布局 彈性布局又稱彈性盒子，伸縮盒子，是css3中的有一種布局方法，主要用來代替浮動float來完成頁面布局 可以使元素具有彈性，可以根據瀏覽器視窗的大小，進行自適應的放大縮小。要使用彈性布局，就必須先將乙個元素設定為彈性容器 我們可以通過 display 來設定彈性容器 display fle...
CSS3 彈性布局flex
css3中的彈性布局也叫flex布局，它是我們現在主要用的布局方式之一 它的優點就是方便快捷，有更大的靈活性 彈性盒子包括 彈性容器和彈性子元素，彈性容器dispaly flex 彈性子元素flex item 容器屬性 1.換行 flex wrap wrap nowrap 預設 不換行，所有子元素都...
css3彈性方塊布局 Flex
css3彈性方塊布局 flex 比較適合移動端的使用，下面是各瀏覽器的相容情況 先說一下自己的理解。剛開始看到這個就有點懵，怎麼一會是box，一會是flexbox，一會又是flex，到底是什麼鬼東西！其實他們只是不同版本的寫法而已 2009 version 標誌 display box or a p...