1.弹性盒子布局可以帮助解决多个盒子水平排列的问题
如下:style样式只有宽度,高度,背景颜色 。
代码:
<style>
.biggest{
width: 70%;
height: 350px;
background-color: aquamarine;
margin: 0 auto;
/* display: flex; */
}
.d1,.d2,.d3{
width: 200px;
height: 200px;
}
.d1{
background-color: antiquewhite;
}
.d2{
background-color: pink;
}
.d3{
background-color: brown;
}
</style>
如下:大盒子中包含三个不同颜色小盒子。
<body>
<div class="biggest">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
效果展示:在不使用Flex布局的情况下,三个盒子为块元素所以会依次纵向排列
只需要在最外层大盒子属性中添加display:felx 轻松使三个小盒子横向排列
代码:
.biggest{
width: 70%;
height: 350px;
background-color: aquamarine;
margin: 0 auto;
/* 弹性盒子布局 */
display: flex;
}
效果展示:
2.display:flex可以配合上其他的属性一同使用,帮助我们在水平,垂直方向上实现不同需求的弹性布局
一. justify-content 的使用方法和效果
代码举例:
.biggest{
width: 70%;
height: 350px;
background-color: aquamarine;
margin: 0 auto;
/* 弹性盒子布局 */
display: flex;
justify-content: center;/* 使用时将center替换 */
}
使用举例:justify-content:center
center | 居中对齐 |
space-between | 两端对齐(与外部大盒子相邻) |
space-around | 分散对其(每个小盒子左右都留等量距离) |
space-evenly | 平均对其(每个盒子等距分布) |
flex-start | 左对齐 |
flex-end | 右对齐 |
效果:
![j](https://i-blog.csdnimg.cn/blog_migrate/cc984be612b2056080edf1367a4b1e68.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dede5c392490fb525ce6c7b0c74cffd4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7a823cfd00ae612a4bdff0edc0fedc62.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9b7af1fd3c3b12bb63c486633959827d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e1f68c81d6098e5d8206c3746ef9d010.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6262c9799c38335840a08f4ca6c189e8.png)
二.align-items的不同方法使用方法和效果
代码举例:
.biggest{
width: 70%;
height: 350px;
background-color: aquamarine;
margin: 0 auto;
/* 弹性盒子布局 */
display: flex;
justify-content: flex-start;/* 使用时将center替换 */
align-items: center;
}
使用举例:align-items: center
(在需要使用不同align-items: 的时将center替换)
flex-start | 在父级盒子最上端对其 |
flex-end | 垂直居中对其 |
center | 在父级盒子最下端对其 |
baseline | 项目的第一行文字的基线对齐(不常用) |
stretch | 自动填充高度将容器占满(子盒子没有设置高度时有效) |
![](https://i-blog.csdnimg.cn/blog_migrate/b8d8c92b5f67b8742745df7eb0e0057b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/96749ded33bd524a68f95d6fda87f555.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a2591ebefe3758a64a7308c449aeb8cf.png)
三.flex-wrap属性的使用方法和效果
使用举例: flex-wrap: wrap
(使用时将warp替换)
nowrap | 不自动换行 |
wrap | 自动换行 |
wrap-reverses | 反向换行 |
HTML代码:
<div class="biggest">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
</div>
style代码:
.biggest{
width: 400px;
height: 350px;
background-color: aquamarine;
margin: 0 auto;
/* 弹性盒子布局 */
display: flex;
flex-wrap: nowrap;
}
![](https://i-blog.csdnimg.cn/blog_migrate/d3baac4c20c349b41a1d0b136e178649.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7468b02674404abe0ea83a2d28400601.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f78505133dd229245d2153d2cc648458.png)
注意:仔细观察flex-wrap:wrap-reverse和flex-wrap:wrap虽然都有自动换行,但是其中盒子内的数字顺序是相反的
四.flex-direction属性的使用方法
代码举例:
.biggest{
width: 450px;
height: 600px;
background-color: aquamarine;
margin: 0 auto;
/* 弹性盒子布局 */
display: flex;
flex-direction:row;
}
row | (默认值)表示沿水平方向,由左到右 |
row-reverse | 沿水平方向,由右到左 |
column | 垂直方向,由上到下 |
column-reverse | 垂直方向,由下到上 |
效果展示:
![](https://i-blog.csdnimg.cn/blog_migrate/3f0f418846f5d2369018538ea799f9ef.png)
![](https://i-blog.csdnimg.cn/blog_migrate/096b50f6bf2bb8c07ad93e59e8f65444.png)
![](https://i-blog.csdnimg.cn/blog_migrate/489843ef805bf9635d50592dd64ba515.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8395c56b074b2a836bcdc25d51c10070.png)
五.order属性的使用方法和效果
order属性添加在子盒子中,数值越小位置越靠前
代码举例:
.d2{
background-color: pink;
order:-1;
}
效果展示
![order:-1](https://i-blog.csdnimg.cn/blog_migrate/038708199d59ce1ecb8189d71cdc7df7.png)
六.flex-grow属性的使用方法和效果
1.flex-grow属性决定是否平铺剩余空间
代码举例:
(因为只给第三个小盒子增加了flex-grow的属性所以剩余空间只有第三个盒子平铺)
.d3{
background-color: brown;
flex-grow: 1;
}
效果展示:
2.当我们给其他子盒子增加 flex-grow属性后剩余面积,就由这些添加过flex-grow属性的盒子平分
代码举例:
.d2{
background-color: pink;
flex-grow: 1;
}
.d3{
background-color: brown;
flex-grow: 1;
}
由上述代码可见我们给第二个和第三个子盒子添加了flex-grow属性,所以剩余的宽度由这两个元素平摊
效果展示:
由此可知,当添加此 flex-grow属性后将会按比例平摊父级元素盒子的剩余宽度
3.可以将每个字盒子都设置flex-grow属性,这样就是按比例占满整个父级元素的宽度
代码举例:
.d1{
background-color: antiquewhite;
flex-grow: 1;
}
.d2{
background-color: pink;
flex-grow: 2;
}
.d3{
background-color: brown;
flex-grow: 4;
}
效果展示:
可以看出来宽度 子盒子1<子盒子2<子盒子3