flex弹性布局及应用

<!-- flex的弹性布局 -->

<template>

  <div class="box">

    <div class="box1">1</div>

    <div class="box1">2</div>

    <div class="box1">3</div>

    <div class="box1">1</div>

    <div class="box1">2</div>

    <div class="box1">3</div>

    <div class="box1">1</div>

    <div class="box1">2</div>

    <div class="box1">3</div>

    <div class="box1">1</div>

    <div class="box1">2</div>

    <div class="box1">3</div>

    <div class="box1">1</div>

    <div class="box1">2</div>

    <div class="box1">3</div>

    <div class="box1">3</div>

    <div class="box1">1</div>

    <div class="box1">2</div>

    <div class="box1">3</div>

    <div class="box1">3</div>

    <div class="box1">1</div>

    <div class="box1">2</div>

    <div class="box1">3</div>

  </div>

</template>

<script setup>

import { ref } from "vue";

</script>

<style lang="scss" scoped>

.box {

  width: 1000px;

  height: 500px;

  border: 1px solid pink;

  display: flex;

  flex-wrap: wrap; //默认值nowrap 不换行，如果父盒子宽度不够会自动压缩子元素  使用wrap则会固定宽高且换行

  //justify-content: space-between;两边间距0，子元素间距同等

  //justify-content: space-evenly;两边间距，子元素，间距都同等

  //justify-content: space-around;子元素间距是两边间距的两倍

}

.box1 {

  width: 100px;

  height: 100px;

  text-align: center;

  border: 1px solid red;

}

</style>