彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。
彈性容器通過設定** display 屬性的值為 flex 或 inline-flex**將其定義為彈性容器。
彈性容器內包含了乙個或多個彈性子元素。
屬性描述
flex
復合屬性。設定或檢索伸縮盒物件的子元素如何分配空間。
flex-grow
設定或檢索彈性盒的擴充套件比率。
flex-shrink
設定或檢索彈性盒的收縮比率
flex-basis
設定或檢索彈性盒伸縮基準值。
flex-flow
復合屬性。設定或檢索伸縮盒物件的子元素排列方式。
flex-direction
設定或檢索伸縮盒物件的子元素在父容器中的位置。
flex-wrap
設定或檢索伸縮盒物件的子元素超出父容器時是否換行。
align-content
設定或檢索彈性盒堆疊伸縮行的對齊方式。
align-items
設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
align-self
設定或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。
justify-content
設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
order
設定或檢索伸縮盒物件的子元素出現的順序。
給哪個元素設定display: flex; 代表的是他的子元素使用彈性布局給元素使用彈性布局之後 會讓他的子元素沿著主軸方向依次排列
預設的主軸方向是x軸
彈性布局的特點 : 保證了子元素在父元素的主軸方向永遠不會溢位 會自動伸縮
彈性布局也叫作伸縮布局
/* row： 主軸與行內軸方向作為預設的書寫模式。即橫向從左到右排列（左對齊）。
row-reverse： 對齊方式與row相反。
column： 主軸與塊軸方向作為預設的書寫模式。即縱向從上往下排列（頂對齊）。
column-reverse： 對齊方式與column相反。 */
style
>
CSS3 彈性盒子 Flex Box
彈性盒子是 css3 的一種新的布局模式 彈性盒子由彈性容器 flex container 和彈性子元素 flex item 兩部分組成。彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。彈性容器內包含了乙個或者多個彈性子元素。屬性描述 displ...
CSS3 彈性盒子 Flex Box
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間 一 disp...
css3 彈性盒子
display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...