本文详细介绍了Flex布局的基础概念、容器属性及项目属性。包括如何通过设置display属性为flex使父容器具备弹性布局特性，以及如何利用flex-direction、flex-wrap等属性控制子元素的排列方式和换行行为。
flex布局
我们知道要想让块儿级元素按照从左到右的顺序排列，通常会设置元素的float，而设置float是会元素脱离文档流结构，从而改变父级元素的高度，并且还要考虑左右的清除浮动的影响。
针对块儿级元素的排列方式，所以我们引入了flex布局，flex布局是给父级容器设置display属性为flex,让父级容器具备flex属性，然后来控制容器中的子容器的排列顺序
flex布局分为容器属性和项目属性，容器属性指的是在父级容器中写入的css样式属性，项目属性则是给容器内部子容器的写的css样式属性。
容器属性
- flex-direction : row(默认) | row-reverse | column | column-reverse
row表示的是将父容器中的子容器按行显示，也是display:flex的默认设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style type="text/css">
.container
{
width: 200px;
height: 200px;
background-color: #7FFFD4;
display: flex;
flex-direction: row;
}
.list
{
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.list:nth-child(1)
{
background-color: #0000FF;
}
.list:nth-child(2)
{
background-color: #A52A2A;
}
.list:nth-child(3)
{
background-color: #FAEBD7;
}
</style>
</head>
<body>
<div class="container">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
</div>
</body>
</html>
flex-direction:row
效果：
row-reverse:表示的是横向排列，但是顺序是倒序的，3-2-1
flex-direction:row-reverse
效果：
column:表示的是子项目按列的形式排列 1-2-3
flex-direction:column
效果：
column-reverse:表示的是按列排序，顺序倒序3-2-1
flex-direction:column-reverse
效果：
- flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap：用来控制项目列表是否换行，默认是nowrap不换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: #7FFFD4;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.list {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.list:nth-child(1) {
background-color: #0000FF;
}
.list:nth-child(2) {
background-color: #A52A2A;
}
.list:nth-child(3) {
background-color: #FAEBD7;
}
.list:nth-child(4) {
background-color: blueviolet;
}
.list:nth-child(5) {
background-color: brown;
}
.list:nth-child(6) {
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="container">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div>
<div class="list">5</div>
<div class="list">6</div>
</div>
</body>
</html>
nowrap:不换行，列表会拍成一排，不换行
flex-wrap:nowrap
效果：
flex-wrap:wrap 表示换行，当列表拍成一排时超出父容器的宽度的其他元素另换一行。
flex-wrap:wrap
效果：
flex-wrap:wrap-reverse 第一行会布置在底部。
flex-wrap:wrap-reverse
效果：
- flex-flow:是这个flex-direction和flex-wrap的结合简写方式，默认是 row nowrap.
flex-flow:row no-wrap 表示横向排列切不换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: #7FFFD4;
display: flex;
flex-flow:row wrap;
}
.list {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.list:nth-child(1) {
background-color: #0000FF;
}
.list:nth-child(2) {
background-color: #A52A2A;
}
.list:nth-child(3) {
background-color: #FAEBD7;
}
</style>
</head>
<body>
<div class="container">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
</div>
</body>
</html>
flex-flow:row wrap这种写法同，flex-direction:row；flex-wrap:wrap;结合
效果
- justify-content :flex-start | flex-end | center | space-between |space-around| space-evenly
用于控制项目在横轴的对齐方式，默认是flex-start为左对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: #7FFFD4;
display: flex;
justify-content: flex-start;
}
.list {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.list:nth-child(1) {
background-color: #0000FF;
}
.list:nth-child(2) {
background-color: #A52A2A;
}
.list:nth-child(3) {
background-color: #FAEBD7;
}
.list:nth-child(4) {
background-color: blueviolet;
}
.list:nth-child(5) {
background-color: brown;
}
.list:nth-child(6) {
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="container">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div>
<div class="list">5</div>
<div class="list">6</div>
</div>
</body>
</html>
justify-content:flex-start 左对齐
效果：
justify-content:flex-end 右对齐
justify-content:center表示居中显示
效果：
justify-content:space-between表示的是左右两端对齐，左右没有间隙，项目列表之间的距离相等
效果：
space-around是项目之间距离为左右两侧的两倍
justify-content:space-around;
justify-content:space-evently 项目与与项目以及项目于容器之间的间距相同。
justify-content:space-evently
效果：
- align-items : flex-start | flex-end | center | baseline | stretch
用于控制项目在纵轴排列方式，默认是stretch，如果项目没有设置高度，或者高度为auto,则占满整个容器。下面的项目高度设置为auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: #7FFFD4;
display: flex;
align-items: stretch;
}
.list {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.list:nth-child(1) {
background-color: #0000FF;
height: auto;
}
.list:nth-child(2) {
background-color: #A52A2A;
height: auto;
}
.list:nth-child(3) {
background-color: #FAEBD7;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
</div>
</body>
</html>
align-items:stretch
效果：
align-items:flex-start 纵轴方向上是左对齐
align-items:flex-end是纵轴方向上是右对齐，则将在左下角排列
效果：
align-items;center表示在纵轴方向是居中显示.
align-items:basline按照列表项中的第一个文字为基准排列
- align-content : flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
align-content用来控制多行项目，如果只有一行不会起作用。
效果与align-items类似。
项目属性
上面介绍完容器属性了，下面介绍的是项目属性，容器属性是加在容器中的，那项目属性就是加在项目列表中的.
1.order
取值：默认是0，用于决定项目排列顺序，数值越小，项目排列越靠前。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: #7FFFD4;
display: flex;
align-items:baseline;
}
.list {
width: 50px;
text-align: center;
height: 50px;
line-height: 50px;
}
.list:nth-child(1) {
background-color: #0000FF;
height: auto;
order: 5;
}
.list:nth-child(2) {
background-color: #A52A2A;
order: 1;
}
.list:nth-child(3) {
background-color: #FAEBD7;
order: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
</div>
</body>
</html>
分别给项目加上order属性并设置不同的值，第一个赋上5，第二个赋上1，第三个赋上2，那么按照越小越大排列顺序就是 2 - 3 - 1
2.flex-grow
取值：默认是0，用于决定项目剩余空间情况下是是否放大，默认是不放大，注意：即使设置了固定宽度，也不会放大。
分别给三个项目的flex-group设置0,1,2,看一下效果
3.flex-shrink
取值：默认1，用于决定项目在空间不足（父级容器太小时）时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小（flex-shrink:1）才会一起缩小；注意：即使设置了固定宽度，也会缩小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 50px;
height: 50px;
background-color: #7FFFD4;
display: flex;
align-items:baseline;
}
.list {
width: 50px;
text-align: center;
height: 50px;
line-height: 50px;
}
.list:nth-child(1) {
background-color: #0000FF;
height: auto;
flex-shrink: 1;
}
.list:nth-child(2) {
background-color: #A52A2A;
flex-shrink: 1;
}
.list:nth-child(3) {
background-color: #FAEBD7;
flex-shrink: 1;
</style>
</head>
<body>
<div class="container">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
</div>
</body>
</html>
上面我给父级容器设置的宽度为50px，项目列表的flex-shrink都是设置的是1，看一下效果：
如果其中改变其中一项flex-shrink的值就会发生另一种变化，设置为0不会根据父级元素的缩小发生变化。
效果：
- flex-basis
取值：默认是auto,用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性。
flex-basis:auto;
width:60px;
.list:nth-child(1) {
background-color: #0000FF;
flex-basis: auto;
width: 60px;
height: auto;
}
效果：
如果设置成这样的形式：
flex-basis:80px;
width:60px；
由于flex-basis要比width的权重高会使用flex-basis的宽度
.list:nth-child(1) {
background-color: #0000FF;
flex-basis: 80px;
width: 60px;
height: auto;
}
效果：
- flex
取值：默认0 1 auto 是flex-grow ,flex-shrink 与 flex-basis的三个简写，用于项目放大，缩小，与宽度。
该属性有两个快捷值，分别是auto (1 1 auto) 等分放大缩小，与none(0,0，auto)不放大不缩小。
-align-self
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
扫一扫
1551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
