chapter.03 - flex

 

회원가입 페이지 만들기···.

새로운 css 개념이 있어서 어려웠다!

예전에 배웠을때는 float 개념으로 했었는데, 이젠 display:flex; 로 사용한다고 한다.

확실히 float 보다는 쉬운 것 같다.

그럼 오늘은 다른 css 개념보다도 display:flex에 대해 집중적으로 정리하도록 하겠다.

 

 

1. display 옵션

display 속성은 웹 페이지 내의 요소가 어떻게 보여지는지, 레이아웃 박스의 유형을 결정하는 중요한 속성이다.

이 속성은 요소가 문서 흐름에 어떻게 포함될 지, 다른 요소들과 어떻게 상호 작용할 지를 정의한다.

display 속성에는 여러값이 있다.

 

속성	설명	적용 예시
none	화면에서 보이지 않게 해준다  요소가 차지하는 공간 조차 없애버린다 ( 렌더링 할 때 제외됨 )	display : none;
block	하나의 요소가 수평으로 나열된다. width, height, margin, padding과 같은 속성 적용 가능	display : block;
inline	하나의 요소가 수직으로 나열된다. width, height, margin, padding과 같은 속성 적용 불가능	display : inline;
flex(flexbox)	유연한 박스 모델을 제공하며 가로나 세로 축을 기분으로 유연하게 배치할 수 있다. 자식 요소들을 다양한 방향과 순서로 정렬할 수 있게 해준다.	display : flex;
gird	행과 열의 형태로 공간을 분할 하여 요소를 배치한다.	display : gird;

 

 

우리는 이중에서 flex에 대해 집중적으로 정리하려고 한다.

 

2. flex(flexbox)

flex는 부모 요소에 적용하면 자식 요소들을 유연하게 배치할 수 있다.

flex에는 다양한 옵션이 있는데 그 옵션에도 적용되는 내용들이 다양하다.

 

• flex-direction : 플렉스 아이템들이 행(row) 또는 열(column) 방향으로 배치되는지 결정한다.
• justify-content : x축을 따라 플렉스 아이템들의 정렬 방법을 결정한다.
• align-items : y축을 따라 플렉스 아이템들의 정렬 방법을 결정한다.
• flex-wrap : 플렉스 아이템들이 컨테이너 내에서 줄바꿈할 지 여부를 결정한다.
• align-content : 여러 행의 아이템들이 y축을 따라 어떻게 정렬될 지 결정한다.
• flex-grow, flex-shrink, flex-basis : 플렉스 아이템의 성장, 축소 및 기본 크기를 결정한다.

 

1) justify-content 속성

justify-content은 x축 (가로축) 을 따라 플렉스 아이템들의 정렬 방법을 결정한다.

 

속성	설명
flex-start	요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end	요소들을 컨테이너의 오른쪽으로 정렬합니다.
center	요소들을 컨테이너의 가운데로 정렬합니다.
space-between	양 끝을 제외한 요소들 사이에 동일한 간격을 둡니다.
space-around	요소들 주위에 동일한 간격을 주나, 공백이 겹치는 구간과 그렇지 않은 부분의 넓이가 달라집니다.
space-evenly	전체적인 요소들 주위에 동일한 간격을 둡니다.

 

- flex-start 모든 요소들을 컨테이너 왼쪽으로 정렬

 

- flex-end 모든 요소들을 컨테이너 오른쪽으로 정렬

 

- center 모든 요소들을 컨테이너 가운데로 정렬

 

이때 gap 라는 속성을 주면 요소마다 간격을 줄 수 있다

 

 

 

- space-between 적용 시 양 끝을 제외한 요소들 사이에 동일한 간격을 줌

 

- space-around 적용 시 동일한 간격을 주지만 공백이 겹치는 구간과 그렇지 않은 부분의 넓이가 달라짐.

 

- space-evenly 적용 시 전체적인 요소들 주위에 동일한 간격을 줌

 

**align-content도 space-between / space-around / space-evenly 속성을 사용할 수 있

 

 

2) align-items 속성

align-items은 y축 (세로축) 을 따라 플렉스 아이템들의 정렬 방법을 결정한다.

속성	설명
flex-start	요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end	요소들을 컨테이너의 바닥으로 정렬합니다.
center	요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline	요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch	요소들을 컨테이너에 맞도록 늘립니다.

 

- flex-start 요소들을 상단으로 정렬

 

- flex-end 요소들을 바닥으로 정렬

 

- center 요소들을 가운데로 정렬

 

 

 

- baseline 요소들을 컨테이너 시작 위치에 정렬 ( 컨테이너가 1개 밖에 없어서 이렇게 보이는 거지 컨테이너 추가하면 다르게 보임 )

 

**컨테이너 추가 시 적용 이미지

 

- stretch 요소들을 컨테이너에 맞도록 늘립니다. (관련해선 좀 더 내용이 필요함)

 

 

---

 

 

일단 간략하게 해당 속성에 관해서 정리해봤고, css 관련 내용은 차차 정리해서 올리도록 하겠다.