css3彈性盒模型flex知識

來源：懂視網責編：小采時間：2020-11-27 20:12:07

css3彈性盒模型flex知識

css3彈性盒模型flex知識:一、什么是flexflex是css3中引入的一種布局方式，可以非常靈活高效控制元素的排列與對齊方式，大多數人稱之為彈性布局.二、怎么使用flex任何一個容器都可以指定為flex布局1 #box { 2 display:flex; 3 }三、flex的基本術語采用flex布局的元素被稱為

推薦度：

點擊下載本文 文檔為doc格式

導讀css3彈性盒模型flex知識:一、什么是flexflex是css3中引入的一種布局方式，可以非常靈活高效控制元素的排列與對齊方式，大多數人稱之為彈性布局.二、怎么使用flex任何一個容器都可以指定為flex布局1 #box { 2 display:flex; 3 }三、flex的基本術語采用flex布局的元素被稱為

一、什么是flex?

flex是css3中引入的一種布局方式，可以非常靈活高效控制元素的排列與對齊方式，大多數人稱之為彈性布局.

二、怎么使用flex?

任何一個容器都可以指定為flex布局

1 #box {
2 display:flex;
3 }

三、flex的基本術語

采用flex布局的元素被稱為flex容器 (flex container), 它的子元素即為flex元素 (flex item).

flex容器中包含兩個相互垂直的軸, 即主軸 (main axis)和副軸 (cross axis).

flex元素沿主軸從主軸起點 (main start)到主軸終點 (main end)依次排布.

如果flex容器包含多行flex元素, 則flex行 (flex lines)沿副軸從副軸起點 (cross start)到副軸終點 (cross end)依次排布.

單個flex元素占據的主軸空間叫做主軸長度 (main size), 占據的副軸空間叫做副軸長度 (cross size).

四、有六個屬性設置在父容器上，來控制子元素的顯示方式:

屬性	含義
`flex-direction`	主軸方向
`flex-wrap`	換行樣式
`flex-flow`	前兩個的簡寫形式
`justify-content`	主軸對齊方式
`align-items`	單行的副軸對齊方式
`align-content`	多行的副軸對齊方式

五、flex-direction，設置主軸的對齊方向，有四個值:

row（默認值）：主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>flex布局 - by ghostwu</title>
 <style>
 #box {
 display: flex;
 flex-direction: row;
 }
 #box p {
 width: 100px;
 height: 100px;
 background: #09f;
 margin: 10px;
 }
 </style>
</head>

<body>
 <p id="box">
 <p>1</p>
 <p>2</p>
 <p>3</p>
 <p>4</p>
 <p>5</p>
 <p>6</p>
 <p>7</p>
 <p>8</p>
 <p>9</p>
 <p>10</p>
 <p>11</p>
 <p>12</p>
 <p>13</p>
 <p>14</p>
 </p>
</body>

</html>

flex-direction設置為row：

flex-direction設置為row-reverse

flex-direction設置為column，下面的示意圖我只截取了前面5個p,后面如果截取的話，圖片占的位置太多了，影響體驗.

flex-direction設置為column-reverse:

六、flex-wrap ：定義子元素超過一行，如何換行，常用屬性值:

nowrap（默認值）：默認不換行。

wrap：換行，第二行在第一行下面，從左到右

wrap-reverse：換行，第二行在第一行上面，從左到右

1 #box {
2 display: flex;
3 flex-direction: row;
4 flex-wrap: nowrap;
5 }

flex-wrap:nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

七、flex-flow:是flex-direction 和flex-wrap的簡寫形式，默認是 row nowrap

#box {
 display:flex;
 /* flex-flow: row nowrap; */
 /* flex-flow: row wrap; */
 /* flex-flow: row wrap-reverse; */
 /* flex-flow: row-reverse wrap-reverse; */
 flex-flow: column wrap;
}

八、 justify-content: 子元素在主軸對齊方式

flex-start（默認值）：左對齊

flex-end：右對齊

center：居中

space-between：兩端對齊，項目之間的間隔都相等。

space-around：每個項目兩側的間隔相等。

#box {
 display:flex;
 flex-flow: row wrap;
 /* justify-content: flex-start; */
 /* justify-content: flex-end; */
 /* justify-content: center; */
 /* justify-content: space-between; */
 justify-content: space-around;
}

這里主要搞清楚space-between和space-around的區別

justify-content: space-between;