# justify-content について

Flexbox 試してみた に関連しています。

できれば、PC で見てください。

#

<!-- Sample.vue -->

<template lang="pug">
.sample
  p space-between
  ul.space-between
    - for(let i = 1; i <= 5; i++)
      li= i
  p space-around
  ul.space-around
    - for(let i = 1; i <= 5; i++)
      li= i
  p space-evenly
  ul.space-evenly
    - for(let i = 1; i <= 5; i++)
      li= i
  p start
  ul.start
    - for(let i = 1; i <= 5; i++)
      li= i
  p center
  ul.center
    - for(let i = 1; i <= 5; i++)
      li= i
  p space-between 複数行
  ul.big.space-between
    - for(let i = 1; i <= 5; i++)
      li= i
  p space-around 複数行
  ul.big.space-around
    - for(let i = 1; i <= 5; i++)
      li= i
  p space-evenly 複数行
  ul.big.space-evenly
    - for(let i = 1; i <= 5; i++)
      li= i
  p start 複数行
  ul.big.start
    - for(let i = 1; i <= 5; i++)
      li= i
  p center 複数行
  ul.big.center
    - for(let i = 1; i <= 5; i++)
      li= i
</template>

<style lang="scss" scoped>
.sample {
  ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    &.space-between {
      justify-content: space-between;
    }
    &.space-around {
      justify-content: space-around;
    }
    &.start {
      justify-content: start;
    }
    &.center {
      justify-content: center;
    }
    &.space-evenly {
      justify-content: space-evenly;
    }
    &.big li {
      width: 200px;
      height: 200px;
      line-height: 200px;
    }
  }
  li {
    width: 50px;
    height: 50px;
    margin: 10px;
    text-align: center;
    line-height: 50px;
    background: #ff7b17;
  }
}
</style>

# 結果

space-between

  • 1
  • 2
  • 3
  • 4
  • 5

space-around

  • 1
  • 2
  • 3
  • 4
  • 5

space-evenly

  • 1
  • 2
  • 3
  • 4
  • 5

start

  • 1
  • 2
  • 3
  • 4
  • 5

center

  • 1
  • 2
  • 3
  • 4
  • 5

space-between 複数行

  • 1
  • 2
  • 3
  • 4
  • 5

space-around 複数行

  • 1
  • 2
  • 3
  • 4
  • 5

space-evenly 複数行

  • 1
  • 2
  • 3
  • 4
  • 5

start 複数行

  • 1
  • 2
  • 3
  • 4
  • 5

center 複数行

  • 1
  • 2
  • 3
  • 4
  • 5

# 参考