写在前面
最近，做的VUE前端项目，有点费劲，总是在调整样式花费大量时间，原因很多，菜是原罪，故我一定要搞懂，背得滚瓜烂熟。
开启Flex布局
仅需在样式声明display:flex;当开启flex布局后，项目会沿着flex主轴方向排列
<body>
<div class="text"> 创建日期: </div>
<div class="text"> 创建日期: </div>
<div class="text"> 创建日期: </div>
</body>
body{
height:100%
display:flex//开启flex布局
}
div容器
- 容器默认存在两根轴，水平：main-axis,垂直的交叉轴：cross-axis
- 主轴的开始位置（与边框的交叉点）叫做main-start，结束位置叫main-end
- 交叉轴开始位置叫做cross-start，结束位置叫做coss-end
justify-content
- 当开启flex布局后
2. 当加入justify-content:center后，居中
拓展：
justify-content:flex-end//靠右对齐justify-content:space-between//左右两端对齐，且项目间距相等justify-content:space-around//项目之间的间距为左右两侧到容器间的间距的两倍justify-content:space-evenly//项目之间的间距与项目与容器之间的间距相等3.alig-items沿着交叉轴方向分布
- align-items:flex-star//默认
- align-items:center//居中排列
- align-items:flex-end//与交叉轴底部对齐
重点水平垂直居中，非常常用
flex-direction:column(待补充)
如图排列
flex-wrap:nowrap//默认(待补充)
- flex-wrap:nowrap//根据自身宽度排列
项目属性(待补充)
order,flex-grow,
- flex-shrink（重点）
- flex-basis
-flex
