flex
flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다.
display: flex;
display: -webkit-flex;
display: -ms-flexbox;위의 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다.
예시 이미지
▶ flex
지금은 float으로 세 개의 요소를 가로로 나열할 수 있습니다. flex로 구현한다면 다음과 같이 표현합니다.
flex: 1;flex: 1;은 원래 flex: 1 1 0;의 줄인 표현입니다.
지금은 1 1 auto와도 같습니다. 또 1 1 100px와도 같죠. 앞이 1이면뒤가 뭐든 같은데,
이 세 값은 flex-grow, flex-shrink, flex-basis입니다.
| 속성 값 | 속성 설명 |
| flex : 1 0 100px; | 1 : flex-grow ( 생략 불가능 ) → ① |
| 0 : flex-shrink ( 생략 가능 ) → ② | |
| 100px : flex-basis ( 생략 가능 ) → ③ |
① flex-grow
자식 요소가 적거나 그 크기가 작아 공간이 남을 때 항목의 크기를 늘려 채워주는 방법을 정의합니다.
| 속성 값 | 속성 설명 |
| 0 | (기본값) |
| 1 | 항목들이 모두 1 이면 같은 크기임 |
| 양수 | 값을 높게 줄수록 더 늘어남 공간이 부족할 때는 어떤 값도 무의미 |
② flex-shrink
자식 요소가 많거나 그 크기가 커서 공간이 부족할 때 각 항목의 크기를 줄여 채워주는 방법을 정의합니다.
| 속성 값 | 속성 설명 |
| 0 | 공간이 부족해도 항목의 크기를 줄일 수 없음 |
| 1 | ( 기본값 ) - 자식 요소들이 많아서 컨테이너를 넘치면 안 넘치게 알아서 좁아짐 |
| 양수 | 값을 높게 줄수록 더 좁아짐. ( 내부적으로 수축지수가 자동 계산됨 ) 공간이 남을 때는 어떤 값도 무의미 |
flex-shrink 속성의 기본값은 '1'이기 때문에 자식 요소는 기본적으로 좁아집니다.
③ flex-basis
flex 자식 요소들의 초기 길이를 지정하는 속성입니다. flex에서는 width 속성을 주지 않고,. 대신 flex-basis를 사용합니다.
| 속성 값 | 속성 설명 |
| auto | ( 기본값 ) |
| 50px, 100px, ... | 원하는 가로 크기를 부여함 |
자식 요소들이 늘어나지도 줄어들지도 않고 원래의 크기 ( 100px )를 가지기 원한다면 flex: 0 0 100px로 지정합니다.
flex: <flex-grow> <flex-shrink>ㅋ <flex-basis>의 생략은 다음과 같습니다.
| 속성 값 | 생략 속성 | 속성 설명 |
| flex: none; | 모두 생략 | flex: 0 0 auto; |
| flex: 1; | flex-shrink, flex-basis 생략 | flex: 1 1 0;과 같음 |
| flex: 100px; | flex-grow, flex-shrink 생략 | flex: 1 1 100px;과 같음 |
| flex: 1 1; | flex-basis 생략 | flex: 1 1 0;과 같음 |
| flex: 1 100px; | flex-shrink 생략 | flex: 1 1 100px;과 같음 |
이상의 세 가지 속성이 당장 이해가 되지 않겠지만 flex-grow: 1;을 이용하면 공간이 남아도 한줄 가득 꽉 채울 수 있고,
flex-shrink: 1;을 이용하면 공간이 넘쳐도 한 줄로 줄여서 채울 수 있다는 점이 있습니다. 자식 요소들이 더 많아지면 정렬과 배치의 문제가 발생합니다.
▶flex-direction
자식 요소를 나열하는 방향을 지정하는 속성입니다. 부모 요소에게 지정합니다.
| 속성 값 | 속성 설명 |
| column | 위에서 아래로 나열 |
| column-reverse | 아래에서 위로 나열 |
| row ( 기본값 ) | 좌측에서 우측으로 나열 |
| row-reverse | 우측에서 좌측으로 나열 |
▶ justily-content
공간이 남을 때, 즉 flex-grow: 0;일 때 자식 요소들을 가로 정렬하는 속성입니다.
| 속성 값 | 속성 설명 |
| flex-start( 기본값 ) | 시작쪽으로 정렬 ( 보통 왼쪽, flex-direction: row-reverse일 때는 오른쪽 ) |
| flex-end | 끝쪽으로 정렬 ( 보통 오른쪽, flex-direction: row-reverse일 때는 왼쪽 ) |
| center | 중앙으로 정렬 |
| space-between | 양쪽 정렬 |
| space-around | 요소 좌우 동일 간격 |
▶ flex-wrap
flex 자식 요소들의 줄바꿈 방식을 지정하는 속성입니다.
| 속성 값 | 속성 설명 |
| wrap | 자식 요소들이 많으면 다음 줄로 넘침 |
| nowrap ( 기본 ) | 자식 요소들이 많아도 한줄 안에 배치됨 |
| wrap-reverse | 자식 요소들이 많으면 다음 위 줄로 넘침 |
▶ flex-flow
flex-direction과 flex-wrap을 나란히 붙여 하나의 속성처럼 쓸 수 있습니다.
그러므로 기본값은 flex-flow: row nowrap: 입니다.
▶ align-items
자식 요소들을 세로 정렬하는 속성입니다.
| 속성 값 | 속성 설명 |
| flex-start | 시작쪽으로 정렬 ( 보통 위쪽, flex-direction: column-reverse일 때는 아래쪽 ) |
| flex-end | 끝쪽으로 정렬 ( 보통 아래쪽, flex-direction: column-reverse일 때는 위쪽 ) |
| center | 세로 중앙 정렬 |
| baseline | 글자의 baseline 기준으로 정렬 |
| stretch ( 기본값 ) | 부모 요소의 세로 크기를 따라 확장됨 |
▶order
자식 요소들의 순서를 바꿔주는 속성입니다. 몇 번째에 배치할지 순서를 지정합니다.
| 속성 값 | 속성 설명 |
| 0 ( 기본값 ) | 순서를 바꾸지 않음 |
| 양수 | 원하는 순서를 지정 |
| 음수 | 좌측으로 자리를 바꾸는 횟수 |
▶align-content
flex-wrap: wrap;일 경우 여러 줄을 세로로 정렬하는 속성입니다. 속성들은 align-items의 속성들과 같습니다.
CSS Grid Layout
HTML 요소들을 2차원 그리드(Grid)로 배치하는 레이아웃 시스템입니다. Grid를 사용하면 요소를 쉽게 배치하고, 크기를 지정하고, 위치를 정의할 수 있습니다.
Grid는 행과 열을 사용하여 그리드 영역(Grid Area)을 생성합니다. 각각의 그리드 영역은 각기 다른 HTML 요소를 포함할 수 있습니다. 이를 통해 복잡한 레이아웃을 구성할 수 있습니다.
- display: 그리드 컨테이너를 정의합니다. display: grid를 사용하여 그리드를 생성합니다.
- grid-template-columns, grid-template-rows: 그리드의 열과 행의 크기를 지정합니다. 예를 들어, grid-template-columns: 1fr 2fr는 그리드가 1:2 비율로 두 개의 열을 가지도록 지정합니다.
- grid-template-areas: 그리드 영역을 지정합니다. 각 영역은 이름으로 지정되며, CSS 속성 값으로 그리드에 배치됩니다.
- grid-column, grid-row: 각 그리드 아이템의 열과 행을 지정합니다. 예를 들어, grid-column: 2 / 4는 그리드의 두 번째 열에서 네 번째 열까지를 차지합니다.
예시 이미지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃22 - grid</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-columns: 400px 800px;
grid-template-rows: 100px 100px 780px 100px;
}
#header {
background-color: #FFE0B2;
grid-area: header;
}
#nav {
background-color: #FFCC80;
grid-area: nav;
}
#aside {
background-color: #FFB74D;
grid-area: aside;
}
#section {
background-color: #FFA726;
grid-area: section;
}
#footer {
background-color: #FF9800;
grid-area: footer;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>
</html>