css 彈性盒子

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

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

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

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

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

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

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

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

css屬性flex規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。

以下元素展示了彈性子元素在一行內顯示，從左到右:

flex item 1
flex item 2
flex item 3

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

flex-direction: row | row-reverse | column | column-reverse

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

justify-content 語法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

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

align-items: flex-start | flex-end | center | baseline | stretch

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

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

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

align-content: flex-start | flex-end | center | space-between | space-around | stretch

排序order:用整數值來定義排列順序，數值小的排在前面。可以為負值。

.flex-item 

.first

設定"margin"值為"auto"值，自動獲取彈性容器中剩餘的空間。所以設定垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。

.flex-item 

.flex-item:first-child 
.flex-item

align-self: auto | flex-start | flex-end | center | baseline | stretch

flex屬性用於指定彈性子元素如何分配空間。

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

以下例項中，第乙個彈性子元素占用了 2/4 的空間，其他兩個各佔 1/4 的空間:

.flex-item 

.item1 
.item2 
.item3

css彈性盒子

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

CSS 彈性盒子

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

CSS 彈性盒子

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