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,我们将及时处理。
微信扫码关注
更新实时通知