플렉스 정렬하면 div의 내용이 인라인 블락처럼 작용함
display: flex;
Grid는 몇 개씩 표현할지 정하는 코드가 필요해서 두 줄이 필요함
Flex하면 자식들이 다 Inline Block처럼 바껴서 일자로 정렬됨
Grid : 쇼핑몰같이 규칙적으로 배치가 될 때 사용함
여러줄 배치할때는 Grid
Flex : 한 줄을 정리할때
가운데 배치는 Grid보다 Flex가 좋음
부모가 Flex, 정렬을 justify-content / align items 사용함
배치할 때 부모를 만들어야 나중에 무너지지 않음
1. 가운데 배치하기
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: flex;
justify-content: center;
}
.flex-container {
width: 80%;
display: flex;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>2. 디폴트 값 : row
.flex-container { width: 80%; display: flex; flex-direction: row; background-color: DodgerBlue; }
3. 블락과 동일
.flex-container { width: 80%; display: flex; flex-direction: column; background-color: DodgerBlue; }
디폴트 값이 있음
컬럼 : 세로
로우 : 가로
justify-content : 동적인 정렬
바라보고 있는 축에 따라서 정렬이 달라짐
메인 액시아스(main axis) : 메인 축 정렬
모든 정렬이 지금 가고 있는 축을 기준으로 축 정렬을 함
4. 비율 맞출때
Flex 도 그리드처럼 Flex 의 숫자들의 합이 분모가 되고, 자신의 값이 분자가 됨
.flex-container>div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; height: 50px; flex: 1; }
5. Responsive Flexbox : 화면을 줄였을때 흘러내려가게 하는 방법
조건보다 작으면 작용함
1) 미디어 쿼리(Media Query) : 반응형 브라우저 크기에 따라 반응함
@media (max-width: 800px) { .flex-container { flex-direction: column; } }
2) 부모가 %일때
자식에게 고정 크기
object-fit : contain 자기 비율에 맞게 들어감
fill 꽉 차게 들어감
cover 비율을 유지한 채로 겉이 짤림
3) 2wrap : 미디어 쿼리를 안써도 크기가 줄어들면 내려감
<사진의 크기를 고정으로 지정할 때>
200으로 지정하고 랩을 주면 비율이 안 깨지고 예쁘게 배열됨
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
background-color: yellow;
padding: 10px;
width: 70%;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
width: 300px;
border: 1px solid black;
}
</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 class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
</body>
</html>
Share article
