| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- AWS EC2 서버 만들기
- JavaScript 실행 디버깅
- javascript scope
- linux foreground
- 자바스크립트 이벤트 루프
- Linux mkdir
- javascript 정렬
- Linux 디렉터리 역할
- 서버의 서비스 방식
- HTTP Web Server
- Linux ls
- EC2 zsh
- Linux rmdir
- Linux 디렉터리 명령어
- Linux cd
- Linux apt
- Linux 파일 관리 명령어
- Linux pwd
- Logback
- Linux oh my zsh
- 자바스크립트 런타임
- JavaScript EventLoop
- linux background
- Linux 디렉터리 구조
- Navigation Pattern
- EC2 Apache2
- Linux cat
- EC2 HTTP 호스팅
- EC2 oh my zsh
- Linux apt-get
Archives
- Today
- Total
HyunJun 기술 블로그
CSS Flex 본문
728x90
반응형
1. Flex?
Flex는 레이아웃 배치 전용 기능으로, 요소들을 하나로 묶어 특정 방향으로 정렬하고자 할 때 사용한다.
- 부모 요소인 div를 Flex Container라고 부르고, Flex Container의 자식 요소인 div들을 Flex Item이라고 부른다.
- 기본적으로 Flex Container가 Flex 영향을 받는 전체적인 공간이고 Flex Container에 설정된 값에 따라, Flex-item들이 정렬된다.
- Flex는 컨테이너와 아이템에 적용하는 속성이 나뉘게 된다.
2. flex-container에 적용하는 속성
1) display: flex
- display:flex 속성을 통하여 flex를 적용시킨다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex-container {
display: flex;
}
.flex-item {
min-width: 100px;
min-height: 100px;
}
.flex-item:nth-child(1n) {
background-color: red;
}
.flex-item:nth-child(2n) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item">
</div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>부모 요소(flex-container)에 flex 설정만 해주어도 각각의 Flex item들이 흡사 inline-block 요소처럼 설정된다.
- 여러 개의 div들이 inline 요소처럼 content의 내용만큼 width를 가진다.
- 현재는 min-width를 사용하여 최소한의 크기를 지정해놓고 컨텐츠가 해당 width를 넘어갈 때에만 커지게 만들어 놨음.
- block 요소처럼 width 설정이 가능해진다.
- height는 컨테이너의 높이와 동일하게 맞추어진다.
위의 결과를 봤을 때, flex-container 안에 flex-item들이 가로로 배치되는 걸 볼 수 있다. 그럼 다른 방향으로 배치하려면 어떻게 해야 할까?
2) 배치 방향 설정 (flex-direction)
Flex Item들을 배치되는 메인 축의 방향을 결정하는 속성이다.
- flex-direction: row; (default) 가로 방향
- flex-direction: column; 세로 방향
- flex-direction: row-reverse; 역 가로 방향
- flex-direction: column-reverse; 역 세로 방향
column.
direction 설정을 column으로 주게 되면 flex-item들을 메인축을 세로로 정렬하게 된다.
.flex-container {
display: flex;
flex-direction: column;
}아래와 같이 메인축이 세로로 오게 정렬이 되게 된다. flex item들을 width로 고정하면 왼쪽과 같이 되지만, 현재처럼 min-width인 경우 최대한 늘어나게 된다.
3) 줄 넘김 처리 (flex-wrap)
flex-container가 더 이상 flex-item들을 한 줄에 담을 공간이 없을 때 어떻게 처리할지 결정하는 속성이다.
- flex-wrap: nowrap: 기본값으로서, 줄바꿈을 하지 않고 넘치면 flex-item이 삐져나온다.
- flex-wrap: wrap; 요소가 화면 밖을 벗어나면 다음 위치의 아래 줄에 재정렬 한다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex-container-nowrap {
display: flex;
border: 5px solid blue;
}
.flex-container-wrap {
display: flex;
flex-wrap: wrap;
}
.flex-item {
min-width: 500px;
min-height: 100px;
border: 1px solid black;
}
.flex-item:nth-child(1n) {
background-color: red;
}
.flex-item:nth-child(2n) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="flex-container-nowrap">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
<br />
<br />
<br />
<div class="flex-container-wrap">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
nowrap
- Flex-item들이 width로 설정된 경우 Flex-container의 크기에 비율이 맞게 정렬한다.
- Flex-item들이 min-width로 설정된 경우 Flex-container를 넘어가면 밖으로 나오게 된다.
wrap
- 배치 방향에 따라 다음 줄로 Flex-item들이 재배치됨.
아래의 결과를 보면 nowrap으로 설정한 flex-container들의 flex-item들은 부모 요소인 컨테이너를 뚫고 나와서 스크롤바가 생겼다. wrap으로 설정한 경우 flex-item 들이 넘치지 않게 아래로 줄바꿈을 하여 정렬한 것을 확인할 수 있다.
4) justify-content (주축 방향 정렬)
주 축(main-axis)의 정렬 방법을 설정한다. flex-dircetion에서 설정한 방향에 따라 기준이 바뀐다.
- flex-start(기본값): flex-item들을 시작점 기준으로 정렬한다.
- flex-end: flex-item들을 끝점 기준으로 정렬한다.
- center: flex-item들을 가운데 정렬한다.
- space-between: 시작 flex-item과 끝 flex-item이 양 끝에 붙게 되고 나머지 여백은 균일하게 정렬된다.
- space-around: flex-item의 하나하나의 요소를 기준으로 양옆 균일한 여백을 적용한다.
- space-evenly: flex-item들의 여백을 전부 같은 간격으로 만든다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex-container {
width: 500px;
height: 500px;
display: flex;
border: 5px solid blue;
flex-direction: row;
justify-content: center;
}
.flex-item {
min-width: 50px;
min-height: 50px;
border: 1px solid black;
}
.flex-item:nth-child(1n) {
background-color: red;
}
.flex-item:nth-child(2n) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
5) align-items (수직축 방향 정렬)
- stretch(기본값): flex-item들을 수직축 방향으로 끝까지 늘린다.
- stretch가 기본값이라 min-width, min-height 설정 시 flex-item들이 끝까지 늘어난 것(바로 위의 이미지 예제 참고)
- flex-start: flex-item들을 시작점으로 정렬한다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이다.
- flex-end: flex-item들을 끝으로 정렬한다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽이다.
- center: flex-item들을 가운데로 정렬한다.
- baseline: flex-item들을 텍스트 베이스라인 기준으로 정렬합니다. (예제 생략)
6) gap
flex-item들 간의 gap을 설정할 수 있다.
3. flex-item들에게 적용하는 속성
1) flex: 1;
- 주축 방향(flex-direction)이 row일 경우 align-items의 stretch와 반대로 비율에 맞게 모든 flex-item 들의 width가 꽉 차게 된다.
- 주축 방향(flex-direction)이 column일 경우 align-items의 stretch와 반대로 비율에 맞게 모든 flex-item 들의 height가 꽉 차게 된다.
마지막으로 아래와 같은 구현도 가능하다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex-container {
width: 500px;
height: 500px;
display: flex;
border: 5px solid blue;
/* gap: 50px; */
/* flex-wrap: wrap; */
}
.flex-item {
min-width: 50px;
min-height: 50px;
border: 1px solid black;
}
.flex-item:nth-child(1n) {
background-color: red;
}
.flex-item:nth-child(2n) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
여기에 flex-item에 flex: 1;을 넣게 되면?
.flex-item {
flex: 1;
min-width: 50px;
min-height: 50px;
border: 1px solid black;
}
728x90
반응형
'CSS' Related Articles
more
Comments