css 마지막 시간으로 가장 중요한 display 속성 중 flex에 대해 학습해보자! 프론트엔드 개발자은 많이 많이 쓰이는 속성이므로 꼭 숙지할것!..!
flex 속성이란?
CSS3 등장부터 나타난 방식으로 화면 레이아웃을 구성할 때, 가장 많이 사용하는 방법 중 하나이다.
⭐ 부모 요소에 flex를 선언하면, 자식 요소들의 레이아웃을 변경시킨다!!
- flex Container: flex 속성을 갖는 요소로 flex 부모 요소라고도 한다.
- flex items: flex 속성을 갖는 요소의 자식 요소들로 flex 자식 요소라고도 한다.
➡️ 부모 요소에 "flex"을 선언하면, 아이템(자식)이 가로 방향으로 배치
Flexbox 기본 용어
- 주축 (main Axis)
flex 컨테이너 내에서 Flex 아이템들이 배치되는 기본 뱡향을 나타내는 축 - 교차축 (cross Axis)
주축에 수직인 축
flex 컨테이너에 적용되는 속성들
-
flex direction : flex 방향을 설정 즉, 주축의 방향을 가로로 할거냐 세로로 할거냐를 정해주는것이다.
- row (default) : 수평 정렬 (좌 -> 우)
- row-reverse : 수평 정렬 (우 -> 좌)
- column : 수직 정렬 (위 -> 아래)
- column-reverse : 수직 정렬 (아래 -> 위)
-
flex-wrap : 줄바꿈 (개행) 처리 ➡️ 컨테이너(부모)가 한 줄에 아이템을 다 수용하지 못할 때, 줄바꿈 관련 설정
- nowrap (default) : 줄바꿈 안함.
- wrap : 줄바꿈 함.
(부모를 기준으로 중간에 가상선이 있는데 그것을 기점으로 두 줄로 개행) - wrap-reverse: 줄바꿈 하는데 아이템을 역순 배치.
📌 flex-direction과 flex-wrap는 자주 같이 쓰이기 때문에 단축어 존재
➡️ flex-flow: [flex-direction][flex-wrap]
예시) flex-flow: row wrap 👉 요소들을 가로선 상의 여러줄에 걸쳐 정렬 -
justify-content : 주축 방향으로 아이템들을 정렬
- flex-start (default): 아이템을 주축에 대해서 start 지점을 기준으로 나열
- flex-end : 아이템을 주축에 대해서 end 지점을 기준으로 나열
- space-between : 처음과 마지막 아이템을 양 끝에 붙이고 나머지 영역을 공평하게 나눔.
- space-around : 아이템들의 모든 여백을 공평하게 갖도록 함. (양끝 영역의 단위가 1이라면, 나머지 영역의 단위는 2이다.)
- space-evenly : start부터 첫 아이템의 간격, 아이템끼리의 간격, 마지막 아이템부터 end까지의 모든 간격이 일정
-
align-items : 교차축 방향으로 아이템들을 정렬
- stretch (default) : container의 교차축을 채우기 위해 늘림.
- flex-start : 교차축에 대하여 시작점으로 정렬.
- flex-end : 교차축에 대하여 끝점으로 정렬.
- center : 교차축에 대하여 가운데 정렬.
- baseline : 아이템을 텍스트의 베이스라인을 기준으로 정렬.
-
align-content : 여러 행에 대한 정렬
(조건) flex-wrap: wrap 이나 wrap-reverse 상태에서 아이템이 두 줄 이상일 때 수직축 방향으로 정렬
- stretch, flex-start, flex-end, center, space-between, space-around 속성이 있으며 위에 설명한것과 같음!!
👉 직접 코드를 쳐서 어떻게 변화하는지 보는것이 가장 좋음!
➕ flex 아이템 간의 간격을 조절하는 속성으로 gap 이 있다.
.flex-container {
display: flex;
gap: 10px; /* 플렉스 아이템 간 10px 간격 설정 */
}실습
<body>
<h1>Flex를 이용해 여러 종류의 Header를 만들어보자!</h1>
<br />
<!-- header1 -->
<header class="header1">
<span>LOGO</span>
<ul class="menus">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</header>
<br />
<hr />
<br />
<!-- header2 -->
<header class="header2">
<ul class="menus">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</header>
<br />
<hr />
<br />
<!-- header3 -->
<header class="header3">
<span>LOGO</span>
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
<span>LOGIN</span>
</header>
</body>⬆️ html 코드
/* header1 */
.header1 {
display: flex;
justify-content: space-between;
align-items: center;
}
.header1 > .menus {
display: flex;
gap: 0 20px;
}
/* header2 */
.header2 {
align-content: center;
}
.header2 > .menus {
display: flex;
justify-content: space-between;
}
/* header3 */
.header3 {
display: flex;
justify-content: space-between;
align-items: center;
}
.header3 > ul {
display: flex;
gap: 0 20px;
}⬆️ 내가 작성한 CSS 코드
.header2 > .menus {
width: 100%;
height: 100%; /* 부모의 높이와 똑같이 맞춰줘야 수직정렬이 가능 */
display: flex;
justify-content: space-between;
align-items: center;
}⬆️ 문법상 맞는 코드
📌 생각해볼점 (헷갈렸던 hearder2 요소만 보자면)
align-content 속성은 부모(flex container)에게만 적용되므로 위 코드에서는 menus 요소에 align-content 속성을 적용시켜한다. 그런데 내가 작성한 코드에서는 적용되었다. 브라우저마다 기본적으로 갖는 스타일이 있는데 우연히 맞는 스타일이 적용된 것같다. 따라서 우리가 알아야할 점은! align-content 속성은 flex container 요소에만 쓸 수 있는 속성이고 flex-wrap: nowrap(한 줄)이 아닌 요소에만 사용이 가능한 속성이다!!
마무리하며..
프론트엔드에게 정말 중요한 flex 속성에 대해 배웠다. 레이아웃을 설정할 때 아주 중요한 개념이니 꼭 꼭 꼭 숙지해야겠다. flex 속성은 부모와 자식의 관계를 잘 파악하는 것이 중요하며 container(부모), items(자식)에게 적용하는 속성이 다르니 구분을 잘해서 사용할것!
출처 및 참고
1. https://studiomeal.com/archives/197
2. https://jollyworker.co.kr/css%EC%9D%98-display-flex%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9B%B9-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%EC%84%B1%EA%B3%BC-%EC%A0%95%EB%A0%AC/
3. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
