플렉스 정렬하면 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
