首页使用flex布局实现容器两端对齐的效果。

使用flex布局实现容器两端对齐的效果。

时间: 2024-11-22 13:36:20 浏览: 28

在Flexbox布局中，要实现容器两端对齐（两端自动填充，即两端留白），你可以使用`justify-content`属性，并设置为`space-between`或`space-around`。这里有一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .container { display: flex; justify-content: space-between; /* 这里设置两端对齐 */ align-items: center; /* 如果需要元素垂直居中，可以添加这一行 */ width: 100%; } .child-element { background-color: lightblue; padding: 10px; margin: 5px; } </style> </head> <body> <div class="container"> <div class="child-element">Child Element 1</div> <div class="child-element">Child Element 2</div>  </div> </body> </html> ``` 在这个例子中，`.container` 的孩子元素会在水平方向上均匀分布，两头有空白区域。如果你想要子元素之间不留空隙并且两端留白，可以选择`justify-content: space-between;`；如果子元素之间的距离相等，可以选择`justify-content: space-around;`。

阅读全文