巧用CSS的flex布局实现Web盒子横向排放（附示例代码）

横向排放是指将多个web盒子（网页元素）在水平方向排列。这可以通过CSS的flex布局来实现。 下面是一个示例代码： ``` <style> .container { display: flex; /* 将容器设置为flex布局 */ } .box { width: 100px; height: 100px; background-color: blue; margin-right: 10px; /* 为盒子之间留出一定的间距 */ } </style> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ``` 在这个示例中，通过将顶层容器的display属性设置为flex，盒子将按照横向排列。每个盒子都有固定的宽度和高度，并且之间有一定的外边距，以便在水平方向上有间距。 ######[AI写代码神器 | 424点数解答 | 2024-06-20 14:14:03]