CSS3 彈性盒子 Flex Box

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

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

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

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

屬性描述

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 彈性盒子 Flex Box

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

CSS3 彈性盒子 Flex Box 一

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

css3 彈性盒子

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