横並び、横並び in 横並び

8848 ワード
HTML CSS scss slim HTML テキストリンク

0、目的

BOXの横並びと、BOX in BOXの横並びをよく使用するのでメモとして残す

1-1、横並び

slim
.wrapper01
  ul.content
    li.box
      | box
    li.box
      | box
    li.box
      | box
scss
.wrapper01 {
  margin: 0 auto;
  background-color: #ccc;
  width: 400px;
  height: 400px;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-right: 8px;
      text-align: center;
      line-height: 100px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}

1-2、横並び in 横並び

slim
.wrapper02
  ul.content
    .content-box
      li.box
        | box
      li.box
        | box
      li.box
        | box
    .content-box
      li.box
        | box
      li.box
        | box
      li.box
        | box
    .content-box
      li.box
        | box
      li.box
        | box
      li.box
        | box
scss
.wrapper02 {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  background-color: #ccc;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    .content-box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-right: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      &:last-of-type {
        margin-right: 0;
      }
      .box {
        width: 25px;
        height: 25px;
        background-color: blue;
        text-align: left;
        font-size: 6px;
        margin: 0 2px;
        line-height: 25px;
        text-align: center;
      }
    }
  }
}