主页
CSS
CSS 布局 浮动实例
trycss_float_boxes_flex
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-wrap: nowrap; background-color: DodgerBlue; } .flex-container .box { background-color: #f1f1f1; width: 50%; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>弹性盒子</h1> <div class="flex-container"> <div class="box">方框 1 - 这是一些确保内容真正高大上的文字。 这是一些文本，以确保内容变得非常高。</div> <div class="box">方框 2 - 我的身高将遵循方框 1。</div> </div> <p>尝试调整浏览器窗口的大小以查看灵活的布局。</p> <p><strong>注意：</strong> Internet Explorer 10 或更早版本不支持 Flexbox。</p> </body> </html>