flex布局
(一) 认识flex布局 flex布局完全可以代替浮动,浮动比较麻烦而且会带来高度坍塌。 如下外面的大框是flex-container,里面的小框是flex-item。 以下分析(上面为代码,下面为代码的效果图) < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document < / title > < style > . box { /* 开启flex布局有2个方法 display: flex;块级元素 display: inline-flex;行内元素 */ display : flex ; width : 5 oopx ; height : 300 px ; background - color : #f00 ; } < / style > < / head > < body > < div class = "box" > < div > < / div > < div > <