display:flex的基本用法

最新推荐文章于 2023-06-28 19:12:44 发布

weixin_30627381

最新推荐文章于 2023-06-28 19:12:44 发布

阅读量157

点赞数

原文链接：http://www.cnblogs.com/adolfvicto/p/8322485.html

版权

新建html页面，复制下面内容，即可见效果

<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>demo</title>
　　　　<style>
　　#box{
　　　　display: flex;
　　　　justify-content: center;
　　　　height: 100px;
　　　　border: 1px solid #eee;
　　　　align-items: center;
　　}
　　.container{
　　　　display: flex;
　　　　justify-content: space-around;
　　　　margin: 50px 0;
　　}
　　.item{
　　　　display: block;
　　　　width:30px;
　　　　height: 30px;
　　　　border:1px solid #eee;
　　　　background: #666;
　　　　border-radius: 50%;
　　}
　　section>div{
　　　　width: 120px;
　　　　height: 120px;
　　　　border:1px solid #333;
　　　　border-radius: 20px;
　　　　padding: 10px;
　　}
/****************************************/
　　.one{
　　　　display: flex;
　　　　justify-content: center;
　　　　align-items: center;
　　}
　　.two{
　　　　display: flex;
　　　　justify-content: space-between;
　　}
　　.two .item:nth-of-type(2){
　　　　align-self: flex-end;
　　}
　　.three{
　　　　display: flex;
　　　　justify-content: space-between;
　　}
　　.three .item:nth-of-type(2){
　　　　align-self: center;
　　}
　　.three .item:nth-of-type(3){
　　　　align-self: flex-end;
　　}
　　.four{
　　　　display: flex;
　　　　justify-content: space-between;
　　}
　　.four .clumn{
　　　　display: flex;
　　　　flex-direction: column;
　　　　justify-content: space-between;
　　}
　　.five{
　　　　display: flex;
　　　　justify-content: space-between;
　　}
　　.five .clumn{
　　　　display: flex;
　　　　flex-direction: column;
　　　　justify-content: space-between;
　　}
　　.five .clumn:nth-of-type(2){
　　　　align-self: center;
　　}
　　.six{
　　　　display: flex;
　　　　justify-content: space-between;
　　}
　　.six .clumn{
　　　　display: flex;
　　　　flex-direction: column;
　　　　justify-content: space-between;
　　}
　　.seven{
　　　　display: flex;
　　　　flex-direction: column;
　　　　justify-content: space-between;
　　}
　　.seven .clumn:nth-of-type(1){
　　　　display: flex;
　　　　justify-content: space-between;
　　}
　　.seven .clumn:nth-of-type(2){
　　　　display: flex;
　　　　justify-content: flex-end;
　　}
</style>
</head>
<body>
<head>
　　<div id="box">
　　　　<span>display:flex的用法-demo</span>
　　</div>
</head>
<section class="container">
　　<div class="one">
　　　　<span class="item"></span>
　　</div>
　　<div class="two">
　　　　<span class="item"></span>
　　　　<span class="item"></span>
　　</div>
　　<div class="three">
　　　　<span class="item"></span>
　　　　<span class="item"></span>
　　　　<span class="item"></span>
　　</div>
　　<div class="four">
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　</div>
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　</div>
　　</div>
　　<div class="five">
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　</div>
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　</div>
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　</div>
　　</div>
　　<div class="six">
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　</div>
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　</div>
　　</div>
　　<div class="seven">
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　　　<span class="item"></span>
　　　　</div>
　　　　<div class="clumn">
　　　　　　<span class="item"></span>
　　　　</div>
　　</div>

</section>
</body>
</html>

转载于:https://www.cnblogs.com/adolfvicto/p/8322485.html

weixin_30627381

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display:flex的基本用法

新建html页面，复制下面内容，即可见效果<!DOCTYPE html>　　<html lang="en">　　<head> 　　　　<meta charset="UTF-8"> 　　　　<title>demo</title> 　　　　<style> 　　#box{ 　　　　display: ...
复制链接

扫一扫