CSS3 總結(二十) 彈性盒子(CSS3)

2021-10-03 22:10:52 字數 1251 閱讀 2205

2.在彈性容器中可以設定min-width、max-width屬性來限制彈性子元素的最小及最大縮放寬度。(用在彈性容器)

3.flex-direction 屬性(用在彈性容器):指定了彈性子元素在父容器中的位置。值說明

row橫向從左到右排列(左對齊),預設的排列方式。

row-reverse

反轉橫向排列(右對齊,從後往前排,最後一項排在最前面。

column

縱向排列。

column-reverse

反轉縱向排列,從後往前排,最後一項排在最上面。

4.justify-content(用在彈性容器):設定彈性盒子元素在主軸(橫軸)方向上的對齊方式。

5.align-items(用在彈性容器,單行使用):設定彈性盒子元素在側軸(縱軸)方向上的對齊方式。

部分值說明

flex-end

元素位於容器的結尾。彈性盒子元素的側軸(縱軸)結束位置的邊界緊靠住該行的側軸結束邊界。

stretch

預設值。元素被拉伸以適應容器。如果指定側軸大小(就是彈性元素的height)的屬性值為』auto』,則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照』min/max-width/height』屬性的限制。(即遵循min/max-width/height條件下把高度調到跟彈性容器的高度一樣,前提是彈性元素未指定高度)

6.flex-wrap(用在彈性容器):設定彈性盒子的子元素超出父容器時是否換行。如果元素不是彈性盒物件的元素,則 flex-wrap 屬性不起作用。值說明

nowrap

預設值,規定靈活的專案不拆行或不拆列。(即不換行,收縮顯示,強制顯示在一行。)

wrap

規定靈活的專案在必要的時候拆行或拆列。

wrap-reverse

規定靈活的專案在必要的時候拆行或拆列,但是以相反的順序。(可以說是翻轉)

7.align-content(用在彈性容器,由flex-wrap產生的多行時使用):多行垂直對齊方式。針對flex容器裡面多軸(多行)的情況,類似 align-items(單行使用), 但不是設定子元素對齊(就是不修改flex-direction屬性),而是設定行對齊。

注意:使用前提,父元素display:flex、flex-direction:row、並設定換行flex-wrap:wrap(總的來說就是實現多行);這樣才起作用。

8.order(用在彈性子元素):設定彈性盒子的子元素排列順序。如果元素不是彈性盒物件的元素,則 order 屬性不起作用。預設值是 0,可以為負值,數值越小越在前。

css3 彈性盒子

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

Css3 彈性盒子

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

Css3彈性盒子

css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小,不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫,只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行,彈性子元素在彈性盒子內一行...