본문 바로가기
frontend/CSS

[필기] CSS 기초 (10) - CSS의 꽃 flexbox 정복하기 (드림코딩)

by Mr.코딩 2023. 7. 26.

 

Flexbox의 주요 속성

 

chatGTP

Flexbox는 CSS의 레이아웃 모델 중 하나로, 요소들을 유연하게 정렬하고 배치하는 데 사용되는 기술입니다. 아래는 Flexbox의 주요 속성들에 대한 간단한 설명입니다:

1. `display: flex;`:
   Flexbox를 활성화하기 위해 부모 요소에 이 속성을 적용합니다. 이렇게 설정된 부모 요소는 Flex 컨테이너가 됩니다.

2. `flex-direction`:
   Flex 컨테이너 안의 아이템들의 배치 방향을 지정합니다. 값으로는 `row`, `row-reverse`, `column`, `column-reverse` 등이 있습니다.

3. `flex-wrap`:
   Flex 아이템들이 컨테이너 크기를 초과할 때, 줄 바꿈을 어떻게 할지를 결정합니다. `nowrap`, `wrap`, `wrap-reverse` 값을 사용할 수 있습니다.

4. `flex-flow`:
   `flex-direction`과 `flex-wrap`의 단축 속성입니다. 두 속성을 한 줄에 나열하여 사용할 수 있습니다.

5. `justify-content`:
   Flex 아이템들을 주축(main axis)을 따라 정렬합니다. 이 때 주축은 `flex-direction`에 따라 결정됩니다. 값으로는 `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly` 등이 있습니다.

6. `align-items`:
   교차축(cross axis)을 따라 Flex 아이템들을 정렬합니다. 값으로는 `flex-start`, `flex-end`, `center`, `baseline`, `stretch` 등이 있습니다.

7. `align-content`:
   교차축(cross axis)에서 여러 줄에 걸친 Flex 아이템들을 정렬합니다. `flex-wrap` 속성이 `wrap`이거나 `wrap-reverse`일 때만 적용됩니다. 값으로는 `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `stretch` 등이 있습니다.

8. `flex`:
   Flex 아이템의 크기를 지정합니다. `flex-grow`, `flex-shrink`, `flex-basis`를 단축해서 사용하는 속성입니다.

9. `order`:
   Flex 아이템의 순서를 지정합니다. 기본값은 0이며, 작은 숫자일수록 앞으로 이동합니다.

위의 속성들을 조합하여 유연한 레이아웃을 구성할 수 있습니다. Flexbox를 사용하면 웹 페이지의 레이아웃을 조정하거나 반응형 디자인을 쉽게 구현할 수 있습니다.

 

드림코딩으로 보면서 연습하기

 

더보기


flexbox를 선언하면 아이템을 담는 전체 틀이 생성되나?

 

그건 아니고,

Flexbox는 컨테이너와 그 안에 있는 아이템들을 관리하는 레이아웃 모델입니다. Flexbox를 선언하면 컨테이너 요소에 적용되는 레이아웃 속성들이 정의되며, 이 속성들에 따라 컨테이너 안에 있는 아이템들이 배치되게 됩니다.

하지만 Flexbox를 선언하더라도 컨테이너 요소에 아이템들을 포함시키는 것은 개발자가 명시적으로 해야 합니다. Flexbox는 단순히 컨테이너 안에 있는 아이템들을 어떤 방식으로 배치할지를 결정하는 레이아웃 모델일 뿐, 아이템들을 자동으로 생성하지는 않습니다.

예를 들어, 아래와 같이 HTML과 CSS를 작성한 후에 Flexbox를 선언하면, `

`라는 컨테이너 요소 안에 있는 자식 요소들이 Flexbox 레이아웃을 따라 배치됩니다.</div class="container">
 
HTML:
 
html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class="item">아이템 1</div>
    <div class="item">아이템 2</div>
    <div class="item">아이템 3</div>
  </div>
</body>
</html>

 

CSS (styles.css):

 

css
.container {
  display: flex; /* Flexbox를 선언 */
  justify-content: space-between; /* 아이템들을 좌우로 분산 배치 */
}

.item {
  padding: 10px;
  border: 1px solid #ccc;
}

 

위의 코드에서 `.container` 클래스가 Flexbox를 선언하는 컨테이너 요소입니다. `.item` 클래스는 `.container` 컨테이너 안에 있는 아이템 요소들입니다.

Flexbox가 선언된 `.container` 컨테이너 요소 안에 `.item` 클래스로 지정된 세 개의 아이템들이 포함되어 있으므로, 이들 아이템들이 Flexbox 레이아웃을 따라 좌우로 분산 배치되게 됩니다.

Flexbox를 선언하더라도 컨테이너 안에 아이템들을 명시적으로 작성해야 하며, 이러한 아이템들을 Flexbox의 규칙에 따라 배치합니다.

 <div class="container"> 라고 작성했는데, 이때 container는 작성자가 임의로 지은 이름일 뿐, 그 자체로 태그나 속성의 기능을 가지지는 않지? 한 마디로 다른 단어(영숫자)로 대체해도 되는 거지?

 

맞습니다. <div class="container">와 같이 작성된 코드에서 "container"는 작성자가 임의로 지은 클래스 이름입니다. 이렇게 지은 이름은 HTML 태그나 속성의 기능을 가지지 않습니다. 즉, "container"라는 클래스 이름은 그 자체로는 특별한 의미를 갖지 않으며, 다른 단어(영숫자)로 대체하여도 무방합니다.

 

그럼 따로 다른 문서에 style.css 파일에 스타일을 작성할 경우에도 아이템이나 블록을 불러올 때 같은 방식으로 '.'+ 이름 // 이런 식으로 작성하나?

 

네, 맞습니다. 따로 다른 문서에 스타일을 작성하는 경우에도 아이템이나 블록을 선택하기 위해서는 .(점) 뒤에 클래스 이름을 작성하는 방식을 사용합니다.

 

Flexbox은 구조적으로 최외곽 박스와 그 안의 작은 박스로 구분되며, 전자를 container, 후자를 item이라고 부를 수 있다. 하지만  container나 item은 태그나 속성값이 아니다.

 

Flexbox는 중심축 개념이 있는데 수평축(main axis)과 수직축(cross axis)이 있다.

 

여기서부터는 영상 보면서 필기한 것 (오류 있을 수도 있음)

 

display: flex;

야, 너 이 제 플렉스박스야

> 이렇게 하면 디폴트로 좌에서 우로 정렬됨

 

하지만 중심축을 정확히 명명하는 것은

flex-direction: row / flex-direction: row-reverse; 를 이용

세로 방향은 flex-direction: column; / flex-direction: column-reverse;

 

창을 줄이면 아래로 떨어지게?

flex-wrap: wrap; / flex-wrap: nowrap; / flex-wrap: wrap-reverse도 있음.

 

그런데, border 태그가 그렇듯, 플렉스의 direction과 wrap도 한 줄에 입력 가능하다.

바로 flex-flow를 쓰면 되는데, 

flex-flow: row nowrap; /*이렇게 작성하면 가로 방향이고 뷰포트가 줄어도 아래 칸으로 이동하지 않게 하라는 의미이다 */

justify-content는 가로 정렬을 결정하는

 

justify-content: flex-end;

: 이거는 컨텐츠를 중심축 쪽으로 "쏠리게 만들어 주며" flex-end를 넣으면 '순서'는 유지하게 만든다.

 

justify-content: space-around

: 아이템 별로 띄워서 간격을 주는 것 (양쪽 끝 간격은 1/2임)

 

justify-content: space-evenly

: 동일한 간격을 만듬

 

justify-content: between 

: 좌우 끝 라인은 컨테이너선에 딱 맞추고 나머지만 띄운다.

 

이처럼 justify-content는 중심축 즉 상단과 좌단을 기준으로 컨텐츠 배치하는 걸 설정하는 것이고,

이와는 달리 중심축의 반대축에서 배치 설정하는 걸 align-items이다.

align-items는 세로 정렬 설정

 

예, align-items: center;

 

CSS의 align-content 속성은 flex 컨테이너 내의 flex 요소의 수직 중앙 정렬을 지정합니다. align-content는 flex-direction이 row인 경우 flex 요소 간의 수직 간격을 지정하고, flex-direction이 row-reverse인 경우 flex 요소 간의 수평 간격을 지정합니다.

 

CSS의 align-content 속성은 flex 컨테이너 내의 flex 요소의 수직 중앙 정렬을 지정합니다. align-content는 flex-direction이 row인 경우 flex 요소 간의 수직 간격을 지정하고, flex-direction이 row-reverse인 경우 flex 요소 간의 수평 간격을 지정합니다.

 

align-content는 다음과 같은 값을 사용할 수 있습니다.

 

  • flex-start: flex 요소를 flex 컨테이너의 상단으로 정렬합니다.
  • flex-end: flex 요소를 flex 컨테이너의 하단으로 정렬합니다.
  • stretch: flex 요소를 flex 컨테이너의 높이와 너비에 맞게 확장합니다.
  • center: flex 요소를 flex 컨테이너의 중앙에 정렬합니다.
  • space-between: flex 요소 간의 간격을 동일하게 유지합니다.
  • space-around: flex 요소의 상단과 하단에 간격을 추가하고, flex 요소 간의 간격을 동일하게 유지합니다.

 

주의!

지원이 안 되는 브라우저도 있으니, mdn에 가서 확인할 필요 있음.

 

그리고 까먹으면 여기 css-tricks에 가서 다시 찬찬히 살펴 볼 것

여기서부터는 item  수준에서 설정

 

item별로 order를 적용해서 순서를 바꿀 수 있다!

flex-grow: 1; 뷰포트에 맞게 커짐

flex-shrink: 1; 줄어드는 순간에 비율을 조정

 

flex-basis : 아이템들이 얼마나 공간을 차지하는지 세부적으로 명시할 수 있음. (기본값은 auto. %로 설정)

 

컨테이너를 벗어나서 특정 아이템만 별도로 위치를 잡게 하는 align-self: center // 이런 식

 

 

flex 게임으로 익히기

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

이게 뭔 말이지? ㅜ.ㅜ

 

`flex-basis`는 Flexbox 레이아웃에서 사용되는 속성 중 하나로, flex 아이템(자식 요소)의 초기 크기를 설정하는 데 사용됩니다. Flexbox는 부모 요소인 Flex 컨테이너 안에 있는 자식 요소들을 효율적으로 배치하기 위한 레이아웃 모델입니다. `flex-basis` 속성은 각 flex 아이템의 초기 크기를 지정하며, 이 크기는 Flexbox에 의해 조정될 수 있습니다.

`flex-basis`의 값은 길이 값(예: px, em, %) 또는 `auto`가 될 수 있습니다. `auto`를 사용하면 기본 크기가 자동으로 설정되며, 길이 값을 사용하면 해당 크기로 아이템이 초기에 배치됩니다. 이후 `flex-grow`와 `flex-shrink` 속성에 따라 아이템의 크기가 조정됩니다.

예를 들어, 다음과 같은 CSS 코드를 살펴보겠습니다:

```css
.container {
  display: flex;
}

.item {
  flex-basis: 100px;
}
```

위의 코드에서 `.container`는 Flex 컨테이너이고, `.item`은 Flex 아이템입니다. `.item`의 `flex-basis` 속성이 `100px`로 설정되어 있으므로, `.item`의 초기 크기는 가로 방향으로 100px로 설정됩니다. 만약 `.item`이 100px보다 더 작은 공간에 배치되어야 하면, `flex-grow`와 `flex-shrink`에 따라 `.item`의 크기가 조정됩니다.

Flexbox는 레이아웃을 유연하게 조정할 수 있는 강력한 기능을 제공하며, `flex-basis`는 이러한 유연성을 달성하는 데에 큰 역할을 합니다.

flexbox 안에 또 flexbox를 선언할 수 있나?

 

chatGTP

네, Flexbox 안에 또 다른 Flexbox를 선언하는 것은 가능합니다. Flexbox는 중첩되거나 부모-자식 관계에 있는 요소들 간에도 적용될 수 있기 때문에, 여러 수준의 Flexbox 레이아웃을 만들 수 있습니다.

예를 들어, 다음과 같이 HTML과 CSS를 사용하여 중첩된 Flexbox 레이아웃을 생성할 수 있습니다:

HTML:
```html
<div class="outer-flexbox">
  <div class="inner-flexbox">
    <!-- 내부 Flexbox의 자식 요소들 -->
  </div>
</div>
```

CSS:
```css
.outer-flexbox {
  display: flex;
  /* 부모 Flexbox 스타일과 속성들 */
}

.inner-flexbox {
  display: flex;
  /* 내부 Flexbox 스타일과 속성들 */
}
```

위의 예시에서, `.outer-flexbox`와 `.inner-flexbox` 모두 Flexbox로 선언되었습니다. 이렇게 중첩된 Flexbox를 사용하여 다양한 레이아웃을 만들 수 있으며, 부모 Flexbox와 자식 Flexbox 간에 각각 다른 속성을 적용하여 원하는 디자인을 구현할 수 있습니다.

'frontend > CSS' 카테고리의 다른 글

selector의 기본 종류  (0) 2023.07.27
class, id 선택  (0) 2023.07.27
CSS 그리드 속성 리스트  (0) 2023.07.26
드림코딩 CSS Grid 정리 영상 보며 필기하기  (0) 2023.07.26
[필기] CSS 기초 (9) - 반응웹을 위한 미디어쿼리  (0) 2023.07.26
[필기] CSS 기초 (6) - 반응웹을 위한 Transform & Transition  (0) 2023.07.26
[필기] CSS 기초 (5) - 반응웹을 위한 가상 클래스 & 가상 요소  (0) 2023.07.26
[필기] CSS 기초 (4)  (0) 2023.07.26

관련글

티스토리툴바