当前位置：网站首页>Elastic box auto wrap demo

Elastic box auto wrap demo

2022-06-28 13:07:00 【HHppGo】

Code ：

<!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> Flex box wrap </title>
	<style> * {
       margin: 0; padding: 0; } .box {
       /*2.  Use flex Layout   Arrange children horizontally   Insufficient parent width   Child auto scaling   And the expansion will never exceed the width of the parent box   Children do not wrap  */ display: flex; /* 3. demand :  Use Flex The layout makes the children horizontal , And the width of the parent is not enough , Child word wrap */ /*  The default value is , No line wrapping  */ /* flex-wrap: nowrap; */ /*  Word wrap  */ flex-wrap: wrap; /* 4. When using flex-wrap  Give Way flex When the layout can be arranged in multiple rows , Alignment can be set between rows  */ /*  There is no space between lines , Vertical center  */ /* align-content: center; */ /*  The first and last lines are at the top and bottom of the elastic container  */ align-content: space-between; height: 500px; border: 1px solid #000; } .box div {
       /* 1. Use floats to arrange children horizontally   Insufficient width of parent , Child word wrap */ /* 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>

effect ：

Insert picture description here

原网站

版权声明
本文为[HHppGo]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206281254449761.html

边栏推荐

猜你喜欢

随机推荐