彈性布局（伸縮布局）

彈性布局（伸縮布局）

僅僅是網頁布局中的一種新的解決方案。

應用場景：當頁面**現多個盒子一行顯示時，可以考慮使用彈性布局

如：兩端對齊，中間自適應居中，兩行屬性即可實現：

display: flex;

justify-content: space-between;

1.在彈性盒子中會有兩條軸（預設水平顯示的主軸 + 永遠都垂直於主軸的側軸）

2.在伸縮盒子中，所有子元素都是按照主軸方向排列的

注：a哪些盒子需要在一行顯示，就給其親爹設定為彈性盒子

b在伸縮盒子中，子元素一行顯示與脫標無關

彈性布局使用步驟：

1.給父元素設定為彈性盒子，通過屬性display: flex;

2.在父盒子中通過相關屬性調整位置

排列方向：flex-direction: row | column | row-reverse | column-reverse;

主軸對齊：justify-content: flex-start | flex-end | center | space-between | space-around;

單行沿側軸對齊：align-items: flex-start | flex-end | center | stretch(預設值，拉伸);

補：在彈性盒子中，子元素總寬度無論是否會超過父元素寬度，預設都不會換行。

屬性：flex-wrap: wrap | nowrap(預設不換行);

補：在彈性盒子中，元素換行後，會出現新的對齊方式。（多行沿側周對齊方式）

屬性：align-content: flex-start | flex-end | center | space-between | space-around | stretch(預設);

flex屬性：

作用：給子元素新增，使子元素在父盒子中等分。

例如下**：

.box 

.box1 
.box2 
.box3

則：父盒子總共被均分為6份，1號盒子佔乙份，2號盒子佔2份，3號盒子佔3份。

flex布局 彈性布局 伸縮布局

主要介紹下彈性布局的常用的一些屬性 當乙個盒子設定為display flex的時候,盒子會變為乙個彈性盒子,盒子內部的子元素會預設沿著主軸方向排布,此時會引出主軸和側軸的概念。主軸 預設水平向右 類似於x軸 側軸 與主軸垂直的就是側軸,預設垂直向下 類似於y軸 彈性盒子的主軸方向預設水平向右,但是可...

布局 Flex伸縮布局

flex是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器，簡稱 容器 它的所有子元素自動成為容器成員，成為flex專案，簡稱 專案 總結 通過給父盒子新增flex屬性，來控制子盒子的位...

flex布局（彈性布局）

flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...