Css3 彈性盒子

彈性盒子是 css3 的一種新的布局模式。

css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。

引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。

彈性容器通過設定 display 屬性的值為 flex 或 inline-flex或設定position為flex將其定義為彈性容器。

彈性容器內包含了乙個或多個彈性子元素。

注意：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。

彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。

flex-direction順序指定了彈性子元素在父容器中的位置。

flex-direction的值有:

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。

各個值解析:

align-items設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

各個值解析:

flex-wrap屬性用於指定彈性盒子的子元素換行方式。

各個值解析:

align-content屬性用於修改flex-wrap屬性的行為。類似於align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。

各個值解析:

display

指定 html 元素盒子型別。

flex-direction

指定了彈性容器中子元素的排列方式

justify-content

設定彈性盒子元素在主軸（橫軸）方向上的對齊方式。

align-items

設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。

flex-wrap

設定彈性盒子的子元素超出父容器時是否換行。

align-content

修改 flex-wrap 屬性的行為，類似align-items, 但不是設定子元素對齊，而是設定行對齊

flex-flow

flex-direction 和 flex-wrap 的簡寫

order

設定彈性盒子的子元素排列順序。

align-self

在彈性子元素上使用。覆蓋容器的 align-items 屬性。

flex

設定彈性盒子的子元素如何分配空間。

css3 彈性盒子

display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...

Css3彈性盒子

css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫，只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行，彈性子元素在彈性盒子內一行...

CSS3彈性盒子

css3彈性盒子 彈性盒子是 css3 的一種新的布局模式，是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inli...