1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

flex弹性盒模型

1、flex里的项目,总宽度如果不超过父级宽度,那么就正常横向排列(类似于float的效果)

2、flex里的项目,总宽度如果超过父级元素宽度,那么加给项目的宽度就无效了,每个项目的宽度会自动均分(类似于float的效果)

<!DOCTYPE html>      <html lang="en">      <head>      	<meta charset="UTF-8">      	<title>Document</title>      	<style type="text/css">      	#jrtj{      		width: 80%;      		border: 4px solid orangered;      		height: 500px;      		margin: 10px auto;      		/*flex里的项目是不脱离文档流的*/      		/*指定容器里面的项目排列方式为弹性布局(跟下面的用float: left的效果一样)*/      		display: flex;      		/*row横排列,reverse颠倒,反转意思  加reverse就是反过来排*/      		/*flex-direction:row-reverse;*/      		/*direction  方向*/      		flex-direction: row;      		/*column竖排列 ,加reverse就是反过来排*/      		/*flex-direction: column;*/      		/*flex-direction: column-reverse;*/      		/*(默认是不换行的 nowrap)放不下换行wrap*/      		flex-wrap: wrap;      	}      	#jrtj >div{      		width: 210px;      		height: 200px;      		background: dodgerblue;      		/*border: 1px solid blue;*/      		outline: 1px solid blue;      		/*float: left;*/      		color: white;      		font-size: 30px;      		text-align: center;      	}      	</style>      </head>      <body>         <div id="jrtj">      	<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>9</div>      	<div>10</div>      	</div>      </body>      </html>

原文链接:https://www.qiquanji.com/post/7512.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: