display: inline-box를 하면 여러 단점이 있어서 실제로는 사용하기 조금 부족한 기능이다. 그래서 그런 문제점들을 해결하기 좋은 방법이 flex box를 사용하는 것이다.
flex box
flex box를 사용하면 화면의 크기에 따라서 원하는 효과를 넣어줄 수 있기 때문에 유용하다. 아래의 실습들을 따라해보면서 화면의 크기를 줄였다가 늘렸다가 하면 그 속성의 맞는 위치에 반응하면서 위치하는 것을 알 수 있을 것이다.
그런데 이를 사용하기 위해서는 부모 태그에 적용을 하고 자식 태그에는 어떤 속성도 넣어주면 안 된다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
margin: 20px;
}
#second {
background-color: wheat;
}
div {
width: 50px;
height: 50px;
background-color: teal;
}
</style>
</head>
<body>
<div></div>
<div id="second"></div>
<div></div>
</body>
</html>위와 같이 <div>의 부모태그인 <body>에 display: flex를 줄 수 있다.
justify-content, align-items
이제 display 가 flex가 됐기 때문에 해당 태그에 추가적인 속성을 적용시킬 수 있는데 바로 justify-content와 align-item 이다.
justify-content: space-evenly;위와 같이 하면 flex box 안에 있는 요소들이 균등하게 위치하는 효과를 볼 수 있다.
justify-content: space-evenly;
align-items: center;align-items 를 적용시키면 아래와 같은 그림이 된다.
단, align-items 는 해당 flex-box가 height를 가져야만 적용이 될 수 있다. 당연한 얘기지만 flex-box의 height가 이미 꽉차있는 경우에
align-items: center를 한다 하더라도 이미 위,아래로 꽉 차 있기 때문에 변경된 모습이 안 보일 것이다. 그래서 body 태그에height: 100vh이런 식으로 위,아래로 움직일 여지가 있어야align-items속성이 적용될 것이다.
위, 아래를 기준으로 가운데에 flex box가 위치한 것을 볼 수 있다.
위 두 개의 예시를 통해서 다음과 같은 사실을 알 수 있다.
justify-content 는 main axis(기본값은 수평) 를 기준으로 움직이고 align-item 은 cross axis(기본값은 수직)을 기준으로 움직인다.
기본값이 있는 이유는 나중에 main axis 의 방향을 수정할 수 있기 때문이다.
flex-direction
flex 상태에서 flex-direction 을 통해서 main axis와 cross axis를 변경할 수 있다. 두 개의 값이 있는데(row, column) 기본값은 row 이다.
여기서 flex-direction: column 으로 바꾸게 되면 main axis와 cross axis 가 각각 수직, 수평으로 바뀌기 때문에 justify-content
는 수직을 기준으로 변경될 것이고 align-items는 수평을 기준으로 변경될 것이다.
column-reverse, row-reverse 도 있다.
추가
맨 처음에 flex 는 부모에만 속성을 추가하면 자식들이 적용된다고 했다. 그런데 위의 <div>태그에 글자들을 넣어주게 되면 <div>태그에 속성을 추가해서 글자들에 플렉스를 적용시킬 수 있다. 아래 코드를 보자.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
margin: 20px;
}
div {
width: 50px;
height: 50px;
background-color: teal;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>위 코드에서 보는것과 같이 div 아래에 1,2,3 이라는 값들이 들어갔는데 이제 div 태그에 flex 속성을 추가해서 글자들을 div 안에서 flex 속성들을 적용시킬 수 있게 된다.
<style>
body {
height: 100vh;
display: flex;
margin: 20px;
justify-content: space-evenly;
align-items: center;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: teal;
}
#second {
background-color: wheat;
}
</style>위와 같이 스타일을 바꾸게 되면 <div> 태그에 display: flex; 속성이 추가 되고 그에 따라서 justify-content와 align-items 속성값을 추가할 수 있게 된다. 둘 다 center 로 적용을 했더니 각가의 <div>태그 안에 글자들이 수직,수평 가운데로 정렬되는 것을 볼 수 있다.
flex-wrap
flex-wrap 은 nowrap, wrap, wrap-reverse 값이 있는데 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성이다.
우리의 코드를 보자.
div {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: teal;
}width 값이 50px 로 정해져 있는데 flexbox 에서는 이 값을 초기값으로만 생각할 뿐이다. 그래서 justify-content와 align-items 가 center 로 정해져있을 때는 화면의 크기가 줄어들 때 이 width값을 무시하고 최대한 center를 유지하려고 한다. 이 일이 가능한 이유는 flex-wrap의 기본값이 wrap 이기 때문이다. 한 화면 안에 강제적으로 다 배치하려고 하는 것이다. 이 속성을 nowrap으로 바꾸면 width값 이하로 화면이 줄어들면 한 줄이 아니라 다음 줄로 <div>값들이 내려갈 것이다.
출처: (https://nomadcoders.co)
