flex 代替浮动来布局页面
-
特点:flex可以使元素具有弹性,让元素根据页面的大小改变而改变
-
弹性容器
-
要使用弹性盒,必须把元素设置成一个弹性容器
-
通过display 设置弹性容器
- display :flex 块级弹性容器
- **display :inline-flex 行内弹性容器 **
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ /* height: 600px; */ width: auto; border: red 5px solid; display: flex; /* display: inline-flex; */ } .box1{ height: 200px; width: 200px; background-color: aqua; } .box2{ height: 200px; width: 200px; background-color: pink; } .box3{ height: 150px; width: 200px; background-color: yellowgreen; } </style> </head> <body> <div class=&
-