前言

更多參考MDN

flex布局

正文

1.Flexbox模型

主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為 main start 和 main end。

交叉軸（cross axis）是垂直於 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start 和 cross end。

設置了 display: flex 的父元素被稱之為 flex 容器（flex container）。

在 flex 容器中表現為柔性的盒子的元素被稱之為 flex 項（flex item）

示例

<section
 
>
    <article></article>
    <article></article>
     <article></article>
</section>

section{
 dispaly:flex;
}

section元素的子元素被等分排列

2.Flexbox的屬性

a.排列方式（flex-direction）

在父元素中設置

row（默認）按行排列

column 按列排列

row-reverse 按行反向排列

column-reverse 按列反向排列

b.換行（flex-wrap）

flex-wrap: wrap

（排列換行結合寫法flex-flow: row wrap;）

c.flex子元素尺寸

在子元素中設置

flex：200px 寬度至少200px

.div1{
flex:1 200px;
}
.div2{
flex:2 200px;
}

寬度至少200px，剩余按1比2分配

補充：

flex 是一個可以指定最多三個不同值的縮寫屬性：
第一個就是上面所討論過的無單位比例。可以單獨指定全寫 flex-grow 屬性的值。
第二個無單位比例 — flex-shrink — 一般用於溢出容器的 flex 項。這指定了從每個 flex 項中取出多少溢出量，以阻止它們溢出它們的容器。（設置每個子元素該為總溢出量分擔多少溢出量，初始值為1，平分溢出量）
第三個是上面討論的最小值。可以單獨指定全寫 flex-basis

d.排序

在子元素中設置order屬性

按order屬性值大小排序（可以設置負數）

e.水平和垂直對齊

justify-content屬性定義了項目在主軸上的對齊方式。

flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

align-items屬性定義項目在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸

百度前端學習日記07——布局（三）Flexbox