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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知