CSS flex 속성

CSS flex란?

일반적인 웹페이지의 레이아웃을 구성하기 위해서는 display, float, position등을 사용하여 레이아웃을 구축한다. 하지만 이 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는 데 한계에 부딪친다. 구현하기 어려운 레이아웃을 구성하기 위해서 flex가 나타난 것이다. display: flex;로 해당 요소에 flex를 지정하면 사용이 가능하다.

 

flex는 하나의 flex item이 자신의 container가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성요소로 크기와 순서를 유연하게 배치하는 것이 가능하다. flex의 속성은 크게 겉을 감싸고 있는 container 속성과 내부에 존재하는 div들인 item에 적용하는 속성으로 구분된다.

 

flex litem은 inline요소처럼 가로의 크기가 본인의 크기만큼만 자리를 잡는다. 높이는 컨테이너의 높이만큼 늘어난다. 기본적으로 flex litem은 콘텐츠의 최소 너비 미만으로 줄어들지 않는다. min-width나 min-height 값을 지정해 바꿀 수 있다.

 

 

flex 속성을 간단하게 공부하고 싶다면 flexboxfroggy.com 를 이용하도록 하자!

 

 

---

 

Flex

flex는 한개에서 최대 세개까지의 속성지정이 가능하다.  갯수에 대한 속성은 해당 링크에서 확인 가능하다.

 

 

 initial 

아이템 크기가 각각의 width와 height 속성에 따라 정해진다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않는다. flex: 0 1 auto와 동일하다.

 

 auto 

아이템 크기가 각각의 width와 height 속성에 따라 정해진다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있다. flex: 1 1 auto와 동일하다.

 

 none 

아이템 크기가 각각의 width와 height 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않는다. flex: 0 0 auto와 동일하다.

 

 

 

flex-grow

: <number> 상태일때는 음수 값은 유효하지 않는다. 생략 시 기본값은 0이다. 

flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받는다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 된다.

 

 

flex-shrink

: <length> 상태일때는 음수 값은 유효하지 않는다. 생략 시 기본값은 1이다.

flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다.

 

 

flex-basis

: <length> 상태일때는 음수 값은 유효하지 않는다. 생략 시 기본값은 1이다.

플렉스 아이템의 초기 크기를 지정한다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경한다.

 

---

 

 flex 아이템에 적용하는 속성 

 

flex-basis(유연한 박스의 기본영역)

: Flex 아이템의 기본 크기를 설정한다.(flex-direction이 row일 때는 너비, column일 때는 높이).

 

 

flex-grow(유연하게 박스늘리기)

: 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. 기본값이 0이기 때문에, 따로 적용하기 전까지는 아이템이 늘어나지 않는다. flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가지는 느낌이다.

 

 

flex-shrink(유연하게 줄이기)

: flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아진다.

 

 

 

 

---

 축의방향을 결정하는 속성들 

 

Flex-direction(배치 방향설정)

: 아이템들이 배치되는 축의 방향을 결정하는 속성. 메인축을 가로인지, 세로인지 결정하는 속성이다.

1. row: 가로정렬(기본값) 

2. row-reverse: 역순가로정렬

3. column: 세로정렬

4. column-reverse: 역순세로정렬

 

 

Flex-wrap(줄넘김 설정)

: 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.

1. nowrap: 줄바꿈을 하지않는다. 내부 내용은 컨테이너를 빠져나가며 기본값으로 설정되어 있다. (기본값)

2. wrap: 줄바꿈을 한다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작한다.

3. wrap-reverse: wrap와 동일하게 줄바꿈을 하나, 역순으로 배치된다.

 

 

Flex-flow(단축속성)

: flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다. 앞 순서대로 한 칸 떼고 써주시면 된다.

1. nowrap: 줄바꿈을 하지않는다. 내부 내용은 컨테이너를 빠져나가며 기본값으로 설정되어 있다. 

2. wrap: 줄바꿈을 한다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작한다.

3. wrap-reverse: wrap와 동일하게 줄바꿈을 하나, 역순으로 배치된다.

 

 

---

 

 

 정렬하는 속성들 

 

justify-content(메인축 방향설정)

: 아이템들이 배치되는 축의 방향을 결정하는 속성. 메인축을 가로인지, 세로인지 결정하는 속성이다.

 

1. flex-start: 아이템의 시작지점에서 정렬한다. 기본값으로 설정되어 있으며 flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위쪽으로 설정된다.

2. flex-end: 아이템의 끝점에서 정렬한다. flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래다.

3. center: 아이템을 가운데로 정렬한다.

4. space-between: 아이템의 사이에 균일한 간격을 만들어 준다.

5. space-around: 아이템의 둘레에 균일한 간격을 만들어 준다.

6. space-evenly: 아이템의 사이와 양 끝에 균일한 간격을 만들어 준다. ※ IE와 엣지(Edge)에서는 지원되지 않는다.

 

 

align-items(수직축 방향설정)

: 아이템들이 배치되는 축의 방향을 결정하는 속성. 메인축을 가로인지, 세로인지 결정하는 속성이다.

 

1. stretch: 아이템이 수직축 방향으로 끝까지 늘어난다. 기본값으로 설정되어 있다.

2. flex-start: 아이템을 시작점에서 정렬한다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이다.

3. flex-end: 아이템을 끝에서 정렬한다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이다.

4. center: 아이템을 가운데로 정렬한다.

5. baseline: 아이템을 텍스트 베이스라인 기준으로 정렬한다.

 

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

위 형태를 사용하면 아이템을 정가운데 지정하기 편하다.

 

 

align-content(여러행 방향설정)

: flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성이다.

해당링크를 참고하여 어떤 효과인지 확인 가능하다.

 

 

 

---

 

 아이템 정렬 

 

align-self(수직축으로 아이템 정렬)

: align-items의 아이템 버전. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬이다. 기본값은 auto로, 기본적으로 align-items 설정을 상속 받는다.

 

 

order(배치순서)

: 각 아이템들의 시각적 나열 순서를 결정하는 속성이다. 숫자값이 들어가며, 작은 숫자일 수록 먼저 배치된다. “시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의해야한다.

 

※ 시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다

 

 

z-index

: Z축 정렬 한다. 숫자가 클 수록 위로 올라간다.

 

 

 

참고링크 : https://studiomeal.com/archives/197

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

참고링크 : https://naradesign.github.io/article/flex-justify-align.html

CSS flexible 레이아웃: flex item의 정렬과 간격.

참고링크 : https://d2.naver.com/helloworld/8540176

참고링크 : https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex