기초로 돌아가기: 우리는 Flexbox를 사용해야 합니까 아니면 Grid를 사용해야 합니까?

내가 처음으로 CSS를 배우기 시작했을 때, 나는 몇 가지 문제에 대답할 것이다.나는 개인적으로 당신이 CSS를 배우기 시작할 때 이것은 매우 어려울 것이라고 생각한다. 왜냐하면 CSS는 우리가 사용할 수 있는 약 520개의 속성이 있기 때문이다.물론, 우리는 그것을 전부 사용하지 않을 것이다. 많은 속성을 나는 여전히 모르지만, 많은 속성을 우리가 이해해야만 CSS에 정통할 수 있다.본 블로그는 CSS의 기본 기능을 소개하지 않지만, 이를 실현하는 것을 보여 드리겠습니다.

If you never have used flexbox or grid before, you can check this flexbox guide and grid guide from css-tricks.

질문:

When should we use flex or grid?

내가 처음으로 CSS를 배우고 flexbox와grid를 이해하기 시작했을 때, 나는 flexbox와grid를 언제 사용하는지 곤혹스러웠다.이 블로그에서, 나는 조건에 따라 flexbox와grid 사이에서 어떻게 선택하는지 설명하려고 한다.

Flex 사용 사례

나는 항상 flex를 사용하여 하나의 차원만 있는 레이아웃을 제공한다. (수평이나 수직만)이 블로그에서, 나는 너에게 flexbox용례의 예와 내가 한 항목들을 줄 것이다.

1. 모든 원소가 수평과 수직으로 가운데에 있는 용기

우리는 보통 로그인 페이지에서 이 점을 볼 수 있다
예:

이 레이아웃을 실현하기 위해서 우리는 3줄 CSS만 필요합니다. 이 조합을 기억하는 것을 권장합니다. 왜냐하면 당신은 많은 상황에서 그것을 사용하기 때문입니다.

.container {
  /*  make sure the parent element has height */
  min-height: 100vh;
  /* css to align vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* If you want to make a full-page,
make sure the container has a height of the viewport */

2. 페이지를 여러 부분으로 나눈다

이런 구조도 흔히 볼 수 있다. 보통 용기를 같은 폭의 두 부분으로 나누고 우리는 그것을 3, 4 또는 임의의 여러 부분으로 나눌 수 있다.
Codepen

이 레이아웃은 flex를 사용하여 쉽게 실현할 수 있습니다. HTML을 먼저 봅시다

<div class="container">
  <div class="content">
    <h1>Hello Bambang</h1>
    <p>welcome to my page</p>
    <button>click me</button>
  </div>
  <img class="content" src="https://unsplash.it/700/600" alt="unsplash" />
</div>

보시다시피 div.container에는 두 가지 프로젝트가 있는데 각각 div.content와 img.content이기 때문에 우리는 같은 부분의 구조를 만들 수 있다.

.container {
  min-height: 100vh;
  display: flex;
}

.content {
  /* this will make it divides in equal parts */
  width: 100%;

  /* you should use flex-basis for this, but flex-basis didn't really works on images, so I use width */
  /* flex-basis: 100%; */
  /* other tag like div works well tho! */
}

div.content {
  /* the first flexbox use case */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img.content {
  object-fit: cover;
}

사용width: 100%을 통해 우리는 하위 요소를 가능한 한 많은 공간을 차지하게 한다.그들은 모두 100%가 되고 싶어 타협해 50% 이상을 뛰어넘는다.

Keep note that you should replace width: 100% with flex-basis: 100% for IE compatibility purposes (credits to Ihor Vorotnov), but I specifically use width on this one because flex-basis did not really work with images. On other tag like div or headings it works okay.

우리도 너비나 탄력적인 기초 하드코딩을 50%로 할 수 있지만, 이 점을 추가하면 내용을 등분하는 목적을 실현할 수 없다. 왜냐하면 우리는 새로운 하위 항목을 추가할 때마다 백분율을 변경해야 하기 때문이다.

If we want to make a responsive design with this layout, we can utilize flex-direction

.container {
  min-height: 100vh;
  display: flex;
  /* add this to make the flex stacked vertically */
  flex-direction: column;
}

@media (min-width: 700px) {
  .container {
    flex-direction: row;
  }
}

따라서, 우리가 뷰를 이동할 때 flex는 수직으로 쌓이고, 더 큰 뷰포트에 들어갈 때, flex는 하위 요소를 수평으로 쌓는다. (코드 펜의 프레젠테이션 보기)

3. 탐색 표시줄 만들기(간격 사용)

Codepen
간단한 네비게이션 표시줄을 만드는 것은 보통 쉽다. 보통 레이아웃은 분리되고, 왼쪽은 로고, 오른쪽은 네비게이션이다.

<nav>
  <h3>Home</h3>
  <ul>
    <li>Route</li>
    <li>Route</li>
  </ul>
</nav>

nav에는 두 아이가 있는데 각각 h3과ul이다.다음에, 우리는 기본 양식을 초기화하고, 중간의 빈칸으로 분자 원소를 분해하기만 하면 된다

nav {
  background-color: lightblue;
  display: flex;
  align-items: center;

  /* this property will make the child spaced apart */
  justify-content: space-between;
}

ul {
  /* remove bullet style */
  list-style: none;
  display: flex;
}

ul > li + li {
  /* add space between navigation links */
  margin-left: 2em;
}

위의 모든 예는 실제로도 그물로 만들 수 있다.그러나 격자를 사용하면 flexbox를 사용하는 것보다 더 많은 CSS를 작성해야 합니다

격자 사용 예

Codepen
격자는 일반적으로 더 복잡한 레이아웃을 만드는 데 쓰인다.나의 결정 방식은 flex를 사용하는 것이 너무 어려우면 grid를 사용하는 것이다.

Layouting with flex actually can also be implemented for the complex layout, but using grid will be much easier.

1. 2차원 레이아웃 만들기

나는 보통 grid를 사용하여 이 레이아웃을 만듭니다. 왜냐하면 gap 기능이 그것들을 분리하기 때문입니다.만약 우리가 디자인을 더욱 호응적으로 하려고 한다면, flex를 사용하는 것은 더욱 어려울 것이다

이러한 레이아웃은 매우 쉬울 것이다. 만약 격자를 사용한다면, 우리는 그것을 두 열로 나누기만 하면 된다.

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
</div>

div.container 및 3div.item로 레이아웃 단순화

.container {
  /* container base layout */
  max-width: 700px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
}

.item {
  border: 0.2px solid white;
  height: 15em;
}

grid-template-columns: repeat(2, 1fr)를 사용하면 우리는 격자를 열을 둘로 나누는 것으로 설정하고 item는 우리가 설정한 규칙을 따를 것이다.마지막으로 공백을 만들기 위해 gap: 1em 를 추가합니다.

Grid will be very helpful in responsive design, we only need to change the rules on grid-tem to be 1 column when it is on smaller screen size, and make it to 2 columns in the larger screens

.container {
  /* container base layout */
  max-width: 700px;
  margin: 0 auto;

  display: grid;
  /* no need to add grid template, because grid defaults to 1 column */
  gap: 1em;
}

@media (min-width: 700px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

2. 다른 사이즈로 배치

Codepen

Firefox 개발 도구를 사용하여 메쉬 번호를 나타내는 선을 보는 것이 좋습니다.
우리는 4열 2행을 만들어서 이 레이아웃을 처리한 다음 요소마다 줄과 열의 위치를 지정합니다.예를 들어 첫 번째 사진은 두 열의 두 줄을 뛰어넘는다.만약 grid numbering system 의 설명을 이해하지 못하신다면, 이 항목을 검사해 주십시오.

<div class="container">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
</div>

우리는 .container를 부모 레벨로 사용하여 레이아웃을 간소화할 것이다.

.container {
  max-width: 700px;
  margin: 0 auto;

  display: grid;
  /* makes the grid into 4 columns and 2 rows */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.item {
  border: 1px solid white;
  min-height: 10rem;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 3 / 5;
}

/* you can also give value to item 3 and 4,
but because it follows the natural flow of the grid I won't continue */

For responsive design, we can put the image according to the rows and columns that we want, we can also change the template

요약

flex를 사용하면 너무 복잡해지면 격자를 사용하십시오

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀