카테고리 없음
HTML5 - diplay: flex; flex-direction, align-items, justify-content 요약
artra
2023. 6. 29. 16:48
반응형
|
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
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
height: 300px;
display: flex;
/* 아래 flex-direction, align-items, justify-content를 사용하려면
무조건 display: flex; 를 선언 해야한다*/
flex-direction: column; /*박스들을 가로로 할것이냐 세로로 할것이냐*/
/* column 행(세로), row 열(가로) */
align-items: flex-start; /*행 위치*/
/* flex-start 왼쪽, center 중간 , flex-end 오른쪽 */
justify-content: flex-end; /*열 위치*/
/* flex-start 상단, center 중단 , flex-end 하단 */
background-color: red;
}
.flex-item {
background-color: green;
width: 50px;
height: 50px;
margin: 10px;
text-align: center; /* 텍스트를 박스 중앙에 */
line-height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
|
cs |
display: flex;는 CSS 코드에서 사용되는 속성으로,
해당 요소를 flex 컨테이너로 만들고 그 안의 자식 요소들을
유연하게(get flexible) 배치할 수 있도록 함을 나타낸다.
이렇게 설정하면, 자식 요소가 차지하는 공간에 따라 크기와 위치를 동적으로 조절할 수 있습니다.
align-items와 justify-content 속성을 사용하기 전에
해당 요소에 display: flex;나 display: inline-flex;를 선언해야 함
반응형