彈性盒模型筆記（Reset257）

筆記搬運工 ?‍♂️?‍♂️?‍♂️

寫於 2020.11.1 — 2020.11.3 【p314 - p319】

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

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

4、彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。彈性容器通過設定display屬性的值為flex將其定義為彈性容器。彈性容器內包含了乙個或多個彈性子元素。

二、彈性盒的主軸和側軸

… 畫得有點醜，但…還能看 ?

1、主軸( mainaxis) ：伸縮容器的主軸，伸縮專案主要沿著這條軸進行排列布局。小心，它不一定是水平的；這主要取決於「justif-content"屬性

2、主軸起點 (main-start) 和主軸終點 (main-end) 伸縮專案放置在伸縮容器內從主軸起點 (main-start) 向主軸終點 (main-start) 方向。

3、主軸尺寸(main size) ：伸縮專案在主軸方向的寬度或高度就是主軸的尺寸。伸縮專案主要的大小屬性要麼是寬度，要麼是高度屬性，由哪乙個對著主軸方向決定。

注意：主軸和側軸的位置包括起點終點是可以轉換的（可以實現讓盒子橫向排列並且不會高度坍塌）

三、彈性盒的一些屬性

由於flexbox是乙個整體模組，而不是單一的乙個屬性，它涉及到了很多東西，包括它的整個屬性集。它們之中有一些是在父容器上設定，而有一些則是在子容器上設定。

1、在父容器上的屬性

（1）display: flex / inline-flex；

（2）flex-direction

（3）flex-wrap

（4）justify-content

記住：彈性盒裡面沒有左右的概念，只有軸的起點終點

（5）align-items

align-items 這個屬性其實我感覺有點像不同高度元素之間設定 vertical-align 屬性 ???， 可以這麼去記

（6）align-content

align-content 這個屬性像是在設定行與行之間在側軸上的對齊方式 ?

2、在內部元素上的屬性

（1）flex-grow（預設值是0）

（3）flex-basis：設定或檢索彈性盒伸縮基準值

（4）flex：設定了彈性專案如何增大或縮小以適應其彈性容器中可用的空間。

總結：

（5）order：屬性規定了彈性容器中的可伸縮專案在布局時的順序。元素按照 order 屬性的值的增序進行布局。擁有相同 order 屬性值的元素按照它們在源****現的順序進行布局。

（6）align-self：對齊當前 grid 或 flex 行中的元素，並覆蓋已有的 align-items 的值。即在側軸方向上的對齊方式。屬性值和align-items 相似。

移動端rem布局總結（Reset257）

總結 rem有兩種適配方案 做移動端 學得七七八八，記下來，記下來 一 查詢 1 作用 讓手機端，平板端和電腦端的網頁顯示出不同的css效果。主要是尺寸 大小 2 兩種語法 第一種 表示螢幕尺寸最大值為800px media screen and max width 800px p 表示螢幕尺寸為8...

彈性盒模型

1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...

彈性盒模型

1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...