—彈性布局的基本使用—
今天我們將來認識一下彈性布局的基本使用方法，
首先我們簡單的認識一下彈性布局：
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 >_< !!!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/241397.html
標籤：區塊鏈
上一篇：資料處理器的執行和集成機制：從applyProcessingFunctional說起
下一篇：Go使用Redis做快取