CSS 彈性盒子

1. 彈性盒子 概念    

css3 彈性盒(flexible box 或 flexbox)，是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
2.  css3 彈性盒子內容
彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了乙個或多個彈性子元素。
注意： 
彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
3.  彈性子元素在父容器中的位置
flex-direction 
row：橫向從左到右排列（左對齊），預設的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
4. 其他常用屬性
參考flex-flow ：flex-direction 和 flex-wrap 的簡寫justify-content ： 設定彈性盒子元素在主軸（橫軸）方向上的對齊方式
align-items ：設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap ： 設定彈性盒子的子元素超出父容器時是否換行
align-content ：修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊
flex-flow ： 設定彈性盒子的子元素排列順序
align-self :  在彈性子元素上使用。覆蓋容器的 align-items 屬性
flex : 設定彈性盒子的子元素如何分配空間

測試demo

<

html
>
<
head
>
head
>
<
style
>
#main 
#d style
>
<
script
>
script
>
<
body
>
<
div 
id="main"
>
<
div 
id="d"
style
="background-color:red;flex-grow:2;"
>a
div>
<
div 
id="d"
style
="background-color:blue;"
>b
div>
<
div 
id="d"
style
="background-color:khaki;"
>c
div>
<
div 
id="d"
style
="background-color:pink;"
>d
div>
<
div 
id="d"
style
="background-color:lightgrey;"
>e
div>
div>
body
>
html
>

css彈性盒子

css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。css...

css 彈性盒子

彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...

CSS 彈性盒子

清除浮動影響 很難實現居中 結構不靈活 不能隨時新增盒子 非常靈活 提供一套瀏覽器內建布局 特點 一維布局 固定的css屬性 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img ae7v8cwh 1607776830159 media 彈性盒相容性.png 決定了 這個布局一般用在移...