Layout 布局 #

<template>
  <div class="color-style">
    <span class="c-red">红色 red</span>
    <span class="c-yellow">黄色 yellow</span>
    <span class="c-blue">蓝色 blue</span>
    <span class="c-green">绿色 green</span>
    <span class="color-33">#333333</span>
    <span class="color-66">#666666</span>
    <span class="color-99">#999999</span>
  </div>
</template>

<style lang="scss" scoped>
.color-style {
  span {
    margin-right: 30px;
  }
}
</style>

<template>
  <div class="bg-style flex">
    <div class="bg-red c-white">
      红色 red
    </div>
    <div class="bg-yellow c-white">
      黄色 yellow
    </div>
    <div class="bg-blue c-white">
      蓝色 blue
    </div>
    <div class="bg-green c-white">
      绿色 green
    </div>
    <div class="bg-gray c-red">
      gray
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg-style {
  div {
    margin-right: 30px;
    min-width: 120px;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
  }
}
</style>

<template>
  <div class="guid-content">
    <div class="bg-purple mt10 mr10">
      <span>mt10 上边距10px：margin-top:10px</span><br>
      <span>mr10 右边距10px：margin-right:10px</span>
    </div>
    <div class="bg-purple mb10 ml10">
      <span>mb10 下边距10px：margin-bottom:10px</span><br>
      <span>ml10 左边距10px：margin-left:10px</span>
    </div>
  </div>
  <div class="guid-content">
    <div class="bg-purple mt20 mr20">
      <span>mt20 上边距20px：margin-top:20px</span><br>
      <span>mr20 右边距20px：margin-right:20px</span>
    </div>
    <div class="bg-purple mb20 ml20">
      <span>mb20 下边距10px：margin-bottom:20px</span><br>
      <span>ml20 左边距10px：margin-left:20px</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.guid-content {
  border: 1px solid #eaeefb;
  padding: 10px;
  border-radius: 4px;
  display: flex;

  .bg-purple,
  .bg-purple-light {
    padding: 10px;
    border: 1px solid #eaeefb;
    border-radius: 4px;
    line-height: 1.5;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .bg-purple {
    width: 350px;
    background-color: #d3dce6;
  }
}

.bg-row {
  background-color: #d3dce6;
  padding: 10px;
  border-radius: 4px;
}

.width-240 {
  width: 240px;
}
</style>

<template>
  <div>
    <span class="line-through">中划线</span>
    <span class="pointer ml10">光标手指指针</span>
    <span class="not-allowed ml10">禁用样式</span>
  </div>
</template>

<template>
  <div class="mb10">
    单轴方式：
  </div>
  <div>
    <div class="mb10">
      flex：flex
    </div>
    <ul class="guid-content flex">
      <li class="bg-purple">
        content1
      </li>
      <li class="bg-purple">
        content2
      </li>
      <li class="bg-purple">
        content3
      </li>
      <li class="bg-purple">
        content4
      </li>
    </ul>
  </div>
  <div>
    <div class="mb10 mt10">
      超出换行：flex-warp
    </div>
    <ul class="guid-content flex-wrap">
      <li class="bg-purple">
        content1
      </li>
      <li class="bg-purple">
        content2
      </li>
      <li class="bg-purple">
        content3
      </li>
      <li class="bg-purple">
        content4
      </li>
    </ul>
  </div>
  <div>
    <div class="mb10 mt10">
      左右居中：flex-justify-center
    </div>
    <div class="flex-justify-center flex1 bg-row">
      左右
    </div>
  </div>
  <div class="mt10">
    <div class="mb10">
      上下居中：flex-align-center
    </div>
    <div class="flex-align-center flex1 bg-row">
      上下
    </div>
  </div>
  <div class="mt10">
    <div class="mb10">
      左右上下居中：flex-center
    </div>
    <div class="flex-center flex1 bg-row">
      上下左右
    </div>
  </div>
  <div class="mt10">
    <div class="mb10">
      两侧的间隔相等：flex-around
    </div>
    <ul class="guid-content flex-around">
      <li class="bg-purple flex-center">
        左右
      </li>
      <li class="bg-purple flex-center">
        上下
      </li>
    </ul>
  </div>
  <div class="mt10">
    <div class="mb10">
      两端对齐，项目之间的间隔都相等: flex-between
    </div>
    <ul class="guid-content flex-between">
      <li class="bg-purple flex-center">
        左右
      </li>
      <li class="bg-purple flex-center">
        上下
      </li>
    </ul>
  </div>
  <div class="mb10 mt20">
    多轴方式：
  </div>
  <div>
    <div class="mb10">
      左右居中：flexs-justify-center
    </div>
    <ul class="guid-content flexs-justify-center">
      <li class="bg-purple flex-center">
        左右
      </li>
      <li class="bg-purple flex-center">
        上下
      </li>
    </ul>
  </div>
  <div>
    <div class="mb10 mt10">
      上下居中：flexs-align-center
    </div>
    <ul class="guid-content flexs-align-center">
      <li class="bg-purple flex-center">
        左右
      </li>
      <li class="bg-purple flex-center">
        上下
      </li>
    </ul>
  </div>
  <div>
    <div class="mb10 mt10">
      上下左右居中：flexs-center
    </div>
    <ul class="guid-content flexs-center">
      <li class="bg-purple flex-center">
        左右
      </li>
      <li class="bg-purple flex-center">
        上下
      </li>
    </ul>
  </div>
</template>

<script>
export default { };
</script>

<style lang="scss" scoped>
.guid-content {
  border: 1px solid #eaeefb;
  padding: 10px;
  border-radius: 4px;
  display: flex;

  .bg-purple,
  .bg-purple-light {
    padding: 10px;
    border: 1px solid #eaeefb;
    border-radius: 4px;
    line-height: 1.5;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .bg-purple {
    width: 350px;
    background-color: #d3dce6;
  }
}

.bg-row {
  background-color: #d3dce6;
  padding: 10px;
  border-radius: 4px;
}

.width-240 {
  width: 240px;
}
</style>