flex的几个常用布局

常用的几个样式布局效果如下:

在这里插入图片描述
代码如下:

<style> 
.demo{
   width:258px;
   height:300px;
   dispaly:flex;
   flex-wrap:wrap;
   align-content:flex-start //align-content适用于父类容器上,flex-start各行向弹性盒容器的起始位置堆叠
   background:yellow;
}
.item{
 flex:0 0 33.3%!important;
 height:80px;
 box-sizing:border-box;
 background:pink;
}
</style>
<body>
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>

align-content示例:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<style>
.demo{
  width: 500px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background:yellow;
  justify-content: space-around;//项目位于各行之前,之间,之后都留有空白的容器内
 }
 .item{
  min-width:30%;
 background:pink;
 }
 </style>
 <body>
 <div class="demo">
   <div class="item" style="background-color:coral;">1</div>
   <div class="item" style="background-color:blue;">2</div>
   <div class="item" style="background-color:red;">3</div>
   <div class="item">4</div>
  </div>
  </body>

在这里插入图片描述

<style> 
.demo
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
.item
{
   flex:1;
   margin:1px;
 }
</style> 
<body>
<div class="demo">
<div class="item" style="background-color:coral;">红色</div>
<div class="item"  style="background-color:lightblue;">蓝色</div>  
<div class="item"  style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读