Float和Flex布局

发表于 2025-9-29 22:30:42

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

Flex布局

01-标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，比方：块元素独占一行，行内元素可以一行表现多个。

02-浮动Float(相识)

根本利用

浮动就是让元素脱离标准流，简称脱标
作用：让块元素水中分列。
属性名：float
属性值

left：左对齐
right：右对齐

浮动利用left：左对齐 .one和.two全部脱标

<style>
/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
.one {
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
</style>
<div class="one">one</div>
<div class="two">two</div>

复制代码

浮动利用right：右对齐 .one和.two全部脱标

<style>
/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
.one {
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: orange;
float: right;
}
</style>
<div class="one">one</div>
<div class="two">two</div>

复制代码

**脱标 ** 下图.one浮动，不在占用标准流的位置(像油飘在水上一样)，这就是脱标了。.two没有利用浮动，即没有脱标，以是左上角开始标准流排布。

<style>
/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
.one {
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
<div class="one">one</div>
<div class="two">two</div>

复制代码

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

脱标的特点

<!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>
*{
margin: 0;
padding: 0;
}
.father{
margin: 100px auto;
height: 300px;
width: 300px;
background-color: pink;
}
.son1{
height: 100px;
width: 300px;
background-color: skyblue;
}
.son2{
/* float: left; */
height: 100px;
font-weight: 700;
font-size: 20px;
color: red;
}
.son3{
background-color: #efefef;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">我是第一个</div>
<span class="son2">我是第二个</span>
<div class="son3">我是第三个</div>
</div>
</body>
</html>

复制代码

参加浮动后的特点
1.相对于现在的位置浮动，不占位 (绝对定位会用这个特点)
2.图文混排(笔墨在图片四周)

.son2{
/* 将浮动注释取消 */
float: left;
height: 100px;
font-weight: 700;
font-size: 20px;
color: red;
}

复制代码

产物地区布局

HTML标签

<div class="product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

复制代码

CSS样式

<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.product {
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: pink;
}
.left {
float: left;
width: 234px;
height: 628px;
background-color: skyblue;
}
.right {
float: right;
width: 978px;
height: 628px;
background-color: brown;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: orange;
}
/* 第四个li和第八个li 去掉右侧的margin */
.right li:nth-child(4n) {
margin-right: 0;
}
/* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
</style>

复制代码

扫除浮动

场景：浮动元素会脱标，假如父级没有高度，子级无法撑开父级高度（大概导致页面布局庞杂）
办理方法：扫除浮动（扫除浮动带来的影响）
场景搭建

<style>
.father {
margin: 10px auto;
width: 1200px;
/* 这个父级盒子.father高度取消那么子元素 .left .right盒子无法撑起这个父盒子 */
/* height: 300px; */
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right {
float: right;
width: 950px;
height: 300px;
background-color: orange;
}
.bottom {
height: 100px;
background-color: brown;
}
</style>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>

复制代码

当.father的高度取消掉如下图。通过查抄元素发现不存在高度，阐明白实浮动的盒子没有撑起父盒子，父盒子.father "脱标’'了

扫除浮动(办理上面脱标)的方法

额外标签法
单伪元素法
双伪元素法
overfow法

法一：额外标签法

在父元素内容的末了添加一个块级元素，设置 CSS 属性 clear: both

<!DOCTYPE html>
<html lang="en">
<head>
<title>css-day06-练习</title>
<style>
.father {
margin: 10px auto;
width: 1200px;
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right {
float: right;
width: 950px;
height: 300px;
background-color: orange;
}
.bottom {
height: 100px;
background-color: brown;
}
/* 这里 */
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>

复制代码

法二：单伪元素法

利用伪元素，相当于方法一在父元素内容的末了添加一个块级元素注意content: “”;必须有

准备 after 伪元素
1. .clearfix::after {
2. content: "";
3. display: block;
4. clear: both;
5. }
复制代码
父级利用 clearfix 类
1. <div class="father clearfix"></div>
复制代码
整合一下
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>css-day06-练习</title>
7. <style>
8. .father {
9. margin: 10px auto;
10. width: 1200px;
11. background-color: pink;
12. }
14. .left {
15. float: left;
16. width: 200px;
17. height: 300px;
18. background-color: skyblue;
19. }
21. .right {
22. float: right;
23. width: 950px;
24. height: 300px;
25. background-color: orange;
26. }
28. .bottom {
29. height: 100px;
30. background-color: brown;
31. }
32. /* 放在这里，谁用给谁就行 */
33. .clearfix::after {
34. content: "";
35. display: block;
36. clear: both;
37. }
39. </style>
40. </head>
41. <body>
42. 
43. <div class="father clearfix">
44. <div class="left"></div>
45. <div class="right"></div>
46. </div>
47. <div class="bottom"></div>
49. </body>
50. </html>
复制代码

法三：双伪元素法(保举)

准备 after 和 before 伪元素
1. /* before 解决外边距塌陷问题 */
2. /* 双伪元素法 */
3. .clearfix::before,
4. .clearfix::after {
5. content: "";
6. display: table;
7. }
9. /* after 清除浮动 */
10. .clearfix::after {
11. clear: both;
12. }
复制代码
父级利用 clearfix 类
1. <div class="father clearfix"></div>
复制代码
归并
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>css-day06-练习</title>
7. <style>
8. .father {
9. margin: 10px auto;
10. width: 1200px;
11. background-color: pink;
12. }
14. .left {
15. float: left;
16. width: 200px;
17. height: 300px;
18. background-color: skyblue;
19. }
21. .right {
22. float: right;
23. width: 950px;
24. height: 300px;
25. background-color: orange;
26. }
28. .bottom {
29. height: 100px;
30. background-color: brown;
31. }
33. /* before 解决外边距塌陷问题 */
34. /* 双伪元素法 */
35. .clearfix::before,
36. .clearfix::after {
37. content: "";
38. display: table;
39. }
41. /* after 清除浮动 */
42. .clearfix::after {
43. clear: both;
44. }
46. </style>
47. </head>
48. <body>
49. 
50. <div class="father clearfix">
51. <div class="left"></div>
52. <div class="right"></div>
53. </div>
54. <div class="bottom"></div>
56. </body>
57. </html>
复制代码

法四：overfow法

.father {
margin: 10px auto;
width: 1200px;
background-color: pink;
/* 浮动问题是父级无法被子级撑开
使用overflow: hidden 属性浏览器就会检查父级范围*/
overflow: hidden;
}

复制代码

浮动总结

浮动本质是用于图文混排，给图片加浮动，笔墨会在旁边表现。其时是由于没有更好的技能。以是盒子浮动布局很繁琐，以是就引出了接下来要学的Flex布局
03-Flex布局

由上一节的浮动总结可知为什么浮动被镌汰了。但是我们为什么要学Float布局呢，这是由于浮动为css的定位学习做准备。
Flex 布局也叫弹性布局，是欣赏器提倡的布局模子，非常恰当布局化布局，提供了强大的空间分布和对齐本领。
Flex 模子不会产生浮动布局中脱标征象，布局网页更简朴、更机动。
float与Flex对比

利用float ：会脱标而且不好控制间距

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* height: 300px; */
border: 1px solid #000;
}
.box div{
float: left;
/*控制间距*/
margin: 50px;
width: 200px;
height: 100px;
background-color: pink;
}
.bottom{
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<div class="bottom"></div>
</body>
</html>

复制代码

利用flex ：不脱标而且好控制间距

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* height: 300px; */
/* 使用flex布局 */
display: flex;
justify-content: space-between;
border: 1px solid #000;
}
.box div{
/* float: left;
margin: 50px; */
width: 200px;
height: 100px;
background-color: pink;
}
.bottom{
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<div class="bottom"></div>
</body>
</html>

复制代码

Flex构成

设置方式：给父元素设置 display: flex(df即可输出)，子元素可以主动挤压或拉伸
纵然子盒子设置了宽度。当元素过多也会被挤压(以是说是弹性盒子)，反面会学不被积存的属性

当子盒子不设置高度，子元素可以主动拉伸

构成部门：

弹性容器(父盒子)
弹性盒子(子盒子)
主轴：默认在水平方向。弹性盒子(子盒子)沿着主轴方向分列
侧轴 / 交织轴：默认在垂直方向

相干属性名

形貌属性创建flex容器display:flex主轴对齐方式justify-content侧轴对齐方式align-items某个弹性盒子侧轴对齐方式align-self修改主轴方向flex-direction弹性伸缩比flex弹性盒子换行flex-wrap行对齐方式(行与行之间)当flex-wrap：wrap见效align-content 具体内容请看图解CSS3弹性盒子属性_css弹性盒子图文-CSDN博客
创建flex容器 display

属性值阐明flex块级的弹性盒子inline-flex行级的弹性盒子-webkit-flex苹果和谷歌的兼容性主轴对齐方式 justify-content(弹性容器)

属性名：justify-content
属性值效果flex-start默认值, 弹性盒子从出发点开始依次分列flex-end弹性盒子从止境开始依次分列center弹性盒子沿主轴居中分列space-between弹性盒子沿主轴匀称分列，空缺间距匀称分在弹性盒子之间, 两侧盒子贴着双方space-around弹性盒子沿主轴匀称分列，空缺间距匀称分在弹性盒子两侧，两侧盒子与双方有间隔space-evenly弹性盒子沿主轴匀称分列，弹性盒子与容器之间间距相称

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
display: flex;
justify-content: flex-start;
height: 300px;
border: 1px solid #000;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

复制代码

根据以上代码变更justify-content:的值举行展示

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between; 父级剩余的尺寸分配间距，间距相称。
justify-content: space-around; 间距出现在弹性盒子两侧，弹性盒子之间的间距是两侧间距的二倍。
space-evenly; evenly是匀称地意思，弹性盒子之间的间距 == 两侧间距。

侧轴对齐方式 align-items(弹性容器)和align-self(弹性盒子)

align-items父盒子

align-items：当前弹性容器内全部弹性盒子的侧轴对齐方式（给弹性容器设置，即给父盒子设置属性）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置，即给子盒子设置属性）

属性值效果stretch弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸)center弹性盒子沿侧轴居中分列flex-start弹性盒子从出发点开始依次分列flex-end弹性盒子从止境开始依次分列这里是给弹性容器添加

align-items: stretch;
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>css-day06-练习</title>
7. <style>
8. .box{
9. display: flex;
10. /* 弹性盒子在侧轴(即垂直方向)没有尺寸才能拉伸
11. 比如下面的.box div注释掉高度才会拉伸。
12. 浏览器默认是justify-items的值是 stretch;*/
13. align-items: stretch;
14. height: 300px;
15. border: 1px solid #000;
16. }
17. .box div{
18. width: 200px;
19. /* height: 100px; */
20. background-color: pink;
21. }
23. </style>
24. </head>
25. <body>
26. <div class="box">
27. <div>1</div>
28. <div>2</div>
29. <div>3</div>
30. </div>
31. </body>
32. </html>
复制代码
align-items: center;
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>css-day06-练习</title>
7. <style>
8. .box{
9. display: flex;
10. /* 弹性盒子在侧轴(即垂直方向) 垂直居中
11. 当弹性盒子没有高度按照弹性盒子内容填充的高度*/
12. align-items: center;
13. height: 300px;
14. border: 1px solid #000;
15. }
16. .box div{
17. width: 200px;
18. height: 100px;
19. background-color: pink;
20. }
22. </style>
23. </head>
24. <body>
25. <div class="box">
26. <div>1</div>
27. <div>2</div>
28. <div>3</div>
29. </div>
30. </body>
31. </html>
复制代码
align-items: self-start;
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>css-day06-练习</title>
7. <style>
8. .box{
9. display: flex;
10. /* 弹性盒子在侧轴(即垂直方向)从起点开始依次排列
11. 当弹性盒子没有高度，按照弹性盒子内容填充高度*/
12. align-items: self-start;
13. height: 300px;
14. border: 1px solid #000;
15. }
16. .box div{
17. width: 200px;
18. height: 100px;
19. background-color: pink;
20. }
22. </style>
23. </head>
24. <body>
25. <div class="box">
26. <div>1</div>
27. <div>2</div>
28. <div>3</div>
29. </div>
30. </body>
31. </html>
复制代码
align-items: self-end;
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>css-day06-练习</title>
7. <style>
8. .box{
9. display: flex;
10. /* 弹性盒子在侧轴(即垂直方向)从终点开始依次排列
11. 当弹性盒子没有高度按照内容填充*/
12. align-items: self-end;
13. height: 300px;
14. border: 1px solid #000;
15. }
16. .box div{
17. width: 200px;
18. height: 100px;
19. background-color: pink;
20. }
22. </style>
23. </head>
24. <body>
25. <div class="box">
26. <div>1</div>
27. <div>2</div>
28. <div>3</div>
29. </div>
30. </body>
31. </html>
复制代码

align-self子元素(弹性盒子)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
display: flex;
align-items: self-start;
height: 300px;
border: 1px solid #000;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
/* 不仅仅是ul下的li可用 */
.box div:nth-child(1){
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

复制代码

修改主轴方向flex-direction(弹性容器)

主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction
属性值效果row水平方向，从左向右(默认)column垂直方向，从上向下（注意侧轴主轴互换）row-reverse水平方向，从右向左column-reverse垂直方向，从下向上

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
display: flex;
/* 这主轴变侧轴，侧轴变主轴 */
flex-direction: column;
/* 主轴在垂直，视觉效果：垂直居中 */
justify-content: center;
/* 侧轴在水平，视觉效果：水平居中 */
align-items: center;
height: 300px;
border: 1px solid #000;
}
.box div{
width: 200px;
height: 100px;
}
/* 不仅仅是ul下的li可用 */
.box div:nth-child(1){
background-color: skyblue;
}
.box div:nth-child(2){
background-color: gold;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
</div>
</body>
</html>

复制代码

弹性盒子换行flex-wrap(弹性容器)

弹性盒子可以主动挤压或拉伸，默认情况下，全部弹性盒子都在一行表现。
属性名：flex-wrap
属性值

wrap：换行（弹性盒子不会被挤压）
nowrap：不换行（默认）会被挤压(纵然弹性盒子设置了宽度也会被挤压)

弹性伸缩比flex(弹性盒子属性重点)

作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表现占用父级剩余尺寸的份数。
1 不加flex布局如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
height: 300px;
border: 1px solid #000;
}
.box div{
/* height: 100px; */
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

复制代码

2 参加flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div{
/* height: 100px; */
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

复制代码

3 当第二个弹性盒子参加flex

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div{
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
/* 水平方向剩余尺寸=
1920px-
第一个弹性盒子宽200px-
第二个弹性盒子内容所占宽度-
第三个弹性盒子内容所占宽度
第二个弹性盒子宽度 = 水平方向剩余尺寸/1
*/
.box div:nth-child(2){
flex:1
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

复制代码

4 当第二，三个弹性盒子参加flex

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div{
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
/* 水平方向剩余尺寸=
1920px-
第一个弹性盒子宽200px-
第二个弹性盒子内容所占宽度-
第三个弹性盒子内容所占宽度
第二个弹性盒子宽度 = 1*水平方向剩余尺寸/(1+2)
第三个弹性盒子宽度 = 2*水平方向剩余尺寸/(1+2)
*/
.box div:nth-child(2){
flex:1
}
.box div:nth-child(3){
flex:2
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

复制代码

5 参加flex-direction: column; 主轴侧轴反过来

<!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>flex布局-弹性伸缩比</title>
<style>
/* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
.box {
display: flex;
flex-direction: column;
height: 300px;
border: 1px solid #000;
}
.box div {
/* height: 100px; */
background-color: pink;
}
.box div:nth-child(1) {
width: 200px;
}
.box div:nth-child(2) {
flex: 1;
}
.box div:nth-child(3) {
flex: 2;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

复制代码

行内对齐方式align-content(弹性容器)

属性名：align-content （必要设置父元素的高才见效）
属性值效果flex-start默认值，弹性盒子从出发点开始依次分列flex-end弹性盒子从止境开始依次分列center弹性盒子沿主轴居中分列space-between弹性盒子沿主轴匀称分列，，空缺间距匀称分在弹性盒子之间, 两侧盒子贴着双方space-aroud弹性盒子沿主轴匀称分列，空缺间距匀称分在弹性盒子两侧，两侧盒子与双方有间隔space-evenly弹性盒子沿主轴匀称分列，弹性盒子与容器之间间距相称注意：该属性对单行弹性盒子模子无效。
默认布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* 这里使用align-content:value */
height: 400px;
border: 1px solid #000;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
</div>
</body>
</html>

复制代码

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-space-around;
align-content: space-evenly;

flex-flow复合属性：

这个属性是flex-direction 和 flex-wrap复合写法

flex-flow:row nowrap;
flex-flow:column wrap-reverse;

复制代码

order(默认0)

实用于：flex子项和flex容器中的绝对定位子元素
用整数值来界说分列次序，数值小的排在前面。可以为负值
flex拓展

flex-grow：拉伸(默认0)

自身紧缩数/紧缩总和*剩余空间
flex-shrink：紧缩(默认1)

(自身宽度自身紧缩数)/(sum每个(宽度紧缩数))*超出的空间
flex-basis：宽度(默认0)

px：像素值
%：百分值
auto（默认）：无特定宽度值，取决于别的属性值
content：基于内容主动盘算宽度
flex：复合写法

flex-grow|flex-shrink|flex-basis
flex:1 1 300px;

Float和Flex布局

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

饭宝