728x90
flex는 레이아웃을 하는 데에 있어서 필수적인 기능이다.
사용법
- 부모 요소의 display를 flex로 바꿔준다.
- 부모 요소는 flexbox container가 된다.
- 움직이고자 하는 자식 요소는 flexbox가 된다.
<body>
<div class="container">
<div></div>
<div></div>
</div>
</body>- 바디 태그 내부의 모습이다.
- class가 container인 부모 div태그와 자식 div태그 두 개가 있다.
.container {
display: flex;
}
.container > div {
width: 100px;
height: 100px;
background-color : black;
margin :10px;
}- 부모 태그의 display를 flex로 지정해줬다.
- 자식 요소들이 수평 방향으로 정렬된 것을 볼 수 있다.
- 따라서 정렬 방향의 기본값은 수평 방향이라는 것을 알 수 있다.
Main axis, Cross axis
- flex에서는 Main axis(주축)과 Cross axis(교차축)에 대한 이해가 가장 중요하다.
- Main axis의 방향은 flexbox에서의 정렬 방향이다.
- Cross axis의 방향은 Main axis와 수직인 방향이다.
- Main axis가 수평 방향, Cross axis 수직 방향
- Main axis가 수직 방향, Corss axis 수평 방향
- 위의 코드에서 flexbox의 정렬 방향의 기본값이 수평 방향이라는 것을 확인했다.
flex-direction
- flex-direction 속성을 사용하면 flexbox내부의 정렬 방형을 바꿀 수 있다.
- 위에서 flex-direction의 기본값이 row인 것을 확인했다.
- column으로 바꿔보자!
.container {
display: flex;
flex-direction : column;
}
.container > div {
width: 100px;
height: 100px;
background-color : black;
margin :10px;
}- 부모 태그에 flex-direction속성을 column으로 바꿔줬다.
- 수평 방향으로 정렬되었던 자식 요소들이 수직 방향으로 정렬되었다.
- 이 경우에는 main axis가 수직 방향이고, cross axis가 수평 방향이다.
main axis와 cross axis는 어떤 경우에 쓰이는 걸까?
- 자식 요소들을 각 axis 방향에서 정렬시킬 수 있다.
justify-content
- main-axis에서 자식 요소들을 정렬시킨다.
- 위 코드에 justify-content 속성을 추가해보자!
.container {
display: flex;
flex-direction : column;
width : 100%;
height:100vh;
justify-content: center;
}
.container > div {
width: 100px;
height: 100px;
background-color : black;
margin :10px;
}- 부모 요소 스타일에 justify-content를 center로 지정해줬다.
- main axis가 수직 방향이므로 수직 방향에서 자식 요소들이 center로 정렬된 것을 볼 수 있다.
- 다른 속성 값으로도 설정할 수 있다.
- flex-start (기본값) : container의 첫 부분에 정렬
- flex-end : container의 끝 부분에 정렬
- space-between : 아이템 사이에 균일한 간격
- space-around : 아이템 둘레에 균일한 간격
align-items
- cross-axis에서 자식 요소들을 정렬시킨다.
- 위 코드에 align-items 속성을 추가해보자!
.container {
display: flex;
flex-direction : column;
width : 100%;
height:100vh;
justify-content: center;
align-items:center;
}
.container > div {
width: 100px;
height: 100px;
background-color : black;
margin :10px;
}- 부모 요소 내부에 align-items 속성을 추가했다.
- 다음 사진은 해당 속성이 적용된 자식 요소의 모습이다.
- flex 정렬 방향과 수직인 cross-axis 방향으로 center 정렬된 모습이다.
- 다른 속성 값들도 사용할 수 있다.
- flex-start : container의 첫 부분에 정렬
- flex-end : container의 마지막 부분에 정렬
- center : 가운데에 정렬
- stretch : container의 크기에 맞게 늘린다.
728x90
'Frontend > CSS' 카테고리의 다른 글
| [CSS] Box Model(margin, border, padding, content) (1) | 2023.01.29 |
|---|---|
| [CSS] Grid (repeat,minmax,fr) (0) | 2022.09.10 |
