flex弹性布局的应用三之flex-warp属性_flew-warp

作者：Gausst松鼠会 | 2024-03-14 13:19:35

踩

flew-warp

关于flex-warp属性的使用
1、使用方式

display: flex;	//弹性盒子，默认弹性盒元素的方向是横向
flex-wrap: wrap;	//在必要时换行
align-content: stretch;	//堆栈排列，控制wrap换行
1
2
3

在这里插入图片描述

2、使用方式

display: flex;
justify-content: space-between;
align-items: center;	//加
flex-wrap: wrap;	//加
align-content: stretch;
1
2
3
4
5

在这里插入图片描述
主要代码
使用时，在content类中，加入不同使用方式的代码即可

  <!DOCTYPE html>
    <html>
    <head>
    	<title>flex布局的应用</title>
    	<style type="text/css">
    		.content{
    			width: 800px;
    			height: 400px;
    			background-color:#dbdbdb;
    
    		}
    		.c-1{
    			width: 115px;
    			height: 50px;
    			background-color:pink;
    			border: 1px solid #f44336;
    		}
    	</style>
    </head>
    <body>
    	<div class="content">
    		<div class="c-1">1</div>
    		<div class="c-1">2</div>
    		<div class="c-1">3</div>
    		<div class="c-1">4</div>
    	</div>
    </body>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/234750

flex弹性布局的应用三 之flex-warp属性_flew-warp

flex弹性布局的应用三之flex-warp属性_flew-warp