↵
flex布局
引言
flex布局（弹性布局） CSS3知识点
在父元素和子类元素上都能设置属性
首先我们先写一个比较简单的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 500px;
height: 500px;
background-color: pink;
}
.b {
width: 100px;
height: 100px;
background-color: red;
}
.c {
width: 100px;
height: 100px;
background-color: blue;
}
.d {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="a">
<div class="b">1</div>
<div class="c">2</div>
<div class="d">3</div>
</div>
</body>
</html>效果如下，有三个方块在一个背景中，内容分别是1、2、3这三个数字
现在我们将最外层的容器的display属性设置成flex样式，我们可以看到这个三个方块水平排列开了
接下来我们设置一下这个水平方向的布局，flex-direction属性 row-reverse，这样就颠倒了
/* 列布局 */
flex-direction: column;
设置成row,没啥变化
/* 决定主轴的⽅向（即项⽬的排列⽅向）*/
flex-direction: row | row-reverse｜column-reverse; | column |
⽗元素容器的属性
要学习弹性布局之前，我们来看看简单的基础和这部分中能够使用到的属性。
/* 设为 Flex 布局以后，⼦元素的float、clear和vertical-align属性将失效。*/
display: flex;
/* 决定主轴的⽅向（即项⽬的排列⽅向）*/
flex-direction: row | row-reverse | column | column-reverse;
/* 是否换⾏ */
flex-wrap: nowrap | wrap | wrap-reverse;
/* 定义⽔平⽅向对⻬⽅式 */
justify-content: flex-start | flex-end | center | space-between | space-around;
/* 定义垂直⽅向对⻬⽅式 */
align-items: flex-start | flex-end | center | baseline | stretch;
/* 定义多个轴线（多⾏/多列）对⻬⽅式 */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
是否换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 500px;
/* height: 500px; */
background-color: pink;
display: flex;
/* 列布局 */
/* flex-direction: row-reverse; */
}
.b {
width: 100px;
height: 100px;
background-color: red;
}
.c {
width: 100px;
height: 100px;
background-color: blue;
}
.d {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="a">
<div class="b">1</div>
<div class="c">2</div>
<div class="d">3</div>
<div class="d">3</div>
<div class="d">3</div>
<div class="d">3</div>
<div class="d">3</div>
</div>
</body>
</html>当我们的父元素的宽度设置固定值之后， display: flex;display设置成flex之后，子元素会平分父类元素的宽度。 不论子元素是否设置了宽度。
现在每个元素的宽都是71.43
如果我们想要换行的话我们需要设置flew-wrap属性
定义⽔平⽅向对⻬⽅式
justify-content: 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">
<title>Document</title>
<style>
.a {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
justify-content: flex-start;
}
.b {
width: 100px;
height: 100px;
background-color: red;
}
.c {
width: 100px;
height: 100px;
background-color: blue;
}
.d {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="a">
<div class="b">1</div>
<div class="c">2</div>
<div class="d">3</div>
</div>
</body>
</html>结果和之前的效果一样
justify-content: flex-end
center
space-between
space-around
这里就将水平方向的对齐方式进行了整理，也将一些效果进行了展示，在开发的过程中如果有相应的需求就能够根据这些样式进行灵活的调整和使用了。
定义垂直⽅向对⻬⽅式
align-items: flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
/* justify-content: space-around;
*/
align-items: flex-start;
}
.b {
width: 100px;
height: 100px;
background-color: red;
}
.c {
width: 100px;
height: 100px;
background-color: blue;
}
.d {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="a">
<div class="b">1</div>
<div class="c">2</div>
<div class="d">3</div>
</div>
</body>
</html>align-items: flex-start;
align-items: flex-end;
center
baseline
<style>
.a {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
/* justify-content: space-around;
*/
/* align-items: center; */
align-items: baseline;
}
.b {
width: 100px;
height: 100px;
background-color: red;
}
.c {
width: 100px;
height: 100px;
background-color: blue;
line-height: 100px;
}
.d {
width: 100px;
height: 100px;
background-color: green;
line-height: 150px;
}
</style>要设置这种样式的话，我们就能根据他的文意看出这个效果，baseline就是基线都意思。肯定是以某一条线作为基准实现的。但是要想实现这个效果，需要设置一下行高，第二第三个都设置一下，我们可以发现这个排版相对来说比较特别，是以内容进行排便，以第一个元素1实现在同一水平线上的样式
下面看一下stretch的效果，我们可以看到只要没有设置自元素的高度都话，这里会将子元素都高度完全撑满整个父元素的大小。
<style>
.a {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
/* justify-content: space-around;
*/
/* align-items: center; */
align-items: stretch;
}
.b {
width: 100px;
/* height: 100px; */
background-color: red;
}
.c {
width: 100px;
/* height: 100px; */
background-color: blue;
/* line-height: 100px; */
}
.d {
width: 100px;
/* height: 100px; */
background-color: green;
/* line-height: 150px; */
}
</style>定义多个轴线的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
flex-wrap: wrap;
/* align-content: flex-start; */
}
.b {
width: 100px;
height: 100px;
background-color: red;
}
.c {
width: 100px;
height: 100px;
background-color: blue;
}
.d {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="a">
<div class="b">1</div>
<div class="c">2</div>
<div class="d">3</div>
<div class="b">1</div>
<div class="c">2</div>
<div class="d">3</div>
<div class="b">1</div>
<div class="c">2</div>
<div class="d">3</div>
</div>
</body>
</html>暂时构建一个多行多列的效果，如下，两行多列的
现在在这个父元素上设置一个align-content的属性。
align-content: flex-start;
现在这个效果很明显，第二行紧密排列到了第一行下面了。
align-content: flex-end，现在从下面从下面进行排练
⼦元素容器的属性
首先我们先总结一下这个子元素的容器属性拥有的全部属性。
/* 定义⼦元素的排列顺序，默认为0 */
order: -10 | -1 | 0 | 1 | 10;
/* 定义⼦元素的放⼤⽐例，默认为0 */
flex-grow: 0 | 1 | 2 | 3;
/* 定义⼦元素的缩⼩⽐例，默认为1 */
flex-shrink: 0 | 1;
/* 定义了在分配多余空间之前，项⽬占据的主轴空间 */
flex-basis: <length> | auto;
/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;
排列顺序
order: -10 | -1 | 0 | 1 | 10;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
}
.b {
width: 100px;
height: 100px;
background-color: red;
}
.c {
width: 100px;
height: 100px;
background-color: blue;
}
.d {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="a">
<div class="b">1</div>
<div class="c">2</div>
<div class="d">3</div>
</div>
</body>
</html>
从现在起，我们将其中的元素1的order的属性设置成1（默认是0），发现元素1就跑到最后面去了。数值越大越往后（右）
- 0 +
将3设置成10,我们发现3又跑到后面去了，这就说明值越大，距离中心的值越远
放大比例
/* 定义⼦元素的放⼤⽐例，默认为0 */
flex-grow: 0 | 1 | 2 | 3;
当只有一个设置了这个属性的话，就会占据整个的剩余空间。
这里说的是平分的（父元素剩余的部分）剩下的占据多少
一共500 剩余200 1-->150(50) 2 150(50) 3 200(100)
缩小比例
/* 定义⼦元素的缩⼩⽐例，默认为1 */
flex-shrink: 0 | 1;
1的值就是可以缩小，
例如现在将父元素的宽度设置成200px
现在我们将其中的一个设置成0，则这个不好缩小，将1设置成0
q其他的两个平凡100
分
项目占据的主轴空间
/* 定义了在分配多余空间之前，项⽬占据的主轴空间 */
flex-basis: <length> | auto;
/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;
兼容性
浏览器ie9及以上 选择float布局 or flex布局？
推荐是使⽤flex布局
- flex布局易⽤，布局全⾯ float的创建初衷只是为了达到⽂字环绕的效果，
- 另外需要清除浮动
- 现在⼏乎所有公司的产品使⽤场景都在浏览器ie9以上
扫一扫
1752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
