当前位置：网站首页>弹性盒子自动换行小Demo

弹性盒子自动换行小Demo

2022-06-28 12:55:00 【HHppGo】

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>弹性盒子换行</title>
	<style> * {
       margin: 0; padding: 0; } .box {
       /*2. 使用flex布局 让子级水平排列 父级宽度不够 子级自动伸缩 且伸缩永远不会超过父盒子的宽度 子级不会自动换行 */ display: flex; /* 3.需求: 使用Flex布局让子级水平排列，并且父级宽度不够，子级自动换行*/ /* 默认值，不会自动换行 */ /* flex-wrap: nowrap; */ /* 自动换行 */ flex-wrap: wrap; /* 4.当使用flex-wrap 让flex布局可以多行排列时，行与行之间可以设置对齐方式 */ /* 行与行之间无间距，垂直居中 */ /* align-content: center; */ /* 第一行和最后一行在弹性容器的最上面和最下面 */ align-content: space-between; height: 500px; border: 1px solid #000; } .box div {
       /* 1.使用浮动让子级水平排列 父级的宽度不够，子级自动换行*/ /* float: left; */ width: 100px; height: 100px; background-color: pink; } </style>
</head>

<body>
	<div class="box">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</body>

</html>

效果：

在这里插入图片描述

原网站

版权声明
本文为[HHppGo]所创，转载请带上原文链接，感谢
https://blog.csdn.net/asacmxjc/article/details/125433746

边栏推荐

猜你喜欢

随机推荐