巧用Flex布局，轻松实现横向4个盒子排列

要使用Flex布局横向放置4个盒子，首先需要创建一个包含4个子元素的容器，并设置其display属性为flex。然后，可以通过设置容器的flex-direction属性为row来实现横向排列。以下是一个简单的示例： HTML代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex布局横向4个盒子</title> <style> .container { display: flex; flex-direction: row; } .box { width: 100px; height: 100px; background-color: lightblue; margin: 5px; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html> ``` 在这个示例中，我们创建了一个名为container的容器，并将其display属性设置为flex。然后，我们将flex-direction属性设置为row，以实现横向排列。接下来，我们创建了4个名为box的子元素，并设置了它们的宽度、高度、颜色和外边距。 ######[AI写代码神器 | 329点数解答 | 2024-06-29 23:29:50]

服务商

更多选项

快捷项

自定义