[WEB] css - flex
기본적으로 css를 사용해서 element를 움직이는 방법에 대해 공부하고 정리 해본다.
Horizontal
div를 여러개 써 주었을 때 옆에 생기지 않는다. 바로 옆에 써 주었는데도 아래에 붙는다.
그 이유가 궁금해서 찾보았다. div는 width와 height가 있는 block의 성질을 가지고 있기 때문에 할당 공간을 제외한 나머지 여백에는 엄청나게 큰 마진이 생기기 때문에 아래에 붙는다.
그래서 div의 위치를 바꿔줄 때, 즉 한줄로 배치하려고 하면 다음과 같은 설정을 해 주어야 한다. display: inline-block
inline과 inline-block은 차이가 있다. inline은 width와 height의 설정을 가지지 않기 때문에 div에는 쓸 수 없다. 예를 들면 문자열은 inline 할 수 있다. 하지만 div는 block의 성질을 가지고 있기 때문에 inline-block 을 써줘야 한다. 하지만 이 경우에는 우리가 설정하지 않은 미세한 여백이 생겨버린다.
<!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 {
color: white;
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
</html>
flex
그 다음에 선택 할 수 있는 것이 flex 이다.
flex는 바로 하위 자식들에게만 영향을 미친다. 세 div를 감싸고 있는 body에 display: flex; 를 해주면 어떻게 되는지 보자.
<style>
body {
display: flex;
}
.box {
color: white;
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
}
</style>
세개의 div는 한 줄로 보인다. 만약 3개의 div를 감싸는 새로운 div가 있다면, flex 영향을 받지 못한다. 왜냐하면, flex는 바로 자식 태그에게만 영향을 주기 때문이다.
flex-direction
flex의 세계에는 row와 column이 있다. 그렇기 때문에 세개의 div가 한 줄에 그려지는 것이다.
그렇다면 이 div들을 어떻게 옮겨야할까? 위치 속성중 하나인 jusify-content 를 사용해보자. center, space-around, space-between 등을 사용하여 수평축으로 움직일 수 있다.
flex container는 row를 main-axis로 가지고 있다. 수평의 값이다. 그 반대의 축은 cross-axis를 가진다. 수직의 값이다. align-items는 cross-axis 방향으로 움직인다.
flex-direction: column으로 main-axis와 cross-axis를 바꿀 수 있다.
자식에게 order값을 주어 순서를 바꿀 수 있다. 기본적으로 order:0 이기 때문에 정렬순서는 코드 순서대로지만, order:1 을 적용하면 정렬 순서가 제일 커지기 때문에 맨 뒤로가게된다.
flex priperites
flex-wrap은 wrap, nowrap를 선택해 한줄에 나타낼 것인지 item의 속성을 유지시켜줄지를 정한다. 기본값은 nowrap으로 몇 개의 아이템이 들어가도 한 줄에 그려지게 된다. 하지만 wrap으로 설정하면 flex-container안에서 그려지도록 줄바꿈이 된다. wrap-reverse로 순서를 역순으로 바꿀 수 있다. align-content는 줄에 대해서 설정할 수 있다. 컨텐츠들 사이의 줄의 속성을 설정한다. cross-axis의 방향으로 동작한다.
flex-shrink, flex-grow
flex-shrink는 item들이 찌그러 질 때 얼마나 더 찌그러 질 지를 정한다.
flex-grow는 여백이 생겼을 때 늘어날 우선순위를 정해준다. 더 높은 수를 가진 아이템이 더 많이 늘어난다.
flex-basis
기본 축의 방향의 기본 값이다. 예를 들어 main-axis가 row일 때 flex-basis가 가리키는 값은 width가 된다. column이 된다면, height를 가리키게 된다.
댓글
댓글 쓰기