이전에는 wrap에 대해서 살펴보았습니다.
지난번 글 작성 이후 안에 코드를 넣어두었는데, 주석을 지워가면서 확인해보시면 실제로 어떻게 나오는지 확인하시기 쉬우실 것 같아요.
[CSS Layout] Flex box 2. wrap
[CSS Layout] Flex box 1. 기본 방향_flex-direction [CSS Layout] Flex box 1. 기본 방향_flex-direction w3schools.com 에서 소개하는 바와 같이, Flex box의 가장 큰 강점은 디자인을 float 나 position을 설정..
jaehyunshin.tistory.com
변수 이름은 flex-wrap:
기본값은 nowrap
부모 바깥으로 넘어가지 않게 묶기 위해서는 wrap,
그 순서를 바꾸고 싶으면 wrap-reverse
쉽죠?
이번에 살펴볼 justify-content는
justify-content: flex-start; 시작위치(행)부터 요소정렬
justify-content: flex-end; : 끝위치(행)부터 요소정렬
justify-content: center; : 가운데정렬
justify-content: space-between; 요소 사이에 같은 간격 배치
justify-content: space-around; 요소 주위에 같은 간격 배치
justify-content: space-evenly; 요소 간격 동일하게 배치
이렇게 여섯개입니다. 실은 vsCode에서 눌러보면 다 나오는데, (더 나오는데) space-evenly의 경우 space- 관련 두개와 또 다른 느낌을 보여주고 있어서 넣었어요. 간단하게 적어놓은 내용도 그렇게 와닿지는 않으실 것 같은데, 그럼 바로 하나씩 살펴보실게요.
기본적으로 아무런 설정을 해주지 않으면, 맨 위 flex-start입니다.
space - between은 요소들끼리의 간격에 의미가 있고, around는 자식요소 하나를 두고 그 요소 주변의 간격을 의미합니다. 그래서 요소가 각각 좌, 우 각각 1이라면, 요소들 사이는 2만큼의 간격을 갖게 되는거죠.
even은 동일하게 주기때문에 부모요소의 경계부터 요소, 요소에서 다른 요소까지의 거리가 일치해요.
같은방법으로, 네비게이션바 영역과, footer 영역에도 배치를 해보면
점점 한개의 페이지 구성을 갖춰가는 걸 볼 수 있습니다.
<!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: 1em;
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;
}
.navbar,
.menus {
display: flex;
justify-content: space-between;
}
.menus {
width: 30%;
flex-wrap: wrap;
justify-content: space-around;
}
.promo {
width: 96%;
height: 60vh;
background-color: rgb(221, 212, 255);
margin: 2%;
}
.contents {
display: flex;
margin-left: 5%;
width: 90%;
flex-wrap: wrap;
justify-content: space-between;
}
.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; */
/* 자식 요소 내부 포함 역순 */
/* 내부 요소의 정렬 'justify-content' */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
justify-content: space-evenly;
}
.aside {
width: 15%;
justify-content: center;
}
.card {
margin: 1%;
width: 30%;
justify-content: center;
}
.lgimg,
.img {
height: 20vh;
background-color: lightgrey;
border: 1px solid yellow;
}
.lgimg {
height: 6vh;
width: 20%;
}
.footer {
display: flex;
margin-top: 3%;
padding: 2%;
justify-content: space-around;
}
.column {
display: flex;
flex-direction: column;
background-color: lavenderblush;
}
</style>
</head>
<body>
<div class="row">
<div class="navbar">
<div class="lgimg">
logo image
</div>
<div class="menus">
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
<a href="#">Menu4</a>
<a href="#">Menu5</a>
</div>
</div>
</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">
<div class="column"><a href="#" class="" id="">Link</a>
<a href="#" class="" id="">Link2</a>
<a href="#" class="" id="">Link3</a></div>
<div class="column"><a href="#" class="" id="">Link</a>
<a href="#" class="" id="">Link2</a>
<a href="#" class="" id="">Link3</a></div>
<div class="column"><a href="#" class="" id="">Link</a>
<a href="#" class="" id="">Link2</a>
<a href="#" class="" id="">Link3</a></div>
</div>
</div>
</div>
</body>
</html>
이제 조금만 더 하면, 구성을 잡아나가는건 금방 할것 같아요.
다음번에는 align에 대해 살펴보고 부모요소에 대한건 마무리가 될 것 같아요.
