【无标题】

最新推荐文章于 2024-10-19 11:09:56 发布

G_GreenHand

最新推荐文章于 2024-10-19 11:09:56 发布

阅读量117

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44766849/article/details/127787726

版权

本文介绍了如何使用Flex布局实现元素在容器内的平铺效果。代码示例展示了如何设置`.flex-container`以允许元素自动换行，并通过`.flex-item`调整子元素的宽度和平铺排列。关键属性包括`display:flex`、`flex-wrap:wrap`、`justify-content:flex-start`以及`flex`属性的使用。

摘要由CSDN通过智能技术生成

flex盒子平铺布局

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

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: flex;
	flex-wrap:wrap;//自动换行
    width: 400px;
    height: 250px;
    background-color: lightgrey;
	justify-content:flex-start;
	
}

.flex-item {
    background-color: cornflowerblue;
    height: 100px;
    margin: 10px;
	flex: 0 0 28%;//用子元素宽度
	
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
	<div class="flex-item">flex item 4</div>  
	<div class="flex-item">flex item 5</div>
	<div class="flex-item">flex item 6</div>
	<div class="flex-item">flex item 7</div>
	<div class="flex-item">flex item 8</div>
</div>

</body>
</html>