flex弹性布局的应用三 之flex-warp属性
程序员文章站
2022-05-26 22:23:39
...
关于flex-warp属性的使用
1、使用方式
display: flex; //弹性盒子，默认弹性盒元素的方向是横向
flex-wrap: wrap; //在必要时换行
align-content: stretch; //堆栈排列，控制wrap换行
2、使用方式
display: flex;
justify-content: space-between;
align-items: center; //加
flex-wrap: wrap; //加
align-content: stretch;
主要代码
使用时，在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>
上一篇： flex布局的属性及其应用
下一篇： CSS