flex布局属性
容器属性
flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content
元素属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
flex弹性盒模型
对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。
-
每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
-
每根轴都有起点和终点，这对于元素的对齐非常重要。
-
弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
-
弹性元素也可以通过
display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。弹性容器的两根轴非常重要，所有属性都是作用于轴上的。
flex-direction属性
取值：row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。
column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
height: 600px;
display: flex;
background-color: blueviolet;
/* 主轴方向发生改变 */
flex-direction: column-reverse;
}
.div1 div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1">
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
</div>
</body>
</html>沿主轴的排列处理
弹性元素永远沿主轴排列，那么如果主轴排不下，该如何处理？
通过设置flex-wrap属性可使得主轴上的元素不换行、换行、反向换行。
取值：nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行，nowrap表示不换行；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
height: 600px;
display: flex;
background-color: blueviolet;
/* 开启换行 */
flex-wrap: wrap;
}
.div1 div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1">
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
<div>元素4</div>
<div>元素5</div>
<div>元素6</div>
<div>元素7</div>
<div>元素8</div>
</div>
</body>
</html>justify-content属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
用于控制项目在主轴上的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
height: 600px;
display: flex;
background-color: blueviolet;
/* 元素沿主轴方向居中 */
justify-content: center;
}
.div1 div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1">
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
</div>
</body>
</html>align-items属性
取值：flex-start | flex-end | center | baseline | stretch(默认)
用于控制项目在交叉轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余均为50px。
1.flex-start会让项目在交叉轴紧贴容器顶部，flex-end与之相反
2.center使用最多，自然不会陌生，在交叉轴中心位置排列
3.baseline比较特殊，它让项目以第一行文字的基线为参照进行排列
注意：
常理来说justify-content与align-items默认分别处理项目主轴，交叉轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理交叉轴，align-items处理主轴。
想要使一个子元素垂直水平居中，只需要设置其父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
height: 600px;
display: flex;
background-color: blueviolet;
/* 水平垂直居中 */
align-items: center;
justify-content:center;
}
.div1 div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1">
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
</div>
</body>
</html>align-content
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用，需设置flex-wrap: wrap；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目均没有设置高度。
1.flex-start ，center，flex-end 与align-items属性表现一致
2.space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍
3.space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器
项目属性
介绍完容器属性，简单介绍下项目属性。容器属性是加在父容器上的，那么项目属性呢，就是写在项目/弹性元素上的，就好比容器属性给ul，项目属性给li差不多一个意思。
order
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
height: 600px;
display: flex;
background-color: blueviolet;
}
.div1 div {
width: 200px;
height: 200px;
background-color: aqua;
}
.od1 {
order: 2;
}
</style>
</head>
<body>
<div class="div1">
<div class="od1">元素1</div>
<div>元素2</div>
<div>元素3</div>
</div>
</body>
</html>flex-grow
取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会占满剩余所有空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
height: 600px;
display: flex;
background-color: blueviolet;
}
.div1 div {
width: 200px;
height: 200px;
background-color: aqua;
}
.od1 {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="div1">
<div class="od1" style="background-color: brown;">元素1</div>
<div>元素2</div>
<div>元素3</div>
</div>
</body>
</html>flex-shrink
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
width: 500px;
height: 600px;
display: flex;
background-color: blueviolet;
}
.div1 div {
width: 200px;
height: 200px;
}
.od1 {
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="div1">
<div class="od1" style="background-color: brown;">元素1</div>
<div style="background-color: aquamarine;">元素2</div>
<div style="background-color: cornflowerblue;">元素3</div>
</div>
</body>
</html>flex-basis
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
width: 500px;
height: 600px;
display: flex;
background-color: blueviolet;
}
.div1 div {
width: 200px;
height: 200px;
}
.od1 {
flex-basis: 300px;
}
</style>
</head>
<body>
<div class="div1">
<div class="od1" style="background-color: brown;">元素1</div>
<div style="background-color: aquamarine;">元素2</div>
<div style="background-color: cornflowerblue;">元素3</div>
</div>
</body>
</html>flex
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
还有最常用的flex:1 === flex: 1 1 0px
align-self
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
