代码:
<!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>Document</title> <style> .box{ display: flex; flex-wrap: wrap; width: 1000px; height: 800px; background-color: orange; } /* 盒子之间空白为默认高度拉伸 */ span{ width: 120px; height: 120px; border: 2px solid #fff; background-color: green; text-align: center; line-height: 120px; font-weight: 700; font-size: 50px; color: #fff; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> </div> </body> </html>
效果图:
移动web-flex布局-弹性盒子换行
最新推荐文章于 2024-10-12 10:19:22 发布
此HTML/CSS代码示例展示了如何使用Flexbox布局创建一个1000x800像素的容器,其中包含多行多列的绿色正方形元素,每个元素都有固定的宽度和高度,并在不同屏幕尺寸下自动换行。这种布局方法适用于响应式网页设计,以适应不同设备的显示需求。
摘要由CSDN通过智能技术生成