CSS 플렉스박스 #1. 첫 번째 Flexbox 레이아웃 만들기

게시 됨: 2022-02-16

2018년 말에 우리는 프론트엔드 웹 디자인에 혁명을 일으키고 있는 레이아웃 도구인 CSS 그리드에 대한 책을 출판했습니다. CSS Grid는 전적으로 CSS에 고유하며 열과 행을 사용하여 그리드 기반 레이아웃 시스템을 만들 수 있습니다.

"CSS Grid Explained"는 즉시 가장 많이 팔린 책 중 하나가 되었습니다. 그래서 우리는 그 책에 대한 대규모 업데이트와 확장 작업을 하고 있습니다. 우리는 또한 "Flexbox Explained"라는 새로운 책을 만들기 시작했습니다. Flexbox는 CSS Grid와 밀접한 관련이 있지만 눈에 띄는 차이점이 있습니다.

  • Flexbox는 1차원 레이아웃 모델입니다. 열 또는 행을 관리할 수 있습니다.
  • CSS 그리드는 2차원 레이아웃 모델입니다. 열과 행을 모두 관리할 수 있습니다.

앞으로 몇 주 동안 "Flexbox 설명"을 작성하면서 일련의 Flexbox 자습서를 게시할 예정입니다. 이 첫 번째 튜토리얼은 실제 예제와 함께 CSS Flexbox의 기본 개념을 보여줍니다.

플렉스박스 소개

CSS Flexbox 사양은 컨테이너( flex-container ) 내부에 항목( flex-items )이 있는 레이아웃을 설명합니다. 이러한 항목은 사용 가능한 컨테이너 공간에 따라 너비 및/또는 높이가 늘어나거나 줄어들 수 있습니다. 항목은 가능한 가장 좋은 방법으로 상위 컨테이너에 맞도록 "유연"합니다.

이러한 "굴곡된" 항목은 모든 방향(인라인 축 또는 블록 축)으로 배치할 수 있으므로 화면의 크기(너비 또는 높이) 또는 방향을 변경할 때 많은 유연성을 제공합니다.

이 링크를 클릭하면 Flexbox W3C 사양을 볼 수 있습니다.

1 단계. HTML 만들기

몇 가지 샘플 코드로 HTML 파일을 생성하여 이 예제를 시작하겠습니다. HTML을 준비했습니다. 이것은 3개의 자식 요소가 있는 컨테이너입니다.

  • 원하는 코드 편집기를 엽니다.
  • 빈 HTML 파일을 만듭니다.
  • 이 페이지를 방문하여 HTML 코드를 복사하십시오.
  • HTML 파일에 해당 코드를 붙여넣습니다.

2 단계. CSS 만들기

이제 3개의 요소가 있는 컨테이너가 있으므로 스타일을 추가해 보겠습니다.

  • style.css라는 CSS 파일을 만듭니다. . 이 파일을 HTML 파일과 같은 폴더에 넣습니다. 이 CSS 파일에 대한 링크는 이미 HTML 파일의 태그에 있습니다.
  • Codepen에서도 사용할 수 있는 이 코드를 복사하여 붙여넣습니다.

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

이 이미지는 브라우저에서 HTML 파일을 열 때 코드가 어떻게 표시되는지 보여줍니다. 3개의 하위 항목은 상위 컨테이너만큼 넓습니다. 높이는 각 항목의 내용에 따라 결정됩니다. 모든 면에서 2rem(데스크탑 화면에서 약 32px)의 패딩을 확인하십시오.

CSS 플렉스박스 #1. 첫 번째 Flexbox 레이아웃 만들기

3단계. CSS Flexbox 스타일

이제 이 튜토리얼의 Flexbox 부분을 시작할 시간입니다.

  • CSS 파일을 편집하고 다음 코드를 추가합니다.

 .container { display: flex; }

이 이미지는 이제 코드가 어떻게 보일지 보여줍니다.

변경된 사항은 무엇입니까? 기술적인 측면에서 상위 컨테이너는 이제 flex-container 입니다. 자식 요소는 flex-items 로 바뀌었습니다.

컨테이너의 크기가 변경된 이유는 무엇입니까? 플렉스 아이템은 부모 컨테이너만큼 넓지 않습니다. 이제 내부 콘텐츠만큼 넓습니다. flex-items 은 왼쪽에 부동 요소로 나타납니다. 인라인 요소처럼 작동합니다.

부모 컨테이너의 너비를 명확하게 보려면 background-color 를 적용할 수 있습니다.

  • CSS 코드를 편집하고 다음 코드를 추가합니다.

 .container { display: flex; background-color: #f5ca3c; }

이제 컨테이너가 표시되는 방식은 다음과 같습니다.

flex-container (대부분) 블록 수준 요소처럼 동작한다는 것을 이미 눈치채셨을 것입니다. 그러나 컨테이너가 인라인 수준 요소처럼 작동하도록 만들 수도 있습니다. 이를 위해 display 속성의 값을 inline-flex 로 변경합니다.

  • CSS 코드를 수정합니다.

 .container { display: inline-flex; background-color: #f5ca3c;

이 이미지에서 볼 수 있듯이 플렉스 컨테이너는 이제 인라인 수준 요소입니다.

이 자습서를 계속하기 전에 동작을 블록 수준 요소로 변경해 보겠습니다.

  • CSS 코드를 수정합니다.

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

4단계. Flexbox 행을 열로 변경

지금까지 flex-container 를 만들었습니다. 우리는 또한 이 컨테이너의 자식들이 flex-items 로 바뀔 때 어떻게 행동하는지 보았습니다.

이제 레이아웃의 방향을 변경하는 방법을 알아보겠습니다. flex-container 의 기본 방향은 행 기반입니다. 그러나 flex-direction 속성을 사용하여 이 동작을 변경할 수 있습니다.

  • CSS 코드를 수정합니다.

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

코드를 업데이트한 후 flex-direction: row 가 기본값이기 때문에 변경 사항이 표시되지 않습니다. 정말 눈에 띄게 변경해 보겠습니다. flex-container 의 방향을 column 으로 수정합니다.

  • CSS 코드를 수정합니다.

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

다음 이미지는 레이아웃 변경 사항을 보여줍니다.

이제 flex-container 의 방향은 블록 축(열)을 기반으로 합니다. flex-items 은 위에서 아래로 정렬되며 이러한 항목 각각은 상위 컨테이너의 전체 너비를 사용합니다. 따라서 블록 요소처럼 작동합니다.

이제 이 시점에서 다음과 같은 질문을 할 수 있습니다. " 제 레이아웃이 이제 이 튜토리얼의 첫 번째 레이아웃과 정확히 동일하게 보입니다! " 맞습니다. 시각적으로 flex-container 가 있는 이 현재 레이아웃과 블록 컨테이너가 있는 이 예제의 첫 번째 레이아웃 사이에는 차이가 없습니다.

그러나 이제 더 많은 제어 권한이 있습니다. 예를 들어, row-reverse 및 column-reverse 속성을 사용하여 flex-items 의 방향을 반전할 수 있습니다.

  • CSS 코드를 수정합니다.

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

이 이미지는 이 새로운 업데이트 후 레이아웃이 어떻게 보일지 보여줍니다.

flex-items 가 한 행에서 반전된 것을 보려면 flex-direction 속성의 값을 변경하십시오.

  • CSS 코드를 수정합니다.

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

플렉스박스 요약

축하합니다! flex-container 를 선언하는 방법을 배웠습니다. 상위 컨테이너( row 또는 column )에 적용된 flex-direction 에 따라 flex-items 가 어떻게 동작하는지 보았습니다. 또한 flex-items 의 순서를 바꾸는 방법도 알고 있습니다.

이러한 모든 변경은 CSS로 수행되므로 사이트의 HTML 마크업 구조에는 영향을 미치지 않습니다. 이것이 Flexbox를 사용하는 장점 중 하나입니다. flex-items 의 순서를 반전시키는 것은 이 CSS 모듈의 기능 중 하나일 뿐입니다. Flexbox에 대해 더 배울 것이 많으니 며칠 후에 이 튜토리얼의 Part #2를 살펴보세요.

이 시리즈의 더 많은 튜토리얼

  • CSS 플렉스박스 #2. justify-content 속성을 사용하는 방법
  • CSS 플렉스박스 #3. 항목 정렬 속성
  • CSS 플렉스박스 #4. flex-grow 속성