flex的几个常用布局

最新推荐文章于 2025-02-18 10:09:15 发布

我是你要找的bug

最新推荐文章于 2025-02-18 10:09:15 发布

阅读量286

点赞数

分类专栏：弹性盒子布局 f'le'x CSS 文章标签： flex 弹性盒子 css

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/106250055

版权

CSS 同时被 3 个专栏收录

8 篇文章

订阅专栏

弹性盒子布局

1 篇文章

订阅专栏

f'le'x

1 篇文章

订阅专栏

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

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

<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>