快速回顾起来flex布局基本使用
一.Flex布局的基本概念
Flex布局的所有子元素自动成为容器的成员，称为Flex项目(item)。
容器存在两根轴:水平主轴(main axis)和垂直的交叉轴(cross axis)。如下图所示。
二.容器的属性(就是父元素的)
有六个属性设置在容器上
flex-direction属性决定主轴的方向(也就是项目的排列方向)
| row(默认值) | 主轴为水平方向 | 起点在左端 |
|---|---|---|
| row-reverse | 主轴为水平方向 | 起点在右端 |
| column | 主轴为垂直方向 | 起点在上沿 |
| column-reverse | 主轴为垂直方向 | 起点在下沿 |
1.1 下面通过row和row-reverse进行举例，其它两个类似
- 没有使用弹性布局的代码如下
<!DOCTYPE html>
<html>
<head>
<body>
<div class="box1">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
</body>
</html>
运行结果如下
-
使用弹性布局，代码如下。相对于上面就添加下面的两行代码。结果和上面是一样的。
display: flex; flex-direction:row；.box1{ width: 400px; height: 400px; border: 1px solid red; margin: 20px auto; display: flex; flex-direction: row; }
当使用flex-direction的属性为row-reverse时的代码如下图所示。
2.flex-wrap属性
默认情况下，项目都排在一条线上(又称为"轴线")上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
它可以取三个值
分别为nowrap warp wrap-reverse
- nowrap (默认，不换行)
- wrap
- wrap-reverse:换行，第一行在下方
3.flex-flow(初学阶段不常用)
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4.justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
共有下面的几种形式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
-
flex-start
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-wrap的属性</title> <style type="text/css"> .box1{ width: 400px; height: 400px; border: 1px solid red; margin: 20px auto; display: flex; justify-content: flex-start; } .son1,.son2,.son3{ width: 100px; height: 80px; margin-left: 5px; background-color: red; border: 2px solid blue; } </style> </head> <body> <div class="box1"> <div class="son1">son1</div> <div class="son2">son2</div> <div class="son3">son3</div> </div> </body> </html>
-
justify-end(右对齐)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-wrap的属性</title> <style type="text/css"> .box1{ width: 400px; height: 400px; border: 1px solid red; margin: 20px auto; display: flex; justify-content: flex-end; } .son1,.son2,.son3{ width: 100px; height: 80px; margin-left: 5px; background-color: red; border: 2px solid blue; } </style> </head> <body> <div class="box1"> <div class="son1">son1</div> <div class="son2">son2</div> <div class=son3">son3</div> </div> </body> </html> f'g运行结果如下
-
center(居中)
-
space-between(两端对齐，项目之间的间隔都相等)
-
space-around(每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。)
5 align-items属性
属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- flex-start(从上面开始的，上面对齐)
子元素的高度设置的不一样，这样更利于观察现象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-wrap的属性</title>
<style type="text/css">
.box1{
width: 600px;
height: 400px;
border: 1px solid red;
margin: 20px auto;
display: flex;
align-items: flex-start;
}
.son1,.son2,.son3{
margin-left: 5px;
background-color: red;
border: 2px solid blue;
}
.son1{
width: 100px;
height: 200px;
}
.son2{
width: 100px;
height: 300px;
}
.son3{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
</body>
</html>
2. flex-end
相对于上面就换了下面的这行代码
align-items: flex-end;
-
center
align-items: center;
-
baseline(不常用)
子元素没有文字的话就和上一个没有区别，有文字的话就如下面的情况
5.stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
这一个不常用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-wrap的属性</title>
<style type="text/css">
.box1{
width: 600px;
height: 300px;
border: 1px solid red;
margin: 20px auto;
display: flex;
align-items: stretch;
}
.son1,.son2,.son3{
margin-left: 5px;
background-color: red;
border: 2px solid blue;
}
.son1{
width: 100px;
}
.son2{
width: 100px;
}
.son3{
width: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
</body>
</html>
6 align-content属性(这个目前用不到，用的到时候再说)
三.项目的属性(也就是放在容器中的元素的属性)
以下6个属性设置在项目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1.order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;用于写数字
}
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-direction的属性</title>
<style type="text/css">
.box1{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 20px auto;
display: flex;
}
.son1,.son2,.son3{
width: 100px;
}
.son1{
height: 100px;
border: 2px solid green;
background-color: red;
order: 2;
}
.son2{
height: 200px;
border: 2px solid blue;
background-color: lightsalmon;
order: 1;
}
.son3{
height: 200px;
border: 2px solid burlywood;
background-color: #008000;
order: 3;
}
</style>
</head>
<body>
<div class="box1">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
</body>
</html>
运行结果，三个子元素分别写的是2，1，3。然后它们的结果如下。
2.flex-grow属性（目前也没有发现这个属性的作用是什么）
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
我写的代码好像也体会不到他具体的应用场景是什么，以后由应用场景的时候再说吧。
.item {
flex-grow: <number>; /* default 0 */
}
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-direction的属性</title>
<style type="text/css">
.box1{
width:1600px;
height: 400px;
border: 1px solid red;
margin: 20px auto;
display: flex;
}
.son1,.son2,.son3{
width: 100px;
}
.son1{
height: 100px;
border: 2px solid green;
background-color: red;
flex-grow: 1;
}
.son2{
height: 100px;
border: 2px solid blue;
background-color: lightsalmon;
flex-grow: 0;
}
.son3{
height: 100px;
border: 2px solid burlywood;
background-color: #008000;
flex-grow: 2;
}
</style>
</head>
<body>
<div class="box1">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
</body>
</html>
- flex属性(目前也没有发现有需要用的地方，以后要用的时候再说)
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 - align-self属性(目前也没有怎么用过，到时候有用到的场景再说吧)
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
总结:以上就是flex布局的基本知识，内容比较全面。有一些没有详细介绍的是因为到目前为止还没有一些具体的应用场景，等遇到具体的应用场景的时候再补充。
知道:该博客主要是以 阮一峰的博客为模板展开的
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
