css3 flex 弹性布局的使用

• 默认布局

• 代码

<template>
    <div class="a">
      <div class="box">123</div>
      <div class="box">456</div>
      <div class="box">789</div>
    </div>
</template>
<script>
/* eslint-disable */
</script>
<style>
.a{
  width: 100%;
  height: 100%;
  border: 1px red solid;
}
.box {
  width: 200px;
  height: 200px;
  border: 1px red solid;
}
</style>

• 运行结果
  默认情况下，我们布局是向下排列的，当我们开启弹性布局（display: flex;）就会自左向右排列成一行，格子若是宽度超出整行宽度，会自动缩小，不会换行。
  看结果
  代码

<template>
    <div class="a">
      <div class="box">123</div>
      <div class="box">456</div>
      <div class="box">789</div>
    </div>
</template>
<script>
/* eslint-disable */
</script>
<style>
.a{
  width: 100%;
  height: 500px;
  border: 1px red solid;
  display: flex;
}
.box {
  width: 200px;
  height: 200px;
  border: 1px red solid;
}
</style>

justify-content: flex-start; --向左排列

justify-content: center; --居中【预览】

justify-content: flex-end; --向右排列【预览】

justify-content: space-between; – 左右两端对齐
justify-content: space-around; --左右两边的间距相等
justify-content: space-evenly; --左右两边间距与容器之间的间距相等
align-items: center; --交叉居中排列
align-items: flex-end;–左侧底部对齐

justify-content和align-items可以搭配使用，比如垂直居中对齐

.a{
  width: 100%;
  height: 500px;
  border: 1px red solid;
  display: flex;
  justify-content: center;
  align-items: center;
}