html 清除flex,清除display:flex样式

一、页面行排列布局

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

左侧区域

右侧区域

css部分.main .left,.main .right{

border: 1px solid #FE6464;

height: 200px;

text-align: center;

line-height: 200px;

color: #FE6464;

font-size: 30px

}

.left{

width: 48%;

float: left;

}

.right{

width: 48%;

float: right;

}

.clear{

clear: both;

}

这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

用display:flex布局，可以解决这两个缺点

刚才的html部分不变，css部分.main .left,.main .right{

padding:20px;

display:flex;

}

.left{

flex:1;

}

.right{

flex:1;

}

.clear{

clear: both;

}

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex

html部分

css部分.main{

padding: 20px;

display: flex;

}

.middle{

margin:auto;

}

在未知div宽高时，用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子