CSS Tutorial (5) flexbox / CSS 시작하기 (5) flexbox

 

 

 

 

 

 

 

 

4챕터 flexbox에 관한 내용이다.

강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다.

https://class101.net/ko

CLASS101+ | 세상의 모든 클래스를 하나의 구독으로

 

 

 

 

 

 

 

 

챕터 4. flexbox - flexbox 속성 활용하기

 

 

 

 

 

 

1강. flexbox 1편, 정의 및 사용 방법

 

 

(1) flexbox

flexbox란 flex박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한

1차원 레이아웃 모델이다.

 

1차원 레이아웃 모델이란?

flexbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한번에

하나의 차원 (행row / 열 column)만을 다룬다는 특성 때문이다.

 

예를 들어 flexbox가 행을 다룰 때는 요소를 가로 방향으로 진행시키고

열을 다룰 때는 요소를 세로 방향으로 진행시키게 된다.

 

 

 

 

 

 

(2) flexbox 만들기

flexbox는 요소들을 포함하기 때문에 컨테이너 박스라고도 이야기한다.

flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex;를 적용해야 한다.

(기본설정은 행에 대한 정렬이다. / 가로로 쭉 늘여놓는다는 뜻)

 

 

 

 

display:flex 적용전

 

 

 

 

  

display:flex 의 기본값은 행이기 때문에 가로로 나란히 배치되었다.

(기본 margin값은 무시된다고 한다. -> 딱 달라 붙어있다.)

 

 

 

 

 

margin-left: 10px; 코드를 추가하니 조금 간격이 생겼다.

 

 

 

 

 

 

(3) flexbox의 축 개념 (중요)

 

 

 

 

flexbox로 레이아웃 정돈하기 전에 알아야 할 중요한 개념은 주축과 교차축이다.

주축(main-axis)은 현재의 정렬 방향을 의미하고 교차축(cross-axis)은 그에 반대되는 축이다.

flexbox의 기본 주축 방향은 행방향이고 교차축은 열방향이다.

이는 사용자 설정에 따라 바꿀 수 있으며, 그럴 경우 레이아웃의 주축과 교차축이 뒤바뀔 수 있다.

주축과 교차축에 따라 레이아웃에 큰 영향을 끼친다.

 

 

 

 

 

(4) flex-direction

앞서 말한 축방향과 요소 배치방향도 지정할 수 있다.

flex-direction 속성은 flexbox 내 요소를 배치할 때,

사용할 주축 및 방향 (정방향 , 역방향)을 지정한다.

 

row: 기본값. 주축이 행이고 방향은 일반적인 요소들의 진행 방향과 동일.

row-reverse: 주축은 행이고 방향은 일반적인 요소들의 진행 방향과 반대.

column: 주축은 열이고 방향은 일반적인 요소들의 진행 방향과 동일

column-reverse: 주축은 열이고 방향은 일반적인 요소들의 진행 방향과 반대

 

 

 

 

 

flex-direction: column;

 

 

 

 

 

flex-direction: row-reverse;

 

 

 

 

 

flex-direction: column-reverse;

 

 

 

 

 

 

 

| 정리 |

* flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원(행 또는 열)

레이아웃 모델이다.

* 행 또는 열이 주축이 되어 요소의 정렬 방향을 결정한다.

* flex-direction 속성은 요소를 배치할 때 사용할 주축 및 방향을 지정한다.

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

2강. flexbox 2편, 몇가지 관련 속성

 

flex에는 주축(main-axis)과 교차축(cross-axis)이 있다는 것을 명심하며 들어가보자!

 

 

(1) flexbox 다루기

주축 배치 방법: justify-content

교차축 배치 방법: align-items

교차축 개별요소 배치 방법: align-self

줄 바꿈 여부: flex-wrap

 

 

 

 

 

(2) justify-content

 

 

 

justify-content: center;

 

 

 

 

justify-content: flex-start;

 

 

 

 

 

justify-content: flex-end;

 

 

 

 

 

justify-content: space-around;

같은 간격으로 띄워주기.

 

 

 

 

 

justify-content: space-between;

양끝에 붙여 준 뒤, 남은 공간을 똑같이 나눠서 배분.

 

 

 

=> 이처럼 justify는 주축을 기준으로 요소들을 정렬한다.

 

 

 

 

 

 

 

 

 

 

(3) align-items

justify-conten와 갖고 있는 속성값들은 비슷하다.

justify-content: between을 적용해 놓은 채로 align-items 속성값들을 살펴보려 한다.

 

 

 

 

align-items: center; 

현재 디폴트 교차축인 세로를 기준으로 중간 배치.

 

 

 

 

 

 

align-items: flex-start; 

현재 디폴트 교차축인 세로를 기준으로 시작점에 배치.

 

 

 

 

 

 

align-items: flex-end; 

현재 디폴트 교차축인 세로를 기준으로 끝점에 배치.

 

 

 

 

 

 

 

 

 

 

(4) align-self

개별요소를 따로 이동시킬 수 있다.

 

 

 

align-self: flex-start;

2번째 박스만 self클래스를 하나 추가해준 뒤, flex-start로 정렬해주었다.

신기하게도 다른 클래스를 만들었으니 align-items: flex-start로 작성해주어도 되지 않을까

했는데 적용이 안된다.

한번 정렬을 해주고 나면 해당 요소에 대해 중복적으로 정렬을 바꿔줘도 안먹히는 것 같다.

그렇다보니 self라는 속성이 따로 있는 것 아닐까 하는 생각도 든다.

마찬가지로 flex-end, center 모두 다 있다.

 

 

 

 

 

 

(5) flex-warp

아이템들의 정렬된 크기가 컨테이너의 크기를 넘을 경우에 대한 정의.

 

 

 

 

 

기본적으로 컨테이너의 크기를 하위요소들이 넘게 되면,

삐져나오거나 잘리는 것이 아닌, 그 크기에 맞게 각각의 요소들을 줄여버린다.

(가장 기본 디폴트 상태: flex-warp: nowrap;)

 

 

 

 

 

 

 

flex-wrap: wrap;

으로 설정하면 다음 행(주축방향)으로 넘겨준다.

근데 간격은 못줄이나.. 엄청 넓다.

 

 

 

 

 

 

 

flex-wrap: wrap-reverse;

다음행으로 넘겨준 다음, 반대로 정렬한다. (마치 아래부터 차곡차곡 쌓이는 느낌)

 

 

이 외에도 flex-wrap에는 다양한 속성값들이 존재한다.

 

 

 

 

 

 

 

 

 

| 정리 |

* justify-content는 flexbox 주축에서의 요소 배치 방법을 정의한다.

* align-items는 flexbox 교차축에서의 요소 배치 방법을 정의한다.

* align-self는 flexbox 내 개별 요소의 교차축 배치 방법을 정의한다.

* flex-wrap은 개별 요소들의 도합 크기가 컨테이너 주축 길이보다

커졌을 때의 처리 방법 및 방향을 정의한다.

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

이 글은 클래스 101, "프로그래밍 입문자를 위한 CSS 기초 (유노코딩)" 강의를

기반으로 작성되었음을 알립니다.