[CSS Layout] Flex box 1. 기본 방향_flex-direction
[CSS Layout] Flex box 1. 기본 방향_flex-direction
w3schools.com 에서 소개하는 바와 같이, Flex box의 가장 큰 강점은 디자인을 float 나 position을 설정하지 않고도 유연성있는 반응형 레이아웃 구성을 할 수 있도록 해준다는게 있어요. 모던 웹브라우져
jaehyunshin.tistory.com
지난번에 이어서 이번에는 wrap 이라는걸 살펴볼겁니다.
먼저 간단히 복기를 해보면, flex-direction을 통해서 자식 요소들을 행, 열 또는 반대 순서대로 배치하는걸 살펴볼 수 있었고, 그걸 통해 간단한 홈페이지의 구성도 쉽게 만들 수 있었죠.
이번에는 내부 요소들의 크기가 부모요소보다 큰 경우 이걸 계속 지나가게 둘지, 아니면 줄을 바꿔 진행시킬지 여부를 건드려볼거에요.
지난번 구성했던 홈페이지 구성을 가지고 조금 더 건드려보도록 할게요.
[CSS Layout] Flex box 1. 기본 방향_flex-direction 응용
[CSS Layout] Flex box 1. 기본 방향_flex-direction 응용
지난번 살펴본 Flex Box의 기본방향 'flex-direction' 을 응용해보면, 어떨까 갑자기 생각이 나서.. 기본적인 홈페이지의 구성을 하나하나 잡아가보면서 진행하면 어떨까 싶어서요. 대강 막 쳤어요. 상�
jaehyunshin.tistory.com
메인영역에 카드를 집어넣어보도록 할게요.
일단 네모난 이미지가 들어가고, 제목이랑 관련된 문구가 들어가는 구성으로 만들어봅니다.
이걸 복사해서 붙여넣기 할거에요. 하나 만들었다면 그냥 복붙해도 괜찮아요 우리는 더 만들겁니다.
이렇게 꽉 차는걸 볼 수 있어요.
이 card 를 감싸고 있는 main이라는 구역에 display:flex를 넣었고, 정렬은 기본적으로 row가 됩니다.
폰트 크기랑은 신경 쓰지 말고 가볼게요. 우리는 wrap을 볼거지, 이게 이쁘게 나오는지 보는건 나중에 손보면 되니까요.
카드의 너비를 넘겨서 이미지를 4또는 500px로 고정해 주게되면, 아래와 같이 애매.. 해지는 상황을 보게 됩니다.
기본적으로 flex 의 wrap 속성은 nowrap으로 넘어가는 자식요소들을 그냥 넘어가게 둡니다. 위의 오른쪽 영역은 원래 'aside'라는 녀석의 자리였는데 넘어버렸죠.
여기에서 우리는 'nowrap'이라는 속성을 'wrap'으로 바꿔서 만약 자식요소의 너비가 부모요소의 너비보다 큰 경우 다음 행으로 이동시키도록 조절하거나, 또는 아래에서부터 위로 행을 바꾸도록 할 수 있어요. '줄바꿈' 이라고 할까요. 아! atom을 비롯한 editor에서 wrap이라는 말을 쓰죠!
글을 쓸 때 줄을 바꿔주는 것처럼, 이렇게 자식 요소들의 너비가 부모를 넘게되는 경우에는 줄을 바꿔주는 형태입니다. 반대로는 wrap-reverse가 있어요. 아래는 예시입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
font-size: 2em;
line-height: 1.7;
}
.row {
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 1px solid green;
padding: 2%;
text-align: center;
}
.contents,
.navbar,
.promo,
.footer {
width: 100%;
align-items: center;
border: 1px solid blue;
}
.navbar,
.contents {
background-color: lightblue;
}
.contents {
display: flex;
flex: 0, 1, 0, 1;
}
.main {
display: flex;
flex-direction: row;
width: 80%;
background-color: lightcyan;
flex: 0, 1, 0, 0;
flex-wrap: nowrap;
/* 기본 */
/* flex-wrap: wrap; */
/* 자식 요소 내부 포함 */
/* flex-wrap: wrap-reverse; */
/* 자식 요소 내부 포함 역순 */
}
.aside {
width: 20%;
}
.card {
margin:3%;
width: 100%;
justify-content: center;
}
.img {
height: 200px;
width: 400px;
background-color: lightgrey;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="row">
<div class="navbar">navbar</div>
<div class="promo">promo</div>
<div class="contents">
<div class="main">
<div class="card">
<div class="img">
이미지 샘플1
</div>
<h3>이미지 샘플의 타이틀</h3>
<article>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit velit quidem quam,
doloremque odio amet asperiores laudantium ut perspiciatis, tempore saepe deserunt! Labore ipsa
veniam nulla praesentium, esse odio aut?</article>
</div>
<div class="card">
<div class="img">
이미지 샘플2
</div>
<h3>이미지 샘플의 타이틀</h3>
<article>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit velit quidem quam,
doloremque odio amet asperiores laudantium ut perspiciatis, tempore saepe deserunt! Labore ipsa
veniam nulla praesentium, esse odio aut?</article>
</div>
<div class="card">
<div class="img">
이미지 샘플3
</div>
<h3>이미지 샘플의 타이틀</h3>
<article>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit velit quidem quam,
doloremque odio amet asperiores laudantium ut perspiciatis, tempore saepe deserunt! Labore ipsa
veniam nulla praesentium, esse odio aut?</article>
</div>
</div>
<div class="aside">aside</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>