flex
1，flex布局又叫彈性布局蠢棱，一個(gè)元素為flex布局時(shí)笆凌，子元素的float、clear和vertical-align屬性沒(méi)有作用时甚。
列：以float為列
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 300px;
? ? height: 100px;
? ? background: #000;
}
.box_child{
? ? width: 50px;
? ? height: 50px;
? ? background: red;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child"></div>
? ? </div>
</body>
</html>
結(jié)果：
當(dāng)給box_child添加float: right;
結(jié)果box_child還在原來(lái)位置隘弊，并未移到box右邊。
2荒适，flex布局下的屬性：
2-1梨熙，flex-direction規(guī)定flex布局下的子元素怎么排列，可選值row 刀诬， row-reverse 咽扇，column ， column-reverse。
列：
如果是flex-direction：row质欲；
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 300px;
? ? height: 100px;
? ? background: #000;
? ? flex-direction: row
}
.box_child1{
? ? width: 50px;
? ? height: 50px;
? ? background: red;
}
.box_child2{
? ? width: 50px;
? ? height: 50px;
? ? background:#f2f22f;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child1"></div>
? ? ? ? <div class="box_child2"></div>
? ? </div>
</body>
</html>
結(jié)果：
如果是flex-direction：row-reverse树埠；
如果是flex-direction：column；
如果是flex-direction：column-reverse把敞；
2-2弥奸，flex-wrap定義如果一條軸線排不下，如何換行奋早，可選值 nowrap 盛霎， wrap ，wrap-reverse耽装，默認(rèn)是nowrap愤炸。
列：
如果是flex-wrap:nowrap;
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 250px;
? ? background: #000;
? ? padding: 20px;
? ? flex-direction: row;
? ? flex-wrap: nowrap;
}
.box_child{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child">1</div>
? ? ? ? <div class="box_child">2</div>
? ? ? ? <div class="box_child">3</div>
? ? ? ? <div class="box_child">4</div>
? ? ? ? <div class="box_child">5</div>
? ? ? ? <div class="box_child">6</div>
? ? </div>
</body>
</html>
結(jié)果：
box_child寬度變小，不換行掉奄。
如果是wrap：
box_child換行规个。
如果是wrap-reverse
box_child換行且從下往上排。
2-3姓建，justify-content定義了子元素在主軸上的對(duì)齊方式诞仓，可選值有 flex-start ， flex-end 速兔， center 墅拭，space-between ， space-around;
列：
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 250px;
? ? background: #000;
? ? padding: 20px;
? ? flex-direction: row;
? ? justify-content: flex-start;
}
.box_child{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child">1</div>
? ? ? ? <div class="box_child">2</div>
? ? ? ? <div class="box_child">3</div>
? ? </div>
</body>
</html>
結(jié)果：
child_box從開始位置對(duì)齊
如果是justify-content: flex-end;
child_box從結(jié)束位置對(duì)齊
如果是justify-content: center涣狗；
child_box居中排列谍婉。
如果是 justify-content: space-between；
child_box兩端對(duì)齊且主軸方向相隔距離相等
如果是justify-content: space-around镀钓；
每?jī)蓚€(gè)項(xiàng)目之間的間隔相等穗熬，上圖看不出來(lái)，我們將box寬度設(shè)為600px丁溅，結(jié)果
2-4唤蔗，align-items定義子元素在交叉軸上如何對(duì)齊，可選值flex-start 窟赏， flex-end措译，center ，baseline 饰序， stretch。
列：
如果是align-items：flex-start;
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 300px;
? ? background: #000;
? ? padding: 20px;
? ? flex-direction: row;
? ? justify-content: space-around;
? ? align-items: flex-start
}
.box_child1{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
}
.box_child2{
? ? width: 50px;
? ? height: 100px;
? ? border: 1px solid #ddd;
? ? background: red;
}
.box_child3{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
}
.box_child4{
? ? width: 50px;
? ? height: 150px;
? ? border: 1px solid #ddd;
? ? background: red;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child1">1</div>
? ? ? ? <div class="box_child2">2</div>
? ? ? ? <div class="box_child3">3</div>
? ? ? ? <div class="box_child4">4</div>
? ? </div>
</body>
</html>
結(jié)果：
可見(jiàn)child_box规哪，從起始位置左上角求豫，左往右排列，如果把上面的代碼box的 flex-direction: row;改為 flex-direction: row-reverse;結(jié)果：
child_box從右往左排列。
如果是box的 flex-direction: row;align-items: flex-end;
child_box從左往右排列且起始位置在左下角蝠嘉。
如果是box的align-items: center最疆；
從box的中部左往右排列，
另外
baseline定義子元素的第一行文字的基線對(duì)齊蚤告。
stretch定義如果子元素未設(shè)置高度或設(shè)為auto努酸，那么子元素的高度將占滿整個(gè)容器的高度。
2-5杜恰，align-content定義多根軸線的對(duì)齊方式获诈，如果項(xiàng)目只有一根軸線，該屬性無(wú)效心褐，可選flex-start舔涎， flex-end ， center 逗爹， space-between 亡嫌，space-around ，stretch;
flex-start：與交叉軸的起點(diǎn)對(duì)齊掘而。
flex-end：與交叉軸的終點(diǎn)對(duì)齊挟冠。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊袍睡，軸線之間的間隔平均分布知染。
space-around：每根軸線兩側(cè)的間隔都相等。所以女蜈，軸線之間的間隔比軸線與邊框的間隔大一倍持舆。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
3伪窖，如果定義了flex布局逸寓，那么它的子元素可選擇屬性有以下幾種。
order定義子元素的排列順序數(shù)值越小排列越靠前覆山。
列：
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 400px;
? ? background: #000;
? ? padding: 20px;
? ? flex-direction: row;
? ? justify-content: flex-start;
? ? align-items: flex-start;
}
.box_child1{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
? ? order: 1;
}
.box_child2{
? ? width: 50px;
? ? height: 100px;
? ? border: 1px solid #ddd;
? ? background: red;
? ? order: 0;
}
.box_child3{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
? ? order: 2;
}
.box_child4{
? ? width: 50px;
? ? height: 150px;
? ? border: 1px solid #ddd;
? ? background: red;
? ? order: 2;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child1">1</div>
? ? ? ? <div class="box_child2">2</div>
? ? ? ? <div class="box_child3">3</div>
? ? ? ? <div class="box_child4">4</div>
? ? </div>
</body>
</html>
結(jié)果：
flex-grow定義子元素的放大比例竹伸，將上面的元box_child1,box_child2,box_child3元素加上flex-grow:1,box_child4加上flex-grow:2;如果box有剩余空間那么box_child4占據(jù)的空間是其他的一倍
結(jié)果：
flex-shrink語(yǔ)flex-grow相反，是定義子元素縮小比例簇宽，如果box沒(méi)有剩余空間勋篓，那么定義縮小的元素就縮小。
flex-basis它定義了在分配多余空間之前魏割，子元素占據(jù)的主軸空間譬嚣，根據(jù)這個(gè)計(jì)算主軸是否有多余空間，默認(rèn)值為auto钞它，即項(xiàng)目的本來(lái)大小拜银。
我平常常用的flex殊鞭，其實(shí)是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫。
列：
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 400px;
? ? background: #000;
? ? padding: 20px;
? ? flex-direction: row;
? ? justify-content: flex-start;
? ? align-items: flex-start;
}
.box_child1{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
}
.box_child2{
? ? flex: 1;
? ? height: 100px;
? ? border: 1px solid #ddd;
? ? background: red;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child1">1</div>
? ? ? ? <div class="box_child2">2</div>
? ? </div>
</body>
</html>
結(jié)果：
所以flex:1就是寫了以下屬性
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
align-self定義子元素的對(duì)齊方式尼桶，如果跟父元素的方式一樣那么設(shè)置auto就行操灿，當(dāng)然如果不一樣可以選擇 flex-start， flex-end 泵督， center 趾盐， baseline ， stretch小腊。設(shè)置這個(gè)屬性的結(jié)果跟在flexbox中設(shè)置align-item的結(jié)果一樣救鲤。當(dāng)你想讓子元素不一樣時(shí)就可以選擇這個(gè)屬性。
列:
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 400px;
? ? background: #000;
? ? padding: 20px;
? ? flex-direction: row;
? ? justify-content: flex-start;
? ? align-items: flex-start;
}
.box_child1{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
}
.box_child2{
? ? width: 50px;
? ? height: 100px;
? ? border: 1px solid #ddd;
? ? background: red;
}
.box_child3{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
? ? align-self: flex-end
}
.box_child4{
? ? width: 50px;
? ? height: 150px;
? ? border: 1px solid #ddd;
? ? background: red;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child1">1</div>
? ? ? ? <div class="box_child2">2</div>
? ? ? ? <div class="box_child3">3</div>
? ? ? ? <div class="box_child4">4</div>
? ? </div>
</body>
</html>
結(jié)果：
相信大部分人面試的時(shí)候都遇到垂直水平居中的問(wèn)題溢豆，那么利用flex如何實(shí)現(xiàn),其實(shí)利用 justify-content: center;
? ? align-items: center;
列：
<!DOCTYPE html>
<html lang="en">
<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>測(cè)試flexbox</title>
</head>
<style>
.box{
? ? display: flex;
? ? width: 400px;
? ? height: 400px;
? ? background: #000;
? ? padding: 20px;
? ? flex-direction: row;
? ? justify-content: center;
? ? align-items: center;
}
.box_child1{
? ? width: 50px;
? ? height: 50px;
? ? border: 1px solid #ddd;
? ? background: red;
}
</style>
<body>
? ? <div class="box">
? ? ? ? <div class="box_child1">1</div>
? ? </div>
</body>
</html>
結(jié)果：
flex布局之前我也覺(jué)得復(fù)雜蜒简，項(xiàng)目中用得少，當(dāng)用得多了漩仙，flex布局就越來(lái)越熟練搓茬，但是仍有不足，因此寫這篇文章队他，意在復(fù)習(xí)和鞏固flex布局的知識(shí)卷仑。
