전문가처럼 CSS Flexbox를 사용하기 위해 알아야 할 모든 것

이 튜토리얼에서는 전문가처럼 CSS Flexbox를 사용하기 위해 알아야 할 모든 것을 설명합니다. 유연하고 반응이 빠른 방식으로 기본 및 고급 웹 사이트 레이아웃을 만드는 데 필요한 모든 Flexbox 도구입니다. CSS Flexbox 설명 – 유연한 컨테이너 및 Flex 항목에 대한 전체 가이드

CSS Flexbox는 유연하고 반응이 빠른 방식으로 기본 및 고급 웹사이트 레이아웃을 생성할 수 있는 도구를 제공합니다.

목차

1. 플렉스박스란?
2. 플렉스 컨테이너와 플렉스 항목: 차이점은 무엇입니까?
3. flexCSS에서 값 이란 무엇입니까 ?
4. inline-flexCSS에서 값 이란 무엇입니까 ?
5. Flexbox의 레이아웃을 지정하기 위한 속성
6. 유연한 컨테이너 속성은 무엇입니까?
7. Flexbox의 flex-direction속성은 무엇입니까?
8. Flexbox의 flex-wrap속성은 무엇입니까?
9. Flexbox의 flex-flow속성은 무엇입니까?
10. Flexbox의 justify-content속성은 무엇입니까?
11. Flexbox의 align-items속성은 무엇입니까?
12. Flexbox의 align-content속성은 무엇입니까?
13. 유연한 항목 속성은 무엇입니까?
14. Flexbox의 align-self속성은 무엇입니까?
15. Flexbox의 order속성은 무엇입니까?
16. Flexbox의 flex-grow속성은 무엇입니까?
17. Flexbox의 flex-shrink속성은 무엇입니까?
18. Flexbox의 flex-basis속성은 무엇입니까?
19. Flexbox의 flex속성은 무엇입니까?
20. Flexbox를 사용하여 요소를 가로로 중앙에 배치하는 방법
21. Flexbox를 사용하여 요소를 세로로 중앙에 배치하는 방법
22. Flexbox를 사용하여 요소를 수평 및 수직으로 중앙에 배치하는 방법
23. 개요

이제 더 이상 고민하지 않고 Flexbox가 무엇인지 이해해 봅시다.

---

플렉스박스란?

Flexbox는 브라우저가 선택한 HTML 요소를 유연한 상자 모델 로 표시하도록 합니다 .

Flexbox를 사용하면 유연한 컨테이너와 해당 항목의 크기를 쉽게 조정하고 위치를 1차원적으로 변경할 수 있습니다.

메모:

• "일차원적으로"는 Flexbox가 상자 모델을 한 번에 한 행 또는 열에 배치할 수 있음을 의미합니다. 즉, Flexbox는 상자 모델을 행과 열에 동시에 배치할 수 없습니다.
• Flexbox는 유연한 상자 레이아웃 모듈이라고도 합니다.
• 요소의 크기를 조정하고 2차원적으로 재배치해야 하는 경우 그리드 레이아웃 모듈을 사용하십시오 .

플렉스 컨테이너와 플렉스 항목: 차이점은 무엇입니까?

플렉스 컨테이너는 속성 값이 또는 인 HTML 요소 입니다 .displayflexinline-flex

플렉스 항목은 플렉스 컨테이너의 직계 자식입니다.

플렉스 컨테이너(이미지의 큰 노란색 영역)는 display 속성 값이 flex 또는 inline-flex인 HTML 요소입니다. 플렉스 항목(노란색 컨테이너 내의 작은 상자)은 플렉스 컨테이너의 직계 자식입니다.

CSS에서 값 이란 무엇입니까 ?flex

flex선택한 HTML 요소를 블록 수준의 유연한 상자 모델로 표시하도록 브라우저에 지시합니다.

즉, 요소의 display속성 값을 로 설정하면 flex상자 모델이 블록 수준의 가변 상자로 바뀝니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the flex value to convert the HTML document's <section> elements from regular <section> nodes to block-level flexible box models.

Note:

• Converting an HTML node to a flexible box model makes the element's direct children become flexible items.
• The display: flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Let's now discuss inline-flex.

What Is an inline-flex Value in CSS?

inline-flex tells browsers to display the selected HTML element as an inline-level flexible box model.

In other words, setting an element's display property's value to inline-flex turns the box model into an inline-level flexbox.

Here's an example:

section {
  display: inline-flex;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the inline-flex value to convert the HTML document's <section> elements from regular <section> nodes to inline-level flexible box models.

Note:

• Converting an HTML node to a flexible box model makes the element's direct children become flexible items.
• The display: inline-flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Properties for Specifying Flexbox's Layout

On converting a regular HTML element to a flex (or inline-flex) box model, Flexbox provides two categories of properties for positioning the flexible box and its direct children:

• Flexible containers properties
• Flexible items properties

What Are the Flexible Containers Properties?

A flexible container's properties specify how browsers should layout items within the flexible box model.

Note: We define a flexible container's property on the flex container, not its items.

The six (6) types of flex container properties are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Let's discuss the six types now.

What Is Flexbox's flex-direction Property?

flex-direction tells browsers the specific direction (row or column) they should lay out a flexible container's direct children.

In other words, flex-direction defines a flexbox's main axis.

A Flexbox's main axis is the layout orientation defined by a flex-direction property. Its cross axis is the perpendicular orientation to the main axis.

Here's an example:

section {
  display: flex;
  flex-direction: column;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above organized the flexible <section> containers' items in the column direction of your browser's default language.

Tip: Use flex-direction: column-reverse (or flex-direction: row-reverse) to reverse the browser's layout direction.

What Is Flexbox's flex-wrap Property?

flex-wrap specifies whether browsers should wrap overflown flexible items onto multiple lines.

The flex-wrap property accepts the following values:

• nowrap
• wrap
• wrap-reverse

Let's discuss the three values.

What is flex-wrap: nowrap in CSS flexbox?

nowrap is flex-wrap's default value. It forces all items within a flexible container into a single line (that is, row-wise or column-wise direction).

In other words, nowrap tells browsers not to wrap a flexible container's items.

Note: Suppose the total width (or height) of all the items in a flexible container is greater than the flexbox's width (or height). In such a case, nowrap will cause the elements to overflow out of the container.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: nowrap;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used nowrap to force browsers to lay out the flexible containers' items in a single line.

What is flex-wrap: wrap in CSS flexbox?

wrap moves all overflow items within a flexible container to the next line.

In other words, wrap tells browsers to wrap a flexible container's overflow items.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: wrap;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used wrap to wrap the flexible containers' overflow items to the next line.

What is flex-wrap: wrap-reverse in CSS flexbox?

wrap-reverse moves all overflow items within a flexible container to the next line in reverse order.

Note: wrap-reverse does the same thing as wrap—but in reverse order.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used wrap-reverse to wrap the flexible containers' overflow items to the next line in reverse order.

What Is Flexbox's flex-flow Property?

flex-flow is a shorthand for the flex-direction and flex-wrap properties.

In other words, instead of writing:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

You can alternatively use the flex-flow property to shorten your code like so:

section {
  display: flex;
  flex-flow: column wrap;
}

What Is Flexbox's justify-content Property?

justify-content specifies how browsers should position a flexible container's items along the flexbox's main axis.

The justify-content property accepts the following values:

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Let's discuss these six values.

What is justify-content: flex-start in CSS Flexbox?

flex-start is justify-content's default value. It aligns a flexible container's items with the main-start edge of the flexbox's main axis.

flex-start aligns a flexible container's items with the main-start side of the flexbox's main axis.

Here's an example:

section {
  display: flex;
  justify-content: flex-start;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the flex-start value to align the flexible container's items to the flexbox's main-start edge.

What is justify-content: center in CSS Flexbox?

center aligns a flexible container's items to the center of the flexbox's main axis.

center aligns a flexible container's items to the center of the flexbox's main axis.

Here's an example:

section {
  display: flex;
  justify-content: center;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the center value to align the flexible container's items to the center of the flexbox.

What is justify-content: flex-end in CSS Flexbox?

flex-end유연한 컨테이너의 항목을 flexbox 기본 축의 메인 엔드 측면에 맞춥니다.

flex-end는 유연한 컨테이너의 항목을 flexbox 기본 축의 메인 엔드 측면에 맞춥니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  justify-content: flex-end;
  background-color: orange;
  margin: 10px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flex-end유연한 컨테이너의 항목을 flexbox의 메인 엔드 쪽에 정렬했습니다.

CSS Flexbox에는 무엇이 있습니까 ?justify-content: space-between

space-between다음을 수행합니다.

• 유연한 컨테이너의 첫 번째 항목을 flexbox 기본 축의 기본 시작 가장자리와 정렬합니다.
• 컨테이너의 마지막 항목을 flexbox 주축의 주 끝 가장자리에 맞춥니다.
• 첫 번째 항목과 마지막 항목 사이의 각 항목 쌍 사이에 균일한 간격을 만듭니다.

space-between은 첫 번째 항목과 마지막 항목 사이의 각 항목 쌍 사이에 균일한 간격을 만듭니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  justify-content: space-between;
  background-color: orange;
  margin: 10px;
}

StackBlitz에서 사용해 보세요

The snippet above used the space-between value to create even spacing between each pair of items between the first and last flex item.

What is justify-content: space-around in CSS Flexbox?

space-around assigns equal spacing to each side of a flexible container's items.

Therefore, the space before the first item and after the last element is half the width of the space between each pair of elements.

space-around assigns equal spacing to each side of a flexible container's items.

Here's an example:

section {
  display: flex;
  justify-content: space-around;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the flexible container's items.

What is justify-content: space-evenly in CSS Flexbox?

space-evenly assigns even spacing to both ends of a flexible container and between its items.

space-evenly assigns even spacing to both ends of a flexible container and between its items.

Here's an example:

section {
  display: flex;
  justify-content: space-evenly;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the flexbox and between its items.

Let's now discuss the fifth type of flexible container property.

What Is Flexbox's align-items Property?

align-items specifies how browsers should position a flexible container's items along the cross-axis of the flexbox.

The align-items property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• baseline

Let's discuss the five values.

What is align-items: stretch in CSS Flexbox?

stretch is align-items' default value. It stretches a flexible container's items to fill the flexbox's cross-axis.

stretch stretches a flexible container's items to fill the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  align-items: stretch;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

위의 스니펫은 stretch값을 사용하여 유연한 항목을 늘려 의 <section>교차 축을 채웠습니다.

CSS Flexbox에는 무엇이 있습니까 ?align-items: flex-start

flex-start유연한 컨테이너의 항목을 flexbox 교차 축의 교차 시작 가장자리에 정렬합니다.

flex-start는 유연한 컨테이너의 항목을 flexbox 교차 축의 교차 시작 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: flex-start;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flex-start유연한 항목을 의 교차 축의 교차 시작 가장자리에 정렬했습니다 <section>.

CSS Flexbox에는 무엇이 있습니까 ?align-items: center

center유연한 컨테이너의 항목을 flexbox의 교차 축 중앙에 정렬합니다.

center는 유연한 컨테이너의 항목을 flexbox의 교차 축 중앙에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: center;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 이 값을 사용하여 유연한 항목을 의 교차 축 center중심에 맞춥니다 .<section>

CSS Flexbox에는 무엇이 있습니까 ?align-items: flex-end

flex-end유연한 컨테이너의 항목을 flexbox 교차 축의 교차 끝 가장자리에 맞춥니다.

flex-end는 유연한 컨테이너의 항목을 flexbox 교차 축의 교차 끝 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: flex-end;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flex-end유연한 항목을 의 교차 축의 교차 끝 가장자리에 정렬했습니다 <section>.

CSS Flexbox에는 무엇이 있습니까 ?align-items: baseline

baseline유연한 컨테이너의 항목을 flexbox의 교차축 기준선 에 맞춥니다.

기준선은 유연한 컨테이너의 항목을 가변 상자의 교차 축 기준선과 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: baseline;
  background-color: orange;
  margin: 10px;
}

StackBlitz에서 사용해 보세요

The snippet above used the baseline value to align the flexible items to the <section>'s baseline.

Now, let's talk about the sixth CSS flexible container property type.

What Is Flexbox's align-content Property?

align-content specifies how browsers should position a flexible container's lines along the flexbox's cross-axis.

Note: The align-content property does not affect a flexbox with only one line—for instance, a flexible container with flex-wrap: nowrap. In other words, align-content works only on flexboxes with multiple lines.

The align-content property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Let's discuss the seven values.

What is align-content: stretch in CSS Flexbox?

stretch is align-content's default value. It stretches the flexible container's lines to fill the flexbox's cross-axis.

stretch stretches the flexible container's lines to fill the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the flexbox's lines to fill the <section>'s cross-axis.

What is align-content: flex-start in CSS Flexbox?

flex-start aligns a flexible container's lines with the cross-start edge of the flexbox's cross-axis.

flex-start aligns a flexible container's lines with the cross-start edge of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

The snippet above used the flex-start value to align the flexbox's lines to the cross-start edge of the <section>'s cross-axis.

What is align-content: center in CSS Flexbox?

center유연한 컨테이너의 선을 flexbox의 교차 축 중심에 맞춥니다.

center는 유연한 컨테이너의 선을 flexbox의 교차 축 중심에 맞춥니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flexbox의 선을 의 교차 축 center중심에 정렬했습니다 .<section>

CSS Flexbox에는 무엇이 있습니까 ?align-content: flex-end

flex-end유연한 컨테이너의 선을 flexbox의 교차 축의 교차 끝 가장자리에 맞춥니다.

flex-end는 유연한 컨테이너의 선을 flexbox 교차축의 교차 끝 가장자리와 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flex-endflexbox의 선을 의 교차 축의 교차 끝 가장자리에 정렬했습니다 <section>.

CSS Flexbox에는 무엇이 있습니까 ?align-content: space-between

space-between다음을 수행합니다.

• flexbox의 첫 번째 줄을 유연한 컨테이너의 기본 축의 기본 시작 가장자리에 맞춥니다.
• 플렉서블 컨테이너의 메인 축의 메인 엔드 면과 플랙스박스의 마지막 줄을 정렬합니다.
• 첫 번째 줄과 마지막 줄 사이의 각 줄 쌍 사이에 동일한 간격을 만듭니다.

space-between은 첫 번째 줄과 마지막 줄 사이의 각 줄 쌍 사이에 동일한 간격을 만듭니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 space-between값을 사용하여 첫 번째 줄과 마지막 줄 사이의 각 줄 쌍 사이에 동일한 간격을 만들었습니다.

CSS Flexbox에는 무엇이 있습니까 ?align-content: space-around

space-around유연한 컨테이너 줄의 각 면에 동일한 간격을 할당합니다.

따라서 첫 번째 줄 앞과 마지막 줄 뒤의 간격은 각 줄 쌍 사이의 간격 너비의 절반입니다.

space-around는 유연한 컨테이너 행의 각 측면에 동일한 간격을 할당합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

StackBlitz에서 사용해 보세요

The snippet above used the space-around value to assign equal spacing to each side of the flexible container's lines.

What is align-content: space-evenly in CSS Flexbox?

space-evenly assigns even spacing to both ends of a flexible container and between its lines.

space-evenly assigns even spacing to both ends of a flexible container and between its lines.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the flexbox and between its lines.

So, now that we know the types of CSS flexible container properties, we can discuss the flex item properties.

What Are the Flexible Item's Properties?

A flexible item's properties specify how browsers should layout a specified item within the flexible box model.

Note: We define a flexible item's property on the flex item, not its container.

The six (6) types of flex item properties are:

• align-self
• order
• flex-grow
• flex-shrink
• flex-basis
• flex

Let's discuss the six types now.

What Is Flexbox's align-self Property?

align-self specifies how browsers should position selected flexible items along the flexbox's cross-axis.

Note:

• align-self affects only the selected flexible item—not all the flexbox's items.
• align-self overrides the align-items property.

The align-self property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• baseline

Let's discuss the five values.

What is align-self: stretch in CSS Flexbox?

stretch stretches the selected flexible items to fill the flexbox's cross-axis.

stretch stretches the selected flexible item(s) to fill the flexbox's cross-axis.

Here's an example:

.flex-item2 {
  align-self: stretch;
}

StackBlitz에서 사용해 보세요

컨테이너의 교차 축을 채우기 위해 stretch늘이는 값을 사용했습니다 .flex-item2

CSS Flexbox에는 무엇이 있습니까 ?align-self: flex-start

flex-start선택한 유연한 항목을 flexbox 교차 축의 교차 시작 가장자리에 맞춥니다.

flex-start는 선택된 유연한 항목을 flexbox 교차축의 교차 시작 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

.flex-item2 {
  align-self: flex-start;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 값을 사용하여 컨테이너 교차 축의 교차 시작 가장자리에 flex-start정렬했습니다 .flex-item2

CSS Flexbox에는 무엇이 있습니까 ?align-self: center

center선택한 유연한 항목을 flexbox의 교차 축 중앙에 정렬합니다.

center는 선택된 유연한 항목을 flexbox의 교차축 중앙에 정렬합니다.

예를 들면 다음과 같습니다.

.flex-item2 {
  align-self: center;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 값을 사용하여 컨테이너의 교차 축 중심에 center정렬했습니다 .flex-item2

CSS Flexbox에는 무엇이 있습니까 ?align-self: flex-end

flex-end선택한 유연한 항목을 flexbox 교차축의 교차 끝 가장자리에 맞춥니다.

flex-end는 선택된 유연한 항목을 flexbox 교차축의 교차 끝 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

.flex-item2 {
  align-self: flex-end;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 값을 사용하여 컨테이너 교차 축의 교차 끝 가장자리에 flex-end정렬했습니다 .flex-item2

CSS Flexbox에는 무엇이 있습니까 ?align-self: baseline

baseline선택한 유연한 항목을 flexbox 교차축의 기준선 에 맞춥니다.

예를 들면 다음과 같습니다.

.flex-item2 {
  font-size: 3rem;
  align-self: baseline;
}

StackBlitz에서 사용해 보세요

값을 사용하여 해당 컨테이너의 기준선에 baseline맞췄습니다 .flex-item2

이제 유연한 항목 속성의 두 번째 유형에 대해 설명하겠습니다.

Flexbox의 order속성은 무엇입니까?

order는 유연한 항목의 기본 순서(배열)를 변경합니다.

In other words, order allows you to reposition a flexbox's item without altering your HTML code's layout.

Here's an example:

<ul style="display: flex; flex-direction: column">
  <li style="order: 6">1</li>
  <li style="order: 4">2</li>
  <li style="order: 1">3</li>
  <li style="order: 7">4</li>
  <li style="order: 2">5</li>
  <li style="order: 5">6</li>
  <li style="order: 3">7</li>
</ul>

Try it on StackBlitz

The HTML snippet above used the order property to change the unordered list's arrangement.

So, instead of the following order:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

The browser will display this:

• 3
• 5
• 7
• 2
• 6
• 1
• 4

Use the order property with caution, as it prevents screen readers from accessing the correct reading order of an HTML document. Only use it if it is super important to use CSS to change the HTML code's layout.

But in most cases, it is best to rearrange the HTML code directly rather than using CSS.

Note: The style="value" syntax, in the HTML snippet above, is the inline CSS technique for styling HTML elements.

What Is Flexbox's flex-grow Property?

flex-grow tells browsers how much of the flexbox's left-over space they should add to the selected flexible item's size.

Note: A left-over space refers to the space remaining after browsers have deducted the sum of all flexible items' sizes from the flexbox's size.

Here's an example:

.flex-item3 {
  flex-grow: 0.5;
}

<section>
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
  <div class="flex-item4">4</div>
</section>

Try it on StackBlitz

We used the flex-grow property to make browsers add half of <section>'s left-over space to flex-item3's size.

Note: flex-grow's default value is 0.

What Is Flexbox's flex-shrink Property?

flex-shrink tells browsers how much the specified flexible item should shrink when the sum of all items' sizes exceeds the flexbox's size.

즉, flexbox의 크기가 유연한 항목에 맞지 않는다고 가정합니다. 이 경우 브라우저는 컨테이너에 맞게 항목을 축소합니다.

따라서 flex-shrink유연한 항목의 수축 계수를 지정할 수 있습니다.

예를 들면 다음과 같습니다.

.flex-item3 {
  flex-shrink: 0;
}

StackBlitz에서 사용해 보세요

flex-shrink브라우저가 축소되는 것을 방지하기 위해 이 속성을 사용했습니다 flex-item3.

메모:

• flex-shrink브라우저는 값이 .인 유연한 항목을 축소하지 않습니다 0.
• flex-shrink의 기본값은 입니다 1.

Flexbox의 flex-basis속성은 무엇입니까?

flex-basis는 유연한 항목의 초기 길이를 설정합니다.

예를 들면 다음과 같습니다.

.flex-item3 {
  flex-basis: 100px;
}

StackBlitz에서 사용해 보세요

속성을 사용하여 의 초기 길이를 로 flex-basis설정했습니다 .flex-item3100px

다음 사항에 유의하십시오.

• autoflex-basis는 '기본값 입니다 .
• 값 flex-basis(이외 )은 (또는 ) auto보다 특이성이 높습니다 . 따라서 유연한 항목에 대해 둘 다 정의한다고 가정합니다. 이 경우 브라우저는 .widthheightflex-basis
• 이 속성은 콘텐츠 상자 의 초기 너비를 flex-basis설정합니다 . 그러나 box-sizing 속성을 사용하여 테두리 상자 의 너비를 대신 설정할 수 있습니다 .

Flexbox의 flex속성은 무엇입니까?

flexflex-grow 는 , flex-shrink및 속성 의 줄임말입니다 flex-basis.

즉, 다음과 같이 작성하는 대신

.flex-item3 {
  flex-grow: 0.5;
  flex-shrink: 0;
  flex-basis: 100px;
}

flex또는 다음과 같이 속성을 사용하여 코드를 줄일 수 있습니다 .

.flex-item3 {
  flex: 0.5 0 100px;
}

다음 사항에 유의하십시오.

• flex: auto에 해당합니다 flex: 1 1 auto.
• flex: none에 해당합니다 flex: 0 0 auto.
• flex: initialflex속성을 기본값으로 설정합니다 . 와 동일합니다 flex: 0 1 auto.
• flex: inherit부모 요소의 flex속성 값을 상속합니다.

이제 개발자가 유연한 상자와 그 직계 자식을 배치하는 데 사용하는 flexbox 속성을 알았으므로 flexbox로 요소를 중앙에 배치하는 방법에 대해 논의할 수 있습니다.

Flexbox를 사용하여 요소를 가로로 중앙에 배치하는 방법

다음과 같이 컨테이너 내에서 모든 요소를 ​​가로로 중앙에 배치할 수 있습니다.

• 컨테이너 display속성을 다음으로 설정flex
• 유연한 컨테이너의 justify-content속성을 다음으로 설정center

예를 들면 다음과 같습니다.

section {
  display: flex;
  justify-content: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

StackBlitz에서 사용해 보세요

Flexbox를 사용하여 요소를 세로로 중앙에 배치하는 방법

다음과 같이 컨테이너 내에서 모든 요소를 ​​수직으로 중앙에 배치할 수 있습니다.

• 컨테이너 display속성을 다음으로 설정flex
• 유연한 컨테이너의 align-items속성을 다음으로 설정center

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

StackBlitz에서 사용해 보세요

Flexbox를 사용하여 요소를 수평 및 수직으로 중앙에 배치하는 방법

다음을 수행하여 HTML 요소를 해당 컨테이너 내에서 수평 및 수직으로 중앙에 배치할 수 있습니다.

• 컨테이너 display속성을 다음으로 설정flex
• 유연한 컨테이너 justify-content및 align-items속성을 다음으로 설정center

예를 들면 다음과 같습니다.

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

StackBlitz에서 사용해 보세요

개요

이 기사에서는 유연하고 반응이 빠른 방식으로 기본 및 고급 웹 사이트 레이아웃을 만드는 데 필요한 모든 Flexbox 도구에 대해 논의했습니다.

읽어 주셔서 감사합니다!

출처: https://www.freecodecamp.org

#css

What is GEEK

Buddha Community

전문가처럼 CSS Flexbox를 사용하기 위해 알아야 할 모든 것

이 튜토리얼에서는 전문가처럼 CSS Flexbox를 사용하기 위해 알아야 할 모든 것을 설명합니다. 유연하고 반응이 빠른 방식으로 기본 및 고급 웹 사이트 레이아웃을 만드는 데 필요한 모든 Flexbox 도구입니다. CSS Flexbox 설명 – 유연한 컨테이너 및 Flex 항목에 대한 전체 가이드

CSS Flexbox는 유연하고 반응이 빠른 방식으로 기본 및 고급 웹사이트 레이아웃을 생성할 수 있는 도구를 제공합니다.

목차

1. 플렉스박스란?
2. 플렉스 컨테이너와 플렉스 항목: 차이점은 무엇입니까?
3. flexCSS에서 값 이란 무엇입니까 ?
4. inline-flexCSS에서 값 이란 무엇입니까 ?
5. Flexbox의 레이아웃을 지정하기 위한 속성
6. 유연한 컨테이너 속성은 무엇입니까?
7. Flexbox의 flex-direction속성은 무엇입니까?
8. Flexbox의 flex-wrap속성은 무엇입니까?
9. Flexbox의 flex-flow속성은 무엇입니까?
10. Flexbox의 justify-content속성은 무엇입니까?
11. Flexbox의 align-items속성은 무엇입니까?
12. Flexbox의 align-content속성은 무엇입니까?
13. 유연한 항목 속성은 무엇입니까?
14. Flexbox의 align-self속성은 무엇입니까?
15. Flexbox의 order속성은 무엇입니까?
16. Flexbox의 flex-grow속성은 무엇입니까?
17. Flexbox의 flex-shrink속성은 무엇입니까?
18. Flexbox의 flex-basis속성은 무엇입니까?
19. Flexbox의 flex속성은 무엇입니까?
20. Flexbox를 사용하여 요소를 가로로 중앙에 배치하는 방법
21. Flexbox를 사용하여 요소를 세로로 중앙에 배치하는 방법
22. Flexbox를 사용하여 요소를 수평 및 수직으로 중앙에 배치하는 방법
23. 개요

이제 더 이상 고민하지 않고 Flexbox가 무엇인지 이해해 봅시다.

---

플렉스박스란?

Flexbox는 브라우저가 선택한 HTML 요소를 유연한 상자 모델 로 표시하도록 합니다 .

Flexbox를 사용하면 유연한 컨테이너와 해당 항목의 크기를 쉽게 조정하고 위치를 1차원적으로 변경할 수 있습니다.

메모:

• "일차원적으로"는 Flexbox가 상자 모델을 한 번에 한 행 또는 열에 배치할 수 있음을 의미합니다. 즉, Flexbox는 상자 모델을 행과 열에 동시에 배치할 수 없습니다.
• Flexbox는 유연한 상자 레이아웃 모듈이라고도 합니다.
• 요소의 크기를 조정하고 2차원적으로 재배치해야 하는 경우 그리드 레이아웃 모듈을 사용하십시오 .

플렉스 컨테이너와 플렉스 항목: 차이점은 무엇입니까?

플렉스 컨테이너는 속성 값이 또는 인 HTML 요소 입니다 .displayflexinline-flex

플렉스 항목은 플렉스 컨테이너의 직계 자식입니다.

플렉스 컨테이너(이미지의 큰 노란색 영역)는 display 속성 값이 flex 또는 inline-flex인 HTML 요소입니다. 플렉스 항목(노란색 컨테이너 내의 작은 상자)은 플렉스 컨테이너의 직계 자식입니다.

CSS에서 값 이란 무엇입니까 ?flex

flex선택한 HTML 요소를 블록 수준의 유연한 상자 모델로 표시하도록 브라우저에 지시합니다.

즉, 요소의 display속성 값을 로 설정하면 flex상자 모델이 블록 수준의 가변 상자로 바뀝니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the flex value to convert the HTML document's <section> elements from regular <section> nodes to block-level flexible box models.

Note:

• Converting an HTML node to a flexible box model makes the element's direct children become flexible items.
• The display: flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Let's now discuss inline-flex.

What Is an inline-flex Value in CSS?

inline-flex tells browsers to display the selected HTML element as an inline-level flexible box model.

In other words, setting an element's display property's value to inline-flex turns the box model into an inline-level flexbox.

Here's an example:

section {
  display: inline-flex;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the inline-flex value to convert the HTML document's <section> elements from regular <section> nodes to inline-level flexible box models.

Note:

• Converting an HTML node to a flexible box model makes the element's direct children become flexible items.
• The display: inline-flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Properties for Specifying Flexbox's Layout

On converting a regular HTML element to a flex (or inline-flex) box model, Flexbox provides two categories of properties for positioning the flexible box and its direct children:

• Flexible containers properties
• Flexible items properties

What Are the Flexible Containers Properties?

A flexible container's properties specify how browsers should layout items within the flexible box model.

Note: We define a flexible container's property on the flex container, not its items.

The six (6) types of flex container properties are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Let's discuss the six types now.

What Is Flexbox's flex-direction Property?

flex-direction tells browsers the specific direction (row or column) they should lay out a flexible container's direct children.

In other words, flex-direction defines a flexbox's main axis.

A Flexbox's main axis is the layout orientation defined by a flex-direction property. Its cross axis is the perpendicular orientation to the main axis.

Here's an example:

section {
  display: flex;
  flex-direction: column;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above organized the flexible <section> containers' items in the column direction of your browser's default language.

Tip: Use flex-direction: column-reverse (or flex-direction: row-reverse) to reverse the browser's layout direction.

What Is Flexbox's flex-wrap Property?

flex-wrap specifies whether browsers should wrap overflown flexible items onto multiple lines.

The flex-wrap property accepts the following values:

• nowrap
• wrap
• wrap-reverse

Let's discuss the three values.

What is flex-wrap: nowrap in CSS flexbox?

nowrap is flex-wrap's default value. It forces all items within a flexible container into a single line (that is, row-wise or column-wise direction).

In other words, nowrap tells browsers not to wrap a flexible container's items.

Note: Suppose the total width (or height) of all the items in a flexible container is greater than the flexbox's width (or height). In such a case, nowrap will cause the elements to overflow out of the container.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: nowrap;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used nowrap to force browsers to lay out the flexible containers' items in a single line.

What is flex-wrap: wrap in CSS flexbox?

wrap moves all overflow items within a flexible container to the next line.

In other words, wrap tells browsers to wrap a flexible container's overflow items.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: wrap;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used wrap to wrap the flexible containers' overflow items to the next line.

What is flex-wrap: wrap-reverse in CSS flexbox?

wrap-reverse moves all overflow items within a flexible container to the next line in reverse order.

Note: wrap-reverse does the same thing as wrap—but in reverse order.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used wrap-reverse to wrap the flexible containers' overflow items to the next line in reverse order.

What Is Flexbox's flex-flow Property?

flex-flow is a shorthand for the flex-direction and flex-wrap properties.

In other words, instead of writing:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

You can alternatively use the flex-flow property to shorten your code like so:

section {
  display: flex;
  flex-flow: column wrap;
}

What Is Flexbox's justify-content Property?

justify-content specifies how browsers should position a flexible container's items along the flexbox's main axis.

The justify-content property accepts the following values:

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Let's discuss these six values.

What is justify-content: flex-start in CSS Flexbox?

flex-start is justify-content's default value. It aligns a flexible container's items with the main-start edge of the flexbox's main axis.

flex-start aligns a flexible container's items with the main-start side of the flexbox's main axis.

Here's an example:

section {
  display: flex;
  justify-content: flex-start;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the flex-start value to align the flexible container's items to the flexbox's main-start edge.

What is justify-content: center in CSS Flexbox?

center aligns a flexible container's items to the center of the flexbox's main axis.

center aligns a flexible container's items to the center of the flexbox's main axis.

Here's an example:

section {
  display: flex;
  justify-content: center;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the center value to align the flexible container's items to the center of the flexbox.

What is justify-content: flex-end in CSS Flexbox?

flex-end유연한 컨테이너의 항목을 flexbox 기본 축의 메인 엔드 측면에 맞춥니다.

flex-end는 유연한 컨테이너의 항목을 flexbox 기본 축의 메인 엔드 측면에 맞춥니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  justify-content: flex-end;
  background-color: orange;
  margin: 10px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flex-end유연한 컨테이너의 항목을 flexbox의 메인 엔드 쪽에 정렬했습니다.

CSS Flexbox에는 무엇이 있습니까 ?justify-content: space-between

space-between다음을 수행합니다.

• 유연한 컨테이너의 첫 번째 항목을 flexbox 기본 축의 기본 시작 가장자리와 정렬합니다.
• 컨테이너의 마지막 항목을 flexbox 주축의 주 끝 가장자리에 맞춥니다.
• 첫 번째 항목과 마지막 항목 사이의 각 항목 쌍 사이에 균일한 간격을 만듭니다.

space-between은 첫 번째 항목과 마지막 항목 사이의 각 항목 쌍 사이에 균일한 간격을 만듭니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  justify-content: space-between;
  background-color: orange;
  margin: 10px;
}

StackBlitz에서 사용해 보세요

The snippet above used the space-between value to create even spacing between each pair of items between the first and last flex item.

What is justify-content: space-around in CSS Flexbox?

space-around assigns equal spacing to each side of a flexible container's items.

Therefore, the space before the first item and after the last element is half the width of the space between each pair of elements.

space-around assigns equal spacing to each side of a flexible container's items.

Here's an example:

section {
  display: flex;
  justify-content: space-around;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the flexible container's items.

What is justify-content: space-evenly in CSS Flexbox?

space-evenly assigns even spacing to both ends of a flexible container and between its items.

space-evenly assigns even spacing to both ends of a flexible container and between its items.

Here's an example:

section {
  display: flex;
  justify-content: space-evenly;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the flexbox and between its items.

Let's now discuss the fifth type of flexible container property.

What Is Flexbox's align-items Property?

align-items specifies how browsers should position a flexible container's items along the cross-axis of the flexbox.

The align-items property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• baseline

Let's discuss the five values.

What is align-items: stretch in CSS Flexbox?

stretch is align-items' default value. It stretches a flexible container's items to fill the flexbox's cross-axis.

stretch stretches a flexible container's items to fill the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  align-items: stretch;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

위의 스니펫은 stretch값을 사용하여 유연한 항목을 늘려 의 <section>교차 축을 채웠습니다.

CSS Flexbox에는 무엇이 있습니까 ?align-items: flex-start

flex-start유연한 컨테이너의 항목을 flexbox 교차 축의 교차 시작 가장자리에 정렬합니다.

flex-start는 유연한 컨테이너의 항목을 flexbox 교차 축의 교차 시작 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: flex-start;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flex-start유연한 항목을 의 교차 축의 교차 시작 가장자리에 정렬했습니다 <section>.

CSS Flexbox에는 무엇이 있습니까 ?align-items: center

center유연한 컨테이너의 항목을 flexbox의 교차 축 중앙에 정렬합니다.

center는 유연한 컨테이너의 항목을 flexbox의 교차 축 중앙에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: center;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 이 값을 사용하여 유연한 항목을 의 교차 축 center중심에 맞춥니다 .<section>

CSS Flexbox에는 무엇이 있습니까 ?align-items: flex-end

flex-end유연한 컨테이너의 항목을 flexbox 교차 축의 교차 끝 가장자리에 맞춥니다.

flex-end는 유연한 컨테이너의 항목을 flexbox 교차 축의 교차 끝 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: flex-end;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flex-end유연한 항목을 의 교차 축의 교차 끝 가장자리에 정렬했습니다 <section>.

CSS Flexbox에는 무엇이 있습니까 ?align-items: baseline

baseline유연한 컨테이너의 항목을 flexbox의 교차축 기준선 에 맞춥니다.

기준선은 유연한 컨테이너의 항목을 가변 상자의 교차 축 기준선과 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: baseline;
  background-color: orange;
  margin: 10px;
}

StackBlitz에서 사용해 보세요

The snippet above used the baseline value to align the flexible items to the <section>'s baseline.

Now, let's talk about the sixth CSS flexible container property type.

What Is Flexbox's align-content Property?

align-content specifies how browsers should position a flexible container's lines along the flexbox's cross-axis.

Note: The align-content property does not affect a flexbox with only one line—for instance, a flexible container with flex-wrap: nowrap. In other words, align-content works only on flexboxes with multiple lines.

The align-content property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Let's discuss the seven values.

What is align-content: stretch in CSS Flexbox?

stretch is align-content's default value. It stretches the flexible container's lines to fill the flexbox's cross-axis.

stretch stretches the flexible container's lines to fill the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the flexbox's lines to fill the <section>'s cross-axis.

What is align-content: flex-start in CSS Flexbox?

flex-start aligns a flexible container's lines with the cross-start edge of the flexbox's cross-axis.

flex-start aligns a flexible container's lines with the cross-start edge of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

The snippet above used the flex-start value to align the flexbox's lines to the cross-start edge of the <section>'s cross-axis.

What is align-content: center in CSS Flexbox?

center유연한 컨테이너의 선을 flexbox의 교차 축 중심에 맞춥니다.

center는 유연한 컨테이너의 선을 flexbox의 교차 축 중심에 맞춥니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flexbox의 선을 의 교차 축 center중심에 정렬했습니다 .<section>

CSS Flexbox에는 무엇이 있습니까 ?align-content: flex-end

flex-end유연한 컨테이너의 선을 flexbox의 교차 축의 교차 끝 가장자리에 맞춥니다.

flex-end는 유연한 컨테이너의 선을 flexbox 교차축의 교차 끝 가장자리와 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

StackBlitz에서 사용해 보세요

이 값을 사용하여 flex-endflexbox의 선을 의 교차 축의 교차 끝 가장자리에 정렬했습니다 <section>.

CSS Flexbox에는 무엇이 있습니까 ?align-content: space-between

space-between다음을 수행합니다.

• flexbox의 첫 번째 줄을 유연한 컨테이너의 기본 축의 기본 시작 가장자리에 맞춥니다.
• 플렉서블 컨테이너의 메인 축의 메인 엔드 면과 플랙스박스의 마지막 줄을 정렬합니다.
• 첫 번째 줄과 마지막 줄 사이의 각 줄 쌍 사이에 동일한 간격을 만듭니다.

space-between은 첫 번째 줄과 마지막 줄 사이의 각 줄 쌍 사이에 동일한 간격을 만듭니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 space-between값을 사용하여 첫 번째 줄과 마지막 줄 사이의 각 줄 쌍 사이에 동일한 간격을 만들었습니다.

CSS Flexbox에는 무엇이 있습니까 ?align-content: space-around

space-around유연한 컨테이너 줄의 각 면에 동일한 간격을 할당합니다.

따라서 첫 번째 줄 앞과 마지막 줄 뒤의 간격은 각 줄 쌍 사이의 간격 너비의 절반입니다.

space-around는 유연한 컨테이너 행의 각 측면에 동일한 간격을 할당합니다.

예를 들면 다음과 같습니다.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

StackBlitz에서 사용해 보세요

The snippet above used the space-around value to assign equal spacing to each side of the flexible container's lines.

What is align-content: space-evenly in CSS Flexbox?

space-evenly assigns even spacing to both ends of a flexible container and between its lines.

space-evenly assigns even spacing to both ends of a flexible container and between its lines.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the flexbox and between its lines.

So, now that we know the types of CSS flexible container properties, we can discuss the flex item properties.

What Are the Flexible Item's Properties?

A flexible item's properties specify how browsers should layout a specified item within the flexible box model.

Note: We define a flexible item's property on the flex item, not its container.

The six (6) types of flex item properties are:

• align-self
• order
• flex-grow
• flex-shrink
• flex-basis
• flex

Let's discuss the six types now.

What Is Flexbox's align-self Property?

align-self specifies how browsers should position selected flexible items along the flexbox's cross-axis.

Note:

• align-self affects only the selected flexible item—not all the flexbox's items.
• align-self overrides the align-items property.

The align-self property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• baseline

Let's discuss the five values.

What is align-self: stretch in CSS Flexbox?

stretch stretches the selected flexible items to fill the flexbox's cross-axis.

stretch stretches the selected flexible item(s) to fill the flexbox's cross-axis.

Here's an example:

.flex-item2 {
  align-self: stretch;
}

StackBlitz에서 사용해 보세요

컨테이너의 교차 축을 채우기 위해 stretch늘이는 값을 사용했습니다 .flex-item2

CSS Flexbox에는 무엇이 있습니까 ?align-self: flex-start

flex-start선택한 유연한 항목을 flexbox 교차 축의 교차 시작 가장자리에 맞춥니다.

flex-start는 선택된 유연한 항목을 flexbox 교차축의 교차 시작 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

.flex-item2 {
  align-self: flex-start;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 값을 사용하여 컨테이너 교차 축의 교차 시작 가장자리에 flex-start정렬했습니다 .flex-item2

CSS Flexbox에는 무엇이 있습니까 ?align-self: center

center선택한 유연한 항목을 flexbox의 교차 축 중앙에 정렬합니다.

center는 선택된 유연한 항목을 flexbox의 교차축 중앙에 정렬합니다.

예를 들면 다음과 같습니다.

.flex-item2 {
  align-self: center;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 값을 사용하여 컨테이너의 교차 축 중심에 center정렬했습니다 .flex-item2

CSS Flexbox에는 무엇이 있습니까 ?align-self: flex-end

flex-end선택한 유연한 항목을 flexbox 교차축의 교차 끝 가장자리에 맞춥니다.

flex-end는 선택된 유연한 항목을 flexbox 교차축의 교차 끝 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

.flex-item2 {
  align-self: flex-end;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 값을 사용하여 컨테이너 교차 축의 교차 끝 가장자리에 flex-end정렬했습니다 .flex-item2

CSS Flexbox에는 무엇이 있습니까 ?align-self: baseline

baseline선택한 유연한 항목을 flexbox 교차축의 기준선 에 맞춥니다.

예를 들면 다음과 같습니다.

.flex-item2 {
  font-size: 3rem;
  align-self: baseline;
}

StackBlitz에서 사용해 보세요

값을 사용하여 해당 컨테이너의 기준선에 baseline맞췄습니다 .flex-item2

이제 유연한 항목 속성의 두 번째 유형에 대해 설명하겠습니다.

Flexbox의 order속성은 무엇입니까?

order는 유연한 항목의 기본 순서(배열)를 변경합니다.

In other words, order allows you to reposition a flexbox's item without altering your HTML code's layout.

Here's an example:

<ul style="display: flex; flex-direction: column">
  <li style="order: 6">1</li>
  <li style="order: 4">2</li>
  <li style="order: 1">3</li>
  <li style="order: 7">4</li>
  <li style="order: 2">5</li>
  <li style="order: 5">6</li>
  <li style="order: 3">7</li>
</ul>

Try it on StackBlitz

The HTML snippet above used the order property to change the unordered list's arrangement.

So, instead of the following order:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

The browser will display this:

• 3
• 5
• 7
• 2
• 6
• 1
• 4

Use the order property with caution, as it prevents screen readers from accessing the correct reading order of an HTML document. Only use it if it is super important to use CSS to change the HTML code's layout.

But in most cases, it is best to rearrange the HTML code directly rather than using CSS.

Note: The style="value" syntax, in the HTML snippet above, is the inline CSS technique for styling HTML elements.

What Is Flexbox's flex-grow Property?

flex-grow tells browsers how much of the flexbox's left-over space they should add to the selected flexible item's size.

Note: A left-over space refers to the space remaining after browsers have deducted the sum of all flexible items' sizes from the flexbox's size.

Here's an example:

.flex-item3 {
  flex-grow: 0.5;
}

<section>
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
  <div class="flex-item4">4</div>
</section>

Try it on StackBlitz

We used the flex-grow property to make browsers add half of <section>'s left-over space to flex-item3's size.

Note: flex-grow's default value is 0.

What Is Flexbox's flex-shrink Property?

flex-shrink tells browsers how much the specified flexible item should shrink when the sum of all items' sizes exceeds the flexbox's size.

즉, flexbox의 크기가 유연한 항목에 맞지 않는다고 가정합니다. 이 경우 브라우저는 컨테이너에 맞게 항목을 축소합니다.

따라서 flex-shrink유연한 항목의 수축 계수를 지정할 수 있습니다.

예를 들면 다음과 같습니다.

.flex-item3 {
  flex-shrink: 0;
}

StackBlitz에서 사용해 보세요

flex-shrink브라우저가 축소되는 것을 방지하기 위해 이 속성을 사용했습니다 flex-item3.

메모:

• flex-shrink브라우저는 값이 .인 유연한 항목을 축소하지 않습니다 0.
• flex-shrink의 기본값은 입니다 1.

Flexbox의 flex-basis속성은 무엇입니까?

flex-basis는 유연한 항목의 초기 길이를 설정합니다.

예를 들면 다음과 같습니다.

.flex-item3 {
  flex-basis: 100px;
}

StackBlitz에서 사용해 보세요

속성을 사용하여 의 초기 길이를 로 flex-basis설정했습니다 .flex-item3100px

다음 사항에 유의하십시오.

• autoflex-basis는 '기본값 입니다 .
• 값 flex-basis(이외 )은 (또는 ) auto보다 특이성이 높습니다 . 따라서 유연한 항목에 대해 둘 다 정의한다고 가정합니다. 이 경우 브라우저는 .widthheightflex-basis
• 이 속성은 콘텐츠 상자 의 초기 너비를 flex-basis설정합니다 . 그러나 box-sizing 속성을 사용하여 테두리 상자 의 너비를 대신 설정할 수 있습니다 .

Flexbox의 flex속성은 무엇입니까?

flexflex-grow 는 , flex-shrink및 속성 의 줄임말입니다 flex-basis.

즉, 다음과 같이 작성하는 대신

.flex-item3 {
  flex-grow: 0.5;
  flex-shrink: 0;
  flex-basis: 100px;
}

flex또는 다음과 같이 속성을 사용하여 코드를 줄일 수 있습니다 .

.flex-item3 {
  flex: 0.5 0 100px;
}

다음 사항에 유의하십시오.

• flex: auto에 해당합니다 flex: 1 1 auto.
• flex: none에 해당합니다 flex: 0 0 auto.
• flex: initialflex속성을 기본값으로 설정합니다 . 와 동일합니다 flex: 0 1 auto.
• flex: inherit부모 요소의 flex속성 값을 상속합니다.

이제 개발자가 유연한 상자와 그 직계 자식을 배치하는 데 사용하는 flexbox 속성을 알았으므로 flexbox로 요소를 중앙에 배치하는 방법에 대해 논의할 수 있습니다.

Flexbox를 사용하여 요소를 가로로 중앙에 배치하는 방법

다음과 같이 컨테이너 내에서 모든 요소를 ​​가로로 중앙에 배치할 수 있습니다.

• 컨테이너 display속성을 다음으로 설정flex
• 유연한 컨테이너의 justify-content속성을 다음으로 설정center

예를 들면 다음과 같습니다.

section {
  display: flex;
  justify-content: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

StackBlitz에서 사용해 보세요

Flexbox를 사용하여 요소를 세로로 중앙에 배치하는 방법

다음과 같이 컨테이너 내에서 모든 요소를 ​​수직으로 중앙에 배치할 수 있습니다.

• 컨테이너 display속성을 다음으로 설정flex
• 유연한 컨테이너의 align-items속성을 다음으로 설정center

예를 들면 다음과 같습니다.

section {
  display: flex;
  align-items: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

StackBlitz에서 사용해 보세요

Flexbox를 사용하여 요소를 수평 및 수직으로 중앙에 배치하는 방법

다음을 수행하여 HTML 요소를 해당 컨테이너 내에서 수평 및 수직으로 중앙에 배치할 수 있습니다.

• 컨테이너 display속성을 다음으로 설정flex
• 유연한 컨테이너 justify-content및 align-items속성을 다음으로 설정center

예를 들면 다음과 같습니다.

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

StackBlitz에서 사용해 보세요

개요

이 기사에서는 유연하고 반응이 빠른 방식으로 기본 및 고급 웹 사이트 레이아웃을 만드는 데 필요한 모든 Flexbox 도구에 대해 논의했습니다.

읽어 주셔서 감사합니다!

출처: https://www.freecodecamp.org

#css

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

프로처럼 CSS Grid를 사용하기 위해 알아야 할 모든 것

프로처럼 CSS Grid를 사용하기 위해 알아야 할 모든 것. 모든 장치에서 잘 보이는 반응형 방식으로 기본 및 고급 웹 사이트 레이아웃을 만드는 데 필요한 모든 CSS 그리드 도구입니다. CSS 그리드 핸드북 - 그리드 컨테이너 및 그리드 항목에 대한 전체 가이드

CSS Grid는 모바일, 태블릿 및 데스크탑 장치에서 멋지게 보이는 반응형 방식으로 기본 및 고급 웹사이트 레이아웃을 생성할 수 있는 도구를 제공합니다.

이 튜토리얼은 전문가처럼 CSS Grid를 사용하기 위해 알아야 할 모든 것을 설명합니다.

목차

1. CSS 그리드란?
2. 그리드 컨테이너와 그리드 항목: 차이점은 무엇입니까?
3. gridCSS에서 값 이란 무엇입니까 ?
4. inline-gridCSS에서 값 이란 무엇입니까 ?
5. 그리드 레이아웃을 지정하기 위한 속성
6. 그리드 컨테이너의 속성은 무엇입니까?
7. CSS 그리드의 grid-template-columns속성은 무엇입니까?
8. CSS 그리드의 grid-template-rows속성은 무엇입니까?
9. CSS 그리드의 justify-content속성은 무엇입니까?
10. CSS 그리드의 justify-items속성은 무엇입니까?
11. CSS 그리드의 align-content속성은 무엇입니까?
12. CSS 그리드의 align-items속성은 무엇입니까?
13. 그리드 항목의 속성은 무엇입니까?
14. CSS 그리드의 justify-self속성은 무엇입니까?
15. CSS 그리드의 align-self속성은 무엇입니까?
16. CSS 그리드의 grid-column-start속성은 무엇입니까?
17. CSS 그리드의 grid-column-end속성은 무엇입니까?
18. CSS 그리드의 grid-column속성은 무엇입니까?
19. CSS 그리드의 grid-row-start속성은 무엇입니까?
20. CSS 그리드의 grid-row-end속성은 무엇입니까?
21. CSS 그리드의 grid-row속성은 무엇입니까?
22. CSS 그리드의 grid-area속성은 무엇입니까?
23. CSS 그리드의 grid-template-areas속성은 무엇입니까?
24. minmax()CSS 함수를 사용하여 최소 및 최대 그리드 크기를 정의하는 방법
25. repeat()CSS 기능을 사용하여 반복 패턴으로 그리드 트랙을 정의하는 방법
26. 개요

이제 더 이상 고민하지 않고 CSS Grid가 무엇인지 이해해 봅시다.

---

CSS 그리드란?

CSS 그리드 레이아웃 모듈은 브라우저가 선택한 HTML 요소를 그리드 상자 모델로 표시하도록 합니다.

그리드를 사용하면 그리드 컨테이너와 해당 항목을 2차원적으로 쉽게 크기 조정하고 위치를 변경할 수 있습니다.

메모:

• "2차원"은 그리드 모듈이 상자 모델을 행과 열에 동시에 배치할 수 있음을 의미합니다.
• 1차원적으로 요소의 크기와 위치를 조정해야 하는 경우에만 Flexbox를 사용하십시오 .

Grid Container vs. Grid Item: What's the Difference?

A grid container is an HTML element whose display property's value is grid or inline-grid.

A grid item is any of the direct children of a grid container.

A grid container (the large yellow area in the image) is an HTML element whose display property's value is grid or inline-grid. Grid items (the smaller boxes within the yellow container) are the direct children of a grid container.

What Is a grid Value in CSS?

grid tells browsers to display the selected HTML element as a block-level grid box model.

In other words, setting an element's display property's value to grid turns the box model into a block-level grid layout module.

Here's an example:

section {
  display: grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid value to convert the HTML document's <section> elements from regular <section> nodes to block-level grid box models.

Note:

• The display: grid directive creates only a single-column grid container. Therefore, the grid items will display in the normal layout flow (one item below another).
• Converting a node to a grid box model makes the element's direct children become grid items.
• The display: grid directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Let's now discuss the inline-grid value.

What Is an inline-grid Value in CSS?

inline-grid tells browsers to display the selected HTML element as an inline-level grid box model.

In other words, setting an element's display property's value to inline-grid turns the box model into an inline-level grid layout module.

Here's an example:

section {
  display: inline-grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the inline-grid value to convert the HTML document's <section> elements from regular <section> nodes to inline-level grid box models.

Note:

• Converting a node to a grid box model makes the element's direct children become grid items.
• The display: inline-grid directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Properties for Specifying a Grid's Layout

On converting a regular HTML element to a grid (or inline-grid) box model, the grid layout module provides two categories of properties for positioning the grid box and its direct children:

• Grid container's properties
• Grid item's properties

What Are the Grid Container's Properties?

A grid container's properties specify how browsers should layout items within the grid box model.

Note: We define a grid container's property on the container, not its items.

The eight (8) types of grid container properties are:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows
• justify-content
• justify-items
• align-content
• align-items

Let's discuss the eight types now.

What Is CSS Grid's grid-template-columns Property?

grid-template-columns specifies the number and widths of columns browsers should display in the selected grid container.

Example 1: How to create a two-column grid container

section {
  display: grid;
  grid-template-columns: 95px 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display two columns of different widths in the selected <section> grid container.

Note: We used the fr (fraction) unit to scale the second column relative to the fraction of available space in the grid container.

Example 2: How to create a three-column grid container

section {
  display: grid;
  grid-template-columns: 15% 60% 25%;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display three columns of different widths in the selected <section> grid container.

Note:

• You can use the grid-auto-columns property to specify default column widths for all the grid container's columns. For instance, grid-auto-columns: 150px will set default widths of 150px for all columns. But a grid-template-columns declaration will override it.
• Explicit grid columns are the columns you explicitly define with the grid-template-columns property.
• Implicit grid columns are the columns browsers create automatically. We use the grid-auto-columns properties to specify track sizes for implicit columns.

Tip:

• Use the CSS repeat() function to specify grid-template-columns values with repeated patterns. We will discuss the repeat() function later in this tutorial.
• Use the CSS column-gap property to create gaps between grid columns.

What Is CSS Grid's grid-template-rows Property?

grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.

Example 1: How to create a three-row grid container

section {
  display: grid;
  grid-template-rows: 95px 1fr 70px;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-rows property to display three rows of different heights in the selected <section> grid container.

Note: We used the fr (fraction) unit to scale the second row relative to the fraction of available space in the grid container.

Example 2: How to create a three-row and four-column grid container

section {
  display: grid;
  grid-template-rows: 90px 300px 1fr;
  grid-template-columns: auto auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-rows property to display three columns of different heights in the selected <section> grid container.

Note:

• You can use the grid-auto-rows property to specify default row heights for all the grid container's rows. For instance, grid-auto-rows: 100px will set default heights of 100px for all rows. But a grid-template-rows declaration will override it.
• Explicit grid rows are the rows you explicitly define with the grid-template-rows property.
• Implicit grid rows are the rows browsers create automatically. We use the grid-auto-rows properties to specify track sizes for implicit rows.

Tip:

• Use the CSS repeat() function to specify grid-template-rows values with repeated patterns. We will discuss the repeat() function later in this tutorial.
• Use the CSS row-gap property to create gaps between grid rows.

What Is CSS Grid's justify-content Property?

justify-content specifies how browsers should position a grid container's columns along its row axis.

Note:

• A row axis is sometimes called an inline axis.
• The justify-content property works if the total column widths are less than the grid container's width. In other words, you need free space along the container's row axis to justify its columns left or right.

The justify-content property accepts the following values:

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

Let's discuss these values.

What is justify-content: start in CSS Grid?

start positions the grid container's columns with its row-start edge.

justify-content's start value positions columns to the grid container's row-start edge

Here's an example:

section {
  display: grid;
  justify-content: start;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the start value to position the <section>'s columns to the grid container's row-start edge.

What is justify-content: center in CSS Grid?

center positions the grid container's columns to the center of the grid's row axis.

justify-content's center value positions columns to the center of the grid container

Here's an example:

section {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the center value to position the <section>'s columns to the center of the grid container.

What is justify-content: end in CSS Grid?

end positions a grid container's columns with its row-end edge.

justify-content's end value positions columns to the grid container's row-end edge

Here's an example:

section {
  display: grid;
  justify-content: end;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the end value to position the <section>'s columns to the grid container's row-end edge.

What is justify-content: space-between in CSS Grid?

space-between does the following:

• It positions a grid container's first column with its row-start edge.
• It positions the container's last column with the row-end edge.
• It creates even spacing between each pair of columns between the first and last columns.

justify-content's space-between value creates even spacing between each pair of columns between the first and last grid column

Here's an example:

section {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of columns between the first and last grid column.

What is justify-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's columns.

Therefore, the space before the first column and after the last one is half the width of the space between each pair of columns.

justify-content's space-around value assigns equal spacing to each side of the grid container's columns

Here's an example:

section {
  display: grid;
  justify-content: space-around;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's columns.

What is justify-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its columns.

justify-content's space-evenly value assigns even spacing to both ends of the grid container and between its columns

Here's an example:

section {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the grid container and between its columns.

What Is CSS Grid's justify-items Property?

justify-items specifies the default justify-self value for all the grid items.

The justify-items property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values.

What is justify-items: stretch in CSS Grid?

stretch is justify-items' default value. It stretches the grid container's items to fill their individual cells' row (inline) axis.

justify-items' stretch value stretches grid items to fill their individual cells' row axis

Here's an example:

section {
  display: grid;
  justify-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the grid items to fill their individual cells' row axis.

What is justify-items: start in CSS Grid?

start positions a grid container's items with the row-start edge of their individual cells' row axis.

justify-items' start value positions grid items to their individual cells' row-start edge

Here's an example:

section {
  display: grid;
  justify-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the start value to position the grid items to their individual cells' row-start edge.

What is justify-items: center in CSS Grid?

center positions a grid container's items to the center of their individual cells' row axis.

justify-items' center value positions grid items to their individual cells' center

Here's an example:

section {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

위의 스니펫은 center값을 사용하여 그리드 항목을 개별 셀의 행 축 중앙에 배치했습니다.

CSS 그리드에는 무엇이 있습니까 ?justify-items: end

end개별 셀의 행 축의 행 끝 가장자리에 그리드 컨테이너의 항목을 배치합니다.

justify-items의 끝 값은 그리드 항목을 개별 셀의 행 끝 가장자리에 배치합니다.

예를 들면 다음과 같습니다.

section {
  display: grid;
  justify-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 end그리드 항목을 개별 셀의 행 끝 가장자리에 배치하기 위해 값을 사용했습니다.

CSS 그리드의 align-content속성은 무엇입니까?

align-content는 브라우저가 컨테이너의 열 축을 따라 그리드 컨테이너의 행을 정렬하는 방법을 지정합니다.

메모:

• 열 축을 블록 축이라고도 합니다.
• align-content전체 행 높이가 그리드 컨테이너의 높이보다 작은 경우 속성이 작동합니다 . 즉, 행을 위 또는 아래로 정렬하려면 컨테이너의 열 축을 따라 여유 공간이 필요합니다.

속성 align-content은 다음 값을 허용합니다.

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

이러한 값에 대해 논의해 봅시다.

CSS 그리드에는 무엇이 있습니까 ?align-content: start

start그리드 컨테이너의 행을 그리드 열 축의 열 시작 가장자리에 맞춥니다.

align-content의 시작 값은 그리드 컨테이너의 열 시작 가장자리에 행을 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: grid;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 값을 사용하여 의 행을 그리드 컨테이너의 열 시작 가장자리에 start맞춥니다 .<section>

CSS 그리드에는 무엇이 있습니까 ?align-content: center

center그리드 컨테이너의 행을 그리드 열 축의 중심에 맞춥니다.

align-content's center value aligns rows to the center of the grid container

section {
  display: grid;
  align-content: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the center value to align the <section>'s rows to the center of the grid container.

What is align-content: end in CSS Grid?

end aligns a grid container's rows with the column-end edge of the grid's column axis.

align-content's end value aligns rows to the grid container's column-end edge

Here's an example:

section {
  display: grid;
  align-content: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the end value to align the <section>'s rows to the grid container's column-end edge.

What is align-content: space-between in CSS Grid?

space-between does the following:

• It aligns a grid container's first row with its column-start edge.
• It aligns the container's last row with the column-end edge.
• It creates even spacing between each pair of rows between the first and last row.

align-content's space-between value creates even spacing between each pair of rows between the first and last grid row

Here's an example:

section {
  display: grid;
  align-content: space-between;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of rows between the first and last grid row.

What is align-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's rows.

Therefore, the space before the first row and after the last one is half the width of the space between each pair of rows.

align-content's space-around value assigns equal spacing to each side of the grid container's rows

Here's an example:

section {
  display: grid;
  align-content: space-around;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's rows.

What is align-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its rows.

align-content's space-evenly value assigns even spacing to both ends of the grid container and between its rows

Here's an example:

section {
  display: grid;
  align-content: space-evenly;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the grid container and between its rows.

What Is CSS Grid's align-items Property?

align-items specifies the default align-self value for all the grid items.

The align-items property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values below.

What is align-items: stretch in CSS Grid?

stretch is the default value for align-items. It stretches the grid container's items to fill their individual cells' column (block) axis.

align-items' stretch value stretches grid items to fill their individual cells' column axis

Here's an example:

section {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

위의 스니펫은 stretch값을 사용하여 그리드 항목을 늘려 개별 셀의 열 축을 채웠습니다.

CSS 그리드에는 무엇이 있습니까 ?align-items: start

start그리드 컨테이너의 항목을 개별 셀 열 축의 열 시작 가장자리에 맞춥니다.

align-items의 시작 값은 그리드 항목을 개별 셀의 열 시작 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 start그리드 항목을 개별 셀의 열 시작 가장자리에 정렬하기 위해 값을 사용했습니다.

CSS 그리드에는 무엇이 있습니까 ?align-items: center

center그리드 컨테이너의 항목을 개별 셀의 열 축 중앙에 정렬합니다.

align-items' center 값은 그리드 항목을 개별 셀의 중심에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 이 center값을 사용하여 그리드 항목을 개별 셀의 열 축 중앙에 정렬했습니다.

CSS 그리드에는 무엇이 있습니까 ?align-items: end

end그리드 컨테이너의 항목을 개별 셀 열 축의 열 끝 가장자리에 맞춥니다.

align-items의 끝 값은 그리드 항목을 개별 셀의 열 끝 가장자리에 정렬합니다.

예를 들면 다음과 같습니다.

section {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 이 end값을 사용하여 그리드 항목을 개별 셀의 열 끝 가장자리에 맞춥니다.

이제 CSS 그리드 컨테이너 속성의 유형을 알았으므로 그리드 항목 속성에 대해 논의할 수 있습니다.

그리드 항목의 속성은 무엇입니까?

그리드 항목의 속성은 브라우저가 그리드 상자 모델 내에서 지정된 항목을 레이아웃하는 방법을 지정합니다.

Note: We define a grid item's property on the item, not its container.

The ten (10) types of grid item properties are:

• justify-self
• align-self
• grid-column-start
• grid-column-end
• grid-column
• grid-row-start
• grid-row-end
• grid-row
• grid-area
• grid-template-areas

Let's discuss the ten types now.

What Is CSS Grid's justify-self Property?

justify-self specifies how browsers should position the selected grid item along its cell's row (inline) axis.

The justify-self property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values.

What is justify-self: stretch in CSS Grid?

stretch is justify-self's default value. It stretches the selected grid item to fill its cell's row (inline) axis.

justify-self's stretch value stretches the selected grid item to fill its cell's row axis

Here's an example:

.grid-item1 {
  justify-self: stretch;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch grid-item1 to fill its cell's row axis.

What is justify-self: start in CSS Grid?

start positions the selected grid item with the row-start edge of its cell's row axis.

justify-self's start value positions the selected grid item to its cell's row-start edge

Here's an example:

.grid-item1 {
  justify-self: start;
}

Try it on StackBlitz

The snippet above used the start value to position grid-item1 to its cell's row-start edge.

What is justify-self: center in CSS Grid?

center positions the selected grid item to the center of its cell's row axis.

justify-self's center value positions the selected grid item to its cell's center

Here's an example:

.grid-item1 {
  justify-self: center;
}

Try it on StackBlitz

The snippet above used the center value to position grid-item1 to its cell's center.

What is justify-self: end in CSS Grid?

end positions the selected grid item with the row-end edge of its cell's row axis.

justify-self's end value positions the selected grid item to its cell's row-end edge

Here's an example:

.grid-item1 {
  justify-self: end;
}

Try it on StackBlitz

The snippet above used the end value to position grid-item1 to its cell's row-end edge.

What Is CSS Grid's align-self Property?

align-self specifies how browsers should align the selected grid item along its cell's column (block) axis.

The align-self property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values below.

What is align-self: stretch in CSS Grid?

stretch is align-self's default value. It stretches the selected grid item to fill its cell's column (block) axis.

align-self's stretch value stretches the selected grid item to fill its cell's column axis

Here's an example:

.grid-item1 {
  align-self: stretch;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch grid-item1 to fill its cell's column axis.

What is align-self: start in CSS Grid?

start aligns the selected grid item with the column-start edge of its cell's column axis.

align-self's start value aligns the selected grid item to its cell's column-start edge

Here's an example:

.grid-item1 {
  align-self: start;
}

Try it on StackBlitz

The snippet above used the start value to align grid-item1 to its cell's column-start edge.

What is align-self: center in CSS Grid?

center aligns the selected grid item to the center of its cell's column axis.

align-self's center value aligns the selected grid item to its cell's center

Here's an example:

.grid-item1 {
  align-self: center;
}

Try it on StackBlitz

The snippet above used the center value to align grid-item1 to its cell's center.

What is align-self: end in CSS Grid?

end aligns the selected grid item with the column-end edge of its cell's column axis.

align-self's end value aligns the selected grid item to its cell's column-end edge

Here's an example:

.grid-item1 {
  align-self: end;
}

Try it on StackBlitz

The snippet above used the end value to align grid-item1 to its cell's column-end edge.

What Is CSS Grid's grid-column-start Property?

grid-column-start specifies where the selected grid item should start (or span) along the grid container's row (inline) axis.

The grid-column-start property accepts the following values:

• auto
• <column-line-number>
• span <number-of-columns>

Example 1: How to auto-start the selected grid item following the normal column flow

.grid-item1 {
  grid-column-start: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-start grid-item1 according to the normal column layout flow.

Example 2: How to start the selected grid item at column line 3

.grid-item1 {
  grid-column-start: 3;
}

Try it on StackBlitz

The snippet above used the grid-column-start property to start grid-item1 at column line 3.

Example 3: How to span the selected grid item across two columns

.grid-item1 {
  grid-column-start: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two columns.

What Is CSS Grid's grid-column-end Property?

grid-column-end specifies where the selected grid item should end (or span) along the grid container's row (inline) axis.

The grid-column-end property accepts the following values:

• auto
• <column-line-number>
• span <number-of-columns>

Example 1: How to auto-end the selected grid item following the normal column flow

.grid-item1 {
  grid-column-end: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-end grid-item1 according to the normal layout flow.

Example 2: How to end the selected grid item at column line 3

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Try it on StackBlitz

The snippet above used the grid-column-end property to end grid-item1 at column line 3.

Example 3: How to span the selected grid item across two columns

.grid-item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two columns.

What Is CSS Grid's grid-column Property?

grid-column is a shorthand for the grid-column-start and grid-column-end properties.

In other words, instead of writing:

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

You can alternatively use the grid-column property to shorten your code like so:

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

Here is grid-column's syntax:

grid-column: grid-column-start / grid-column-end;

What Is CSS Grid's grid-row-start Property?

grid-row-start specifies where the selected grid item should start (or span) along the grid container's column (block) axis.

The grid-row-start property accepts the following values:

• auto
• <row-line-number>
• span <number-of-rows>

Example 1: How to auto-start the selected grid item following the normal row flow

.grid-item1 {
  grid-row-start: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-start grid-item1 according to the normal row layout flow.

Example 2: How to start the selected grid item at row line 3

.grid-item1 {
  grid-row-start: 3;
}

Try it on StackBlitz

The snippet above used the grid-row-start property to start grid-item1 at row line 3.

Example 3: How to span the selected grid item across two rows

.grid-item1 {
  grid-row-start: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two rows.

What Is CSS Grid's grid-row-end Property?

grid-row-end specifies where the selected grid item should end (or span) along the grid container's column (block) axis.

The grid-row-end property accepts the following values:

• auto
• <column-line-number>
• span <number-of-columns>

Example 1: How to auto-end the selected grid item following the normal row flow

.grid-item1 {
  grid-row-end: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-end grid-item1 according to the normal row layout flow.

Example 2: How to end the selected grid item at row line 5

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

Try it on StackBlitz

The snippet above used the grid-row-end property to end grid-item1 at row line 5.

Example 3: How to span the selected grid item across three rows

.grid-item1 {
  grid-row-end: span 3;
}

Try it on StackBlitz

The snippet above used the span 3 value to span grid-item1 across three rows.

What Is CSS Grid's grid-row Property?

grid-row is a shorthand for the grid-row-start and grid-row-end properties.

In other words, instead of writing:

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

You can alternatively use the grid-row property to shorten your code like so:

.grid-item1 {
  grid-row: 1 / 5;
}

Here is grid-row's syntax:

grid-row: grid-row-start / grid-row-end;

What Is CSS Grid's grid-area Property?

You can use the grid-area property for the following purposes:

1. As a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties.
2. To specify a grid item's name.

Let's discuss the two purposes below.

How to use grid-area as a shorthand

Here is the syntax for using the grid-area property as a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties:

.your-grid-item {
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}

Therefore, instead of writing:

.grid-item1 {
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: span 2;
}

Try it on StackBlitz

You can alternatively use the grid-area property to shorten your code like so:

.grid-item1 {
  grid-area: 3 / 1 / 5 / span 2;
}

Try it on StackBlitz

How to use grid-area to specify a grid item's name

Here is the syntax for using the grid-area property to specify a grid item's name:

.your-grid-item {
  grid-area: item-name;
}

Here's an example:

.grid-item1 {
  grid-area: firstDiv;
}

.grid-item2 {
  grid-area: middleDiv;
}

.grid-item2 {
  grid-area: lastDiv;
}

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
</section>

Using grid-area to define a named grid item allows your grid container's grid-template-areas property to use the name to set the item's size and location.

What Is CSS Grid's grid-template-areas Property?

grid-template-areas specifies the area where you want to place named grid items within a grid container.

Remember: We use the CSS grid-area property to name grid items.

Example 1: How to place a named grid item across three columns

.grid-item1 {
  grid-area: firstDiv;
}

section {
  display: grid;
  grid-template-areas: "firstDiv firstDiv firstDiv . .";
  background-color: orange;
  margin: 50px;
}

Try it on StackBlitz

The snippet above used the grid-template-areas property to place grid-item1 across the first three column areas.

Note the following:

• Quotation marks ("") define each grid row.
• A period symbol (.) defines an unnamed grid item.
• We used the whitespace character to separate grid columns.

Example 2: How to specify multiple named grid items' placements

.grid-item1 {
  grid-area: header;
}

.grid-item2 {
  grid-area: article;
}

.grid-item3 {
  grid-area: footer;
}

.grid-item4 {
  grid-area: sidebar;
}

.grid-item5 {
  grid-area: ads1;
}

.grid-item6 {
  grid-area: ads2;
}

.grid-item7 {
  grid-area: ads3;
}

section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "header header header header header"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads2"
    "sidebar article article article ads3"
    "sidebar footer footer footer footer";
  background-color: orange;
  margin: 30px;
}

Try it on StackBlitz

The snippet above used the grid-template-areas property to specify where browsers should place the grid items across the rows and columns of the grid container.

Important Stuff to Know about the grid-template-areas Property

Here are four essential facts to remember when using the grid-template-areas property:

1. grid-template-areas do not permit empty cells

The grid-template-areas property requires you to provide an item for all grid cells.

For instance, consider this snippet:

grid-template-areas:
  "header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Above is an invalid grid-template-areas value because the first row is incomplete.

In other words, the first row is the only one with two columns. However, grid-template-areas expect all the rows in a grid container to have the same number of columns.

2. You can use dots to specify empty cells

Suppose you wish to leave some cells empty. In that case, use a dot (.) or multiple unspaced dots (....).

Here's an example:

grid-template-areas:
  "header header . . ."
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Try it on StackBlitz

The snippet above used the three spaced dot (.) symbols to indicate three empty cells.

3. grid-template-areas do not permit placing an item in multiple locations

The grid-template-areas property cannot place items twice within a grid container.

For instance, consider this snippet:

grid-template-areas:
  "header header header header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer header header header";

Above is an invalid grid-template-areas value because the header item occupies two grid areas.

4. grid-template-areas allows rectangular areas only

The grid-template-areas property cannot create non-rectangular areas (such as T-shaped or L-shaped).

For instance, consider this snippet:

grid-template-areas:
  "header header header header header"
  "sidebar ads1 ads1 ads1 ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Above is an invalid grid-template-areas value because the ads1 item creates a non-rectangular grid area.

So, now that we know the types of CSS grid item properties, we can discuss how to define minimum and maximum grid sizes.

How to Use the CSS minmax() function to Define Minimum and Maximum Grid Sizes

minmax() is a CSS Grid function for defining minimum and maximum grid sizes.

Syntax of the CSS minmax() function

minmax() accepts two arguments. Here is the syntax:

minmax(minimum-size, maximum-size)

Note the following:

• The minimum-size argument specifies the smallest size for a specific length.
• The maximum-size argument specifies the largest size for a specific length.
• minmax()'s arguments can be any of the non-negative CSS lengths, or any one of the keywords auto, min-content, or max-content.
• Suppose the maximum-size argument is less than the minimum-size. In that case, browsers will ignore the maximum-size and treat the minmax() function as min().
• An fr unit is an invalid unit for the minimum-size argument.

How to use the CSS minmax() function

You can use the minmax() function as a value for the following CSS properties:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows

Examples of the CSS minmax() function

Below are examples of how the CSS minmax() function works.

How to define a 70px minimum and a 250px maximum row grid size

section {
  display: grid;
  grid-template-rows: 50px 100px minmax(70px, 250px);
  grid-template-columns: auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used the CSS minmax() function to set the <section>'s third row's height to a minimum of 70px and a maximum of 250px.

How to define a 30% minimum and a 70% maximum column grid size

section {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr minmax(30%, 70%) 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used the CSS minmax() function to set the <section>'s second column's width to a minimum of 30% and a maximum of 70%.

Note: You can use the CSS repeat() function to specify grid-template-rows or grid-template-columns values with repeated patterns. Let's discuss the repeat() function now.

How to Use the CSS repeat() Function to Define Grid Tracks with Repeated Patterns

The repeat() CSS function allows you to write more concise and readable values when specifying multiple grid tracks with repeated patterns.

Note:

• A track refers to a grid container's column (or row).
• You can use repeat() as a value for the CSS grid-template-columns or grid-template-rows properties.

Syntax of the CSS repeat() function

repeat() accepts two arguments. Here is the syntax:

repeat(number-of-repetition, track-list-to-repeat)

Argument 1: number-of-repetition

The number-of-repetition argument specifies the number of times browsers should repeat the specified track list (the second argument).

The number-of-repetition argument can be any of the following values:

• Number 1 or its multiple
• auto-fill
• auto-fit

auto-fill vs. auto-fit: What's the difference?

The auto-fill and auto-fit values automatically create as many tracks as needed to fill a grid container without causing an overflow.

The difference between the two values is that auto-fit collapses empty tracks to zero-pixel (0px). But auto-fill displays both empty and filled tracks.

Note: Empty tracks are columns or rows with no grid item.

Argument 2: track-list-to-repeat

The track-list-to-repeat argument specifies the track pattern you wish to repeat across a grid container's horizontal or vertical axis.

In other words, track-list-to-repeat consists of one or more values specifying the sizes of tracks browsers should repeat within a grid container.

참고:number-of-repetition is auto-fill또는 이라고 가정합니다 auto-fit. 이 경우 고정 크기 만 인수 로 사용할 수 있습니다 track-list-to-repeat.

CSS repeat()함수 의 예

다음은 CSS repeat()기능이 작동하는 방식의 예입니다.

열 너비가 있는 3열 그리드 컨테이너를 만드는 방법70px

section {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

StackBlitz에서 사용해 보세요

위 스니펫은 CSS repeat()함수를 사용하여 3개의 와이드 열을 생성했습니다 70px.

아래는 repeat()위 grid-template-columns속성과 동등하지 않은 속성입니다.

grid-template-columns: 70px 70px 70px;

열 너비 가 1개 50px및 3 개인 4열 그리드 컨테이너를 만드는 방법90px

section {
  display: grid;
  grid-template-columns: 50px repeat(3, 90px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

StackBlitz에서 사용해 보세요

위 스니펫은 CSS repeat()함수를 사용하여 3개의 와이드 열을 생성했습니다 90px.

아래는 repeat()위 grid-template-columns속성과 동등하지 않은 속성입니다.

grid-template-columns: 50px 90px 90px 90px;

열 너비 가 1개 40px및 2 개인 5열 그리드 컨테이너를 만드는 방법60px 1fr

section {
  display: grid;
  grid-template-columns: 40px repeat(2, 60px 1fr);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

StackBlitz에서 사용해 보세요

위 스니펫은 CSS repeat()함수를 사용하여 두 개의 너비 열을 생성했습니다 60px 1fr.

아래는 repeat()위 grid-template-columns속성과 동등하지 않은 속성입니다.

grid-template-columns: 40px 60px 1fr 60px 1fr;

참고: fr(분수) 단위를 사용하여 그리드 컨테이너에서 사용 가능한 공간의 비율을 기준으로 세 번째 및 다섯 번째 열의 크기를 조정했습니다.

-wide 열로 그리드 컨테이너를 자동으로 채우는 방법70px

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 CSS repeat()함수를 사용하여 그리드 컨테이너를 70px-wide 열로 자동으로 채웁니다.

너비 가 최소 50px및 최대인 그리드 컨테이너를 자동으로 채우는 방법1fr

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 CSS repeat()와 함수를 사용하여 최소 너비 열과 최대 너비 열로 minmax()그리드 컨테이너를 자동으로 채웠습니다 .50px1fr

참고: 1분의 1 단위를1fr 의미합니다 .

너비 가 최소 50px및 최대인 그리드 컨테이너를 자동으로 맞추는 방법1fr

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

StackBlitz에서 사용해 보세요

위의 스니펫은 CSS repeat()및 함수를 사용하여 최소 너비 열과 최대 너비 열로 minmax()그리드 컨테이너를 자동으로 맞춥니다 .50px1fr

개요

이 기사에서는 모든 장치에서 잘 보이는 응답 방식으로 기본 및 고급 웹 사이트 레이아웃을 만드는 데 필요한 모든 CSS 그리드 도구에 대해 논의했습니다.

이 기사가 도움이 되었기를 바랍니다.

읽어 주셔서 감사합니다!

이 자습서가 마음에 들면 Amazon에서 가이드북 버전을 얻을 수 있습니다 . CSS 그리드에 대한 편리한 빠른 참조 가이드입니다.

출처: https://www.freecodecamp.org

#css

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css