Flex 布局（两个div居中自适应宽度变小变一列，宽度够就是两列）

https://www.runoob.com/w3cnote/flex-grammar.html

display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;

两列Div居中显示用传统float方式就不是很好实现，本着能用css的就不用js的原则。就用Flex布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box {
	display: flex;/*flex布局*/
	justify-content: center;/* justify-content属性定义了项目在主轴上的对齐方式。 横向对齐方式 */
	align-items: stretch; /* align-items属性定义项目在交叉轴上如何对齐 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */
	flex-wrap: wrap; /* flex-wrap ：定义子元素超过一行，如何换行 wrap：换行，第二行在第一行下面，从左到右 */
	}
.boxInner{
	650px;
	height:30px;
	background-color:#cccccc;
	margin:10px;
	}
</style>
</head>

<body>


<div class="box">
<div class="boxInner">1</div>
<div class="boxInner">2</div>
<div class="boxInner">3</div>
<div class="boxInner">4</div>
</div>

</body>
</html>

　　如果后期在这个页面右侧加入一个DIV放右边的话，可以弄成float 左右俩，然后左侧的话宽度写成

float: left; calc(100% - 260px);

Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）

Flex 布局（两个div居中自适应宽度变小变一列，宽度够就是两列）