[CSS] KUCC JS 세션 1. CSS flexbox - (1)컨테이너에 적용하는 속성

이 글은 아래 출처의 글을 인용합니다. 원글이 그림도 설명도 더 친절하니 아래 링크를 타고 보시는 것을 추천합니다. 

출처: https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

1. Flex란?

Flex는 레이아웃 배치 전용 기능으로 고안도됨

그래서 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리

 

2. [Flex 레이아웃을 만들기 위한 기본적인 HTML 구조]

 

<div class="container">

     <div class="item">helloflex</div>

     <div class="item">abc</div>

     <div class="item">helloflex</div>

</div>

 

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,
자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다.

 

“컨테이너가 Flex의 영향을 받는 전체 공간이고,

설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것"

 

3. Flex의 속성

- 컨테이너에 적용하는 속성

- 아이템에 적용하는 속성

 

시작하기 전에 flex의 대상이 되는 item들이 가로로 축을 가지고 있다고 보면 이해하기 편하다. 

즉 가로로 누운 오뎅꼬치에 item들이 끼워져 있다고 생각하면 좋다!

 

1)컨테이너에 적용하는 속성

(1) display: flex;

Flex 컨테이너에 display: flex;를 적용하는게 시작

.container {

                 display: flex;

                /* display: inline-flex; */ }

 

원래 세로로 쌓이는 박스 세개가 display를 flex로 해주면 가로로 나열된다

마치 inline 요소들 처럼. height는 컨테이너의 높이만큼 늘어난다!

inline-flex도 있는데, 이건 block과 inline-block의 관계를 생각하면 된다.

[block은 너비가 페이지 전체, inline-block은 해당 element의 너비만큼] 
컨테이너가 주변 요소들과 어떻게 어우러질지 결정한다. inline-flex는 inline-block처럼 동작. 

 

(2)배치 방향 설정 flex-direction

아이템들이 배치되는 축의 방향을 결정. 즉 “메인축(오뎅꼬치)의 방향을 가로로 할거냐 세로로 할거냐”를 정해줌.

 

.container {

        flex-direction: row;

        /* flex-direction: column; */

        /* flex-direction: row-reverse; */

       /* flex-direction: column-reverse; */

              }

 

- row: 가로 (container의 크기에 맞게 width가 조절, height는 container의 높이)

- column: 세로 (block처럼 가로가 화면 가득이다) 

- row-reverse: 뒤집은 가로 - 가장 왼쪽이었던 item이 가장 오른쪽 끝으로 

- column-reverse: 뒤집은 세로 - 가장 위였던 item이 가장 아래, 페이지에서도 가장 밑으로 

 

(3)줄넘김 처리 설정 flex-wrap

컨테이너의 width에 비해 아이템들의 width의 합이 더 크면 아이템 줄바꿈을 하기 위해 쓰는 속성

 

.container { flex-wrap: nowrap;

                /* flex-wrap: wrap; */

             /* flex-wrap: wrap-reverse; */ }

 

- wrap : 삐져 나오는 아이템을 아래로 내린다 

- wrap-reverse: 줄바꿈을 하는데 역순으로 배치한다 

 

(4)flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이예요.
flex-direction, flex-wrap의 순으로 한 칸 떼고 써주시면 됩니다.

.container { flex-flow: row wrap;

            /* 아래의 두 줄을 줄여 쓴 것 */

               /* flex-direction: row; */

               /* flex-wrap: wrap; */ }

 

*정렬 들어가기 전에 

“justify”는 메인축(오뎅꼬치) 방향으로 정렬
“align”은 수직축(오뎅을 뜯어내는) 방향으로 정렬

(5)메인축 방향 정렬 justify-content

justify 키워드가 나왔죠? 메인축 방향으로 아이템을들 정렬하는 속성이예요.

 

.container {

     justify-content: flex-start;

    /* justify-content: flex-end; */

    /* justify-content: center; */

    /* justify-content: space-between; */

    /* justify-content: space-around; */

    /* justify-content: space-evenly; */

             }

 

- flex-start (기본값)

아이템들을 시작점으로 정렬합니다.
flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위예요.

- flex-end

아이템들을 끝점으로 정렬합니다.
flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래예요.

- center

아이템들을 가운데로 정렬합니다.

- space-between: 양 끝 간격 없음

아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다.

첫, 마지막 아이템을 양끝으로 가져가고 사이 나머지 item들 사이 균일 간격

- space-around: 양 끝 간격 있음 (= 아이템 사이 간격 1/2)

아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다.

각 아이템의 왼, 오에 균일한 간격(그러므로 첫, 마지막 아이템은 각각 왼, 오만 간격이 있고

나머지 아이템들은 자신의 간격과 양옆에 있는 아이템들 옆 간격까지 합한 간격을 가지게 된다)

- space-evenly: 양 끝 간격 있음 (= 아이템 사이 간격)

아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.

양 끝과 아이템 사이에 간격이 있고 그 간격만큼 모든 아이템 사이에 균일 간격( 즉 모두 간격이 있는데 모두 같은 사이즈다)

주의! IE와 엣지(Edge)에서는 지원되지 않습니다

이 웹사이트의 메뉴 부분은 브라우저 폭이 1024px 이상일 때 space-evenly가 적용되도록 했는데요,

IE와 엣지에서만 space-around로 적용이 되도록 처리해 두었어요.

 

(6) 수직축 방향 정렬
align-items

align 키워드가 나왔죠? 수직축 방향으로 아이템을들 정렬하는 속성이예요.
justify-content와 수직 방향의 정렬이라고 생각하시면 됩니다.

 

.container {

     align-items: stretch;

     /* align-items: flex-start; */

     /* align-items: flex-end; */

     /* align-items: center; */

     /* align-items: baseline; */

             }

 

- stretch (기본값)

아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다. (컨테이너의 높이만큼) 

flex-start

아이템들을 시작점으로 정렬합니다.
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이예요.

flex-end

아이템들을 끝으로 정렬합니다.
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이예요.

center

아이템들을 가운데로 정렬합니다.

baseline

아이템들을 텍스트 베이스라인 기준으로 정렬합니다.

 

[아이템 컨테이너 정중앙에 놓는 방법]

justify-content: center;
align-item: center;

 

(7)여러 행 정렬
align-content

#1. flex-wrap: wrap;이 설정된 상태에서,

#2. 아이템들의 행이 2줄 이상 되었을 때의

#3. 수직축 방향 정렬을 결정하는 속성입니다.

=> 여러 줄들 사이의 간격을 지정

cf. align-items: 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정

 

.container {

      flex-wrap: wrap;

      align-content: stretch;

      /* align-content: flex-start; */

      /* align-content: flex-end; */

      /* align-content: center; */

      /* align-content: space-between; */

      /* align-content: space-around; */

      /* align-content: space-evenly; */

}

 

wrap + align-items 같은 느낌 

모르겠으면 사이트가서 보기 

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자