CSS flex는 크게 컨데이너와 아이템으로 구성됩니다. flex속성을 통해 아이템을 정렬하려면, 컨테이너가 필수적입니다. 즉, 기본적으로 부모 태그에서 display:flex; 또는 display:inline-flex 속성이 적용되어 있어야 합니다. 두 방식의 차이점은 컨테이너의 수직 추가 수평추가의 차이입니다.
부모요소에 flex속성을 추가하면, 자식요소에는 자동으로 해당 속성 효과가 부여됩니다.. flex 속성은 부모요소와 자식 요소를 함께 사용합니다.
양측정렬 혹은 균등정렬
두개의 아이템을 왼쪽에 하나의 아이템을 오른쪽레 정렬하는 방법입니다.
fustify-content:space-between; 속성을 사용하면 왼쪽부터 차례로 요소를 균등하게 정렬할수 있다.
<HTML>
<!DOCTYPE html>
<html lang="en">
<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">
<link href="./static/css/common.css" rel="stylesheet" />
<link href="./static/css/style.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="items">BOX1</div>
<div class="items">BOX2</div>
<div class="items">BOX3</div>
</div>
</body>
</html><CSS>
.container {
display: flex;
height: 150px;
justify-content: space-between;
background: #a2d5f2
}
.items {
width: 100px;
height: 50px;
text-align: center;
background: #ffc93c
}
<결과>
자식 요소를 수직으로 중앙정렬
양측 정렬(균등정렬) 상황에서 align=items:center 속성을 추가해주면 다음과 같이 요소가 수직으로 중앙 정렬됩니다.
<CSS>
.container {
display: flex;
height: 150px;
justify-content: space-between;
align-items: center;
background: #a2d5f2
}
.items {
width: 100px;
height: 50px;
text-align: center;
background: #ffc93c
}<결과>
이미지 출처: https://d2.naver.com/helloworld/8540176
네비게이션 정렬: 2개의 요소는 좌측, 1개의 요소는 우측
속성을 사용하면 요소를 우측으로 밀 수 있습니다. 우측 정렬을 원하는 요소에 해당 속성을 부여하면, 요소 바깥이 margin 왼쪽 공간을 차지하며 요소를 오른쪽 미는 원리입니다.
<HTML>
<!DOCTYPE html>
<html lang="en">
<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">
<link href="./static/css/common.css" rel="stylesheet" />
<link href="./static/css/style.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left-items">BOX1</div>
<div class="left-items">BOX2</div>
<div class="right-items">BOX3</div>
</div>
</body>
</html><CSS>
.container {
display: flex;
height: 150px;
background: #a2d5f2
}
.left-items {
width: 100px;
height: 50px;
text-align: center;
background: #ffc93c
}
.right-items {
margin-left: auto;
width: 100px;
height: 50px;
text-align: center;
background: #ffc93c
}<결과>
- 아이템 정렬 옵션
이미지 출처: https://d2.naver.com/helloworld/8540176
위에서 아래로 흐르는 레이아웃
속성을 사용하면 아이템을 오른쪽으로 쌓아가며, 컨테이너를 벗어나는 아이템을 아래로 정렬할 수 있습니다. 속성을 부여하지 않는 경우, 아이템이 컨테이너의 크기에 맞게 설정됩니다. 이를 막기위해서는 flex:none; 을 부여하면 됩니다.
<HTML>
<!DOCTYPE html>
<html lang="en">
<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">
<link href="./static/css/common.css" rel="stylesheet" />
<link href="./static/css/style.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="items">BOX1</div>
<div class="items">BOX2</div>
<div class="items">BOX3</div>
<div class="items">BOX4</div>
<div class="items">BOX5</div>
<div class="items">BOX6</div>
</div>
</body>
</html><CSS>
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
background: #a2d5f2
}
.items {
width: 30%;
margin: 1%;
height: 100px;
text-align: center;
background: #ffc93c
}<결과>
아이템을 위에서 아래로 쌓고, 컨테이너를 초과하는 아이템을 오른쪽으로 쌓으려면 컨테이너에 flwx-direction:column을 추가하면 됩니다.
<CSS>
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
background: #a2d5f2
}
.items {
width: 30%;
margin: 1%;
height: 100px;
text-align: center;
background: #ffc93c
}<결과>
'웹앱 > CSS' 카테고리의 다른 글
| position 속성 (0) | 2022.04.16 |
|---|---|
| CSS 기초 - text 속성 (0) | 2021.08.28 |
