什麼是彈性盒子
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式
相容性
彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了乙個或多個彈性子元素。
彈性容器屬性
flex-direction屬性
flex-direction 屬性指定了彈性子元素在父容器中的位置。
flex-direction
: row;
/*橫向排列*/
flex-direction
: row-reverse;
/*橫向反轉排列*/
flex-direction
: column;
/*縱向排列*/
flex-direction
: column-reverse;
/*縱向反轉排列*/
justify-content
: flex-start;
/*元素緊貼行頭排列 */
justify-content
: flex-end;
/*元素緊貼行尾排列 */
justify-content
: center;
/*元素居中排列 */
justify-content
: space-evenly;
/* 元素平均分布在該行 */
justify-content
: space-around;
/* 元素平均分布在該行，兩邊距離是中間的一半 */
align-items
: flex-start;
/* 元素在縱軸起始位置開始排列 */
align-items
: flex-end;
/* 元素在縱軸結束位置開始排列 */
align-items
: baseline;
/* 元素與基線對齊 */
align-items
: center;
/* 元素在縱軸方向居中對齊 */
flex-wrap
: nowrap;
/*不換行*/
flex-wrap
: wrap;
/*換行*/
flex-wrap
: wrap-reverse;
/*反轉換行*/
對齊
設定"margin"值為"auto"值，自動獲取彈性容器中剩餘的空間。所以設定垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。
完美的居中
使用彈性盒子，居中變的很簡單，只想要設定 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:
align-self
align-self 屬性用於設定彈性元素自身在側軸（縱軸）方向上的對齊方式。
align-self
: flex-start;
/* 元素在起始位置開始排列 */
align-self
: flex-end;
/* 元素在結束位置開始排列 */
align-self
: baseline;
/* 元素與基線對齊 */
align-self
: center;
/* 元素在縱軸方向居中對齊 */
flex
: 1;
/*均勻分布*/
flex
: inherit;
/*繼承父元素*/
css彈性盒子
css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。css...
css 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
CSS 彈性盒子
清除浮動影響 很難實現居中 結構不靈活 不能隨時新增盒子 非常靈活 提供一套瀏覽器內建布局 特點 一維布局 固定的css屬性 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img ae7v8cwh 1607776830159 media 彈性盒相容性.png 決定了 這個布局一般用在移...