—彈性佈局的基本使用—
今天我們將來認識一下彈性佈局的基本使用方法。
首先我們簡單的認識一下彈性佈局：
display：flex；
flex-direction：__；（空白處添加屬性）
彈性佈局的使用需要由父元素和其子元素同時組成——
容器的屬性（父元素）
首先寫四個盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrapper{
width: 200px;
height:200px;
background-color: pink;
}
#content{
width:50px;
height:50px;
background-color: black;
color: white;
}
#content1{
width: 50px;
height:50px;
background-color: red;
}
#content2{
width:50px;
height:50px;
background-color: white;
}
#content3{
width:50px;
height:50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">c</div>
<div id="content1">1</div>
<div id="content2">2</div>
<div id="content3">3</div>
</div>
</body>
</html>
由於< div >的塊狀元素特性c 1 2 3現在都各自獨佔一行。
那麼我們就可以使用彈性佈局（flex佈局）進行修改它的佈局方式
我們需要對其父元素使用——
display：flex；
flex-direction：；那麼第二條代碼中就根據自己的需求來相應設置
row （默認值 ）在水平方向顯示；
row-reverse 在水平方向顯示 起點在左端；
column 在垂直方向顯示 上方爲起點；
column 在垂直方向顯示 下方爲起點；
接下來讓我們看看效果——
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrapper{
width: 200px;
height:200px;
background-color: pink;
display: flex;
flex-direction:row; /* 設置方向*/
}
#content{
width:50px;
height:50px;
background-color: black;
color: white;
}
#content1{
width: 50px;
height:50px;
background-color: red;
}
#content2{
width:50px;
height:50px;
background-color: white;
}
#content3{
width:50px;
height:50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">c</div>
<div id="content1">1</div>
<div id="content2">2</div>
<div id="content3">3</div>
</div>
</body>
</html>
此時c 1 2 3 四塊區域已經展現出從左至右的排列方式，我們再來對比一下其他的屬性——
<style type="text/css">
#wrapper{
width: 200px;
height:200px;
background-color: pink;
display: flex;
flex-direction:row-reverse;/* 設置方向*/
顯然c 1 2 3四個區域的順序已經變爲從右至左，那麼column以及column-reverse 大家可以自己下去嘗試一下增加下印象。
那麼我們繼續瞭解其他屬性——
nowrap（默認）不換行 給定寬度不夠時會將各區塊同等擠壓；
wrap 換行 第一行在最上方；
wrap-reverse 換行 第一行在最下方；
一：
#wrapper{
width: 200px;
height:200px;
background-color: pink;
display: flex;
flex-direction:row;/* 設置方向*/
flex-wrap:nowrap; /*換行設置*/
}
#content{
width:50px;
height:50px;
background-color: black;
color: white;
}
#content1{
width: 50px;
height:50px;
background-color: red;
}
#content2{
width:50px;
height:50px;
background-color: white;
}
#content3{
width:50px;
height:50px;
background-color: #ccc;
}
#content4{
width:50px;
height:50px;
background-color: #8B008B;
}
每個小塊都設置爲50x50的小正方形，粉色的大塊爲200x200的大正方形 爲了在同一行將所有元素放下，每個小塊的寬都被壓縮了10px。
二：
#wrapper{
width: 200px;
height:200px;
background-color: pink;
display: flex;
flex-direction:row;/* 設置方向*/
flex-wrap:wrap; /*換行設置*/
}
三：
#wrapper{
width: 200px;
height:200px;
background-color: pink;
display: flex;
flex-direction:row;/* 設置方向*/
flex-wrap:wrap-reverse; /*換行設置*/
}
另外 flex-flow，是flex-direction和flex-warp的簡寫形式默認值是：row nowarp；
2——justify-content
justify-content屬性定義了項目在主軸上的對齊方式。
共有五個屬性：
1-flex-start（默認值）：左對齊
2-flex-end：右對齊
3-center：居中
4-space-between:兩端對齊，項目之間的間隔都相等
5-space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
flex-start
#wrapper{
width: 200px;
height:200px;
background-color: pink;
display: flex;
justify-content:flex-start;
}
注意我們此時已經更改代碼；
flex-end
#wrapper{
width: 200px;
height:200px;
margin:0 auto;
background-color: pink;
display: flex;
justify-content:flex-end;
顯然三個盒子已經由左對齊變爲右對齊，那麼接下來請各位小夥伴自己嘗試一下其他屬性。
align-items屬性定義項目在交叉軸上如何對齊
1——flex-start（交叉軸的起點對齊）
2——flex-end（交叉軸的終點對齊）
3——center（交叉軸的中點對齊）
4——stretch（項目的第一行文字的基線對齊。）
5——baseline（（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度）
以上就是容器的屬性，後續我們再學習項目的屬性。
謝謝大家——Miziguo >_< !!!