Flex 布局（两个div居中自适应宽度变小变一列，宽度够就是两列）-CFANZ编程社区

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{
  width: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; width: calc(100% - 260px);

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 https://www.VuejsDev.com 用于梳理知识点