css의 flex란?
element들의 위치를 쉽게 잡아주는 속성.
예를 들면...
flex를 잘 모르던 시절
//ex:header의 레이아웃을 잡을 때
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* reset */
header,body,div,nav,ul,li,h1{margin:0;padding:0;}
a{text-decoration:none;color:#222;display:block;}
header{
width:100%;height:77px;
background-color:rgb(252, 230, 182);
}
nav{
width:1200px;height:77px;
margin:auto;
}
h1{
width:150px;height:77px;
line-height:77px;float:left;
}
div{
width:400px;height:77px;
float:right;
}
ul{
width:100%;height:77px;list-style:none;
}
li{
width:100px;height:77px;
line-height:77px;float:left;
}
li a{
display:block;color:#222;
text-decoration:none;text-align:center;
}
</style>
</head>
<body>
<header>
<nav>
<h1><a href="#">Jelly's blog</a></h1>
<div>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
대개 이런 방식으로 구조를 짜고 스타일을 잡았다.
결과물은
메뉴를 얻고자 많은 스타일을 사용하게 되었다.
좀 더 디테일하게 스타일을 잡게된다면 마진과 패딩값, 요소들에게 부여할 가로,세로크기 등을 고려해가며 레이아웃을 짜고 적용하여야했다.
그래서 flex란 언제 어떤식으로 사용하는 것일까?
레이아웃을 구성하거나 요소들의 위치를 변경하려고 할 때 등등 아주 편리하게 사용할 수 있다.
중요! 부모와 자식요소가 꼭 있어야한다.
위치를 변형하고 싶은 요소의 부모요소에 display:flex;를 사용해주어야 하기 때문.
| 속성 | 의미 |
|---|---|
| display | flex container를 정의한다 |
| justify-content | 가로 축의 정렬 방법을 설정한다 |
| align-content | 2줄 이상의 세로 축 정렬 방법을 설정한다 |
| align-items | 1줄의 세로축 items의 정렬 방법을 설정한다 |
(위의 그림과 표에서 나열되지않았지만 flex를 사용할 수 있는 수많은 속성들이 있다.)
justify-content //가로 축의 정렬 방법
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬한다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬한다.
center: 요소들을 컨테이너의 가운데로 정렬한다.
space-between: 요소들 사이에 동일한 간격을 둔다.
space-around: 요소들 주위에 동일한 간격을 둔다.
align-items //세로 축의 정렬 방법
flex-start: 요소들을 컨테이너의 가장 위로 정렬한다.
flex-end: 요소들을 컨테이너의 가장 아래로 정렬한다.
center: 요소들을 컨테이너의 세로 축 상의 가운데로 정렬한다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬한다.
stretch: 요소들을 컨테이너에 맞도록 늘린다.
flex-direction //item을 정방향,역방향으로 정렬하는 방법
row: 요소들을 가로 축 정방향으로 정렬한다.
row-reverse: 요소들을 가로 축 역방향으로 정렬한다.
column: 요소들을 위에서 아래로 정방향 정렬한다.
column-reverse: 요소들을 아래에서 위로 역방향 정렬한다.
ps. order,align-self, flex-wrap 은 좀 더 공부가 필요하다. 좀 더 공부 후 추가 게시 예정!
pps. 각 속성의 예시 이미지도 천천히 만들어 차차 게시 예정!
