수평, 수평한 in in 수평

0, 목적

BOX의 수평 정렬과 BOX in BOX의 수평 정렬을 자주 사용하므로 메모로 남겨 둡니다.

1-1, 수평 정렬

슬림

.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 수평 정렬

슬림

.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;
      }
    }
  }
}

Reference

이 문제에 관하여(수평, 수평한 in in 수평), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ko8@github/items/90d5c807deecdcb6ce65

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다