이번 시간에는 grid 속성에 앞서 display flex 속성에 대해 알아보겠습니다.
(grid와 flex는 겹치는 부분이 있어, flex를 보고 grid를 보면 수월하게 이해할 수 있을 것입니다.)
- flex란?
flex는 레이아웃 배치 전용으로 고안된 css 속성입니다.
그래서 비슷한 배치 속성인 float이나 inline-block과 같은 속성보다 훨씬 배치에 있어 강력한
성능을 보여주기도 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container {
display: flex;
border: 1px solid red;
}
.container .item {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>
</body>
</html>
이렇게 전체를 둘러싼 div class="container"가 flex container가 되고, 그 안에 있는 자식들은
flex item이 되어 container의 영역 안에서 자신의 가로 길이만큼 가로로 배치가 되는 것입니다.
여기서 부모 container 영역을 보면 한 줄을 다 차지하고 있는 것을 볼 수 있습니다.
이 특징은 block 요소와 똑같은 특징인데요, 여기서 inline-flex라는 속성값도 있습니다.
.container {
display: inline-flex;
border: 1px solid red;
}
이렇게 inline-flex 값을 주게 되면 다른 특징은 flex 요소와 똑같지만, 부모의 영역이 inline처럼
딱 컨텐츠의 내용만큼만 공간을 차지한다는 특징으로 바뀝니다.
(inline-flex를 사용하면 옆에 다른 영역을 배치한다던가 하는 활용을 할 수 있겠죠?)
또한 flex-direction이라는 속성도 있는데 이 속성에 값을 어떻게 주는지에 따라 배치 방향을 바꿀 수도
있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container01 {
display: inline-flex;
flex-direction: row;
border: 1px solid red;
}
.container02 {
display: inline-flex;
flex-direction: row-reverse;
border: 1px solid red;
}
.container03 {
display: inline-flex;
flex-direction: column;
border: 1px solid red;
}
.container04 {
display: inline-flex;
flex-direction: column-reverse;
border: 1px solid red;
}
.item {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container01">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">hello</div>
</div>
<div class="container02">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">hello</div>
</div>
<div class="container03">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">hello</div>
</div>
<div class="container04">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">hello</div>
</div>
</body>
</html>
각각 가로, 가로 역방향, 세로, 세로 역방향으로 배치 방향을 설정한 것입니다.
- 줄넘김 처리 속성
부모 영역의 크기가 더 이상 자식들을 받아줄 수 없는 상황이 되었을 때 어떻게 처리를 할 것인지에
대한 속성으로 flex-wrap이 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container {
display: flex;
width: 300px;
border: 1px solid red;
background: yellow;
}
.item {
border: 1px solid black;
width: 200px;
background: #CFFFE5;
}
</style>
</head>
<body>
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">hello</div>
</body>
</html>
이렇게 부모의 가로 크기가 300px인데 자식의 크기가 하나에 200px이라면, 당연히 부모의 영역
크기를 초과하겠죠?
아무것도 설정하지 않으면 기본값으로 nowrap값이 들어가는데, 이 값은 부모 크기를 초과하면
자식들이 그냥 부모 크기에 맞게 자동 분배가 되어 버립니다.
그래서 화면상으로 실행했을 때에도 원래 자식들의 가로 크기는 200px이지만 화면에 보이는 것은
부모의 크기인 300px에 맞게 자동 분배된 것을 확인할 수 있습니다.
속성값으로는 wrap, wrap reverse가 있는데요.
wrap은 초과하는 자식은 밑줄로 내려버리고, 반대로 reverse는 초과하는 자식은 윗줄로 올립니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 300px;
border: 1px solid red;
background: yellow;
}
.item {
border: 1px solid black;
width: 200px;
background: #CFFFE5;
}
</style>
</head>
<body>
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">hello</div>
</body>
</html>
wrap을 줬을 때 밑줄로 내려버리고 남은 공간인 100px은 부모의 영역 배경색인 노란색이 나오는
모습을 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container {
display: flex;
flex-wrap: wrap-reverse;
width: 300px;
border: 1px solid red;
background: yellow;
}
.item {
border: 1px solid black;
width: 200px;
background: #CFFFE5;
}
</style>
</head>
<body>
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">hello</div>
</body>
</html>
reverse는 그 반대라고 이해하면 되겠습니다.
추가로 위에서 본 flex-wrap 속성과 flex-direction 속성은 flex-flow로 한 번에 지정할 수 있습니다.
flex-flow: flex-direction값 flex-wrap값;
(이 순서대로 적어 주셔야 합니다.)
flex의 세부 사항으로는 이것보다 수많은 속성값들이 존재하지만 이 포스팅은 여기까지 해서
마무리하겠습니다.
무엇보다도 flex의 기본 개념과 어떤 상황에 써야 맞을지를 생각하는 것이 가장 중요하다는 것을
기억하시고, 이 포스팅을 봐 주셔서 감사합니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| css 미디어쿼리(ft.반응형 웹) (0) | 2021.12.17 |
|---|---|
| display grid 속성 (0) | 2021.12.17 |
| html 리스트 태그 (0) | 2021.12.16 |
| css background 속성 (0) | 2021.12.16 |
| css clear 속성 (0) | 2021.12.16 |
댓글