Flexbox 에 대해 설명해주세요.
- 인터페이스 내의 아이템 간 공간 분배
- 강력한 정렬 기능
- 1차원 레이아웃 모델
Flexbox는 레이아웃을 좀 더 쉽게 배치할 수 있도록 고안된 스펙입니다.
Flex를 사용할 때, 부모 요소를 Flex container라고 부르고, 자식요소를 Flex Item이라고 부릅니다.
Flex는 Flex Container에 display: flex;를 적용하여 사용할 수 있습니다. Flex의 속성들은 container에 적용되는 속성과 Item에 적용되는 속성으로 나뉩니다.
대표적인 속성으로 flex-direction, justify-content, align-items 등이 있습니다.
Display 속성 자세히 알아보기
- none
- block
- inline
- inline-block
예제 코드
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="none_div">I am none</div>
<div class="block_div">I am block</div>
<div class="inline_div">I am inline</div>
<div class="inline-block_div">I am inline-block</div>
</body>
</html>CSS
body div {
font-size: large;
margin-bottom: 50px;
}
.none_div {
display: none;
background-color: blueviolet;
}
.block_div {
display: block;
background-color: aqua;
}
.inline_div {
display: inline;
width: 500px;
background-color: chartreuse;
}
.inline-block_div {
display: inline-block;
width: 500px;
background-color: gold;
}Result
display: none;
화면에서 사라지며, 크기도 차지하지않음
display: block;
일반적으로 설정하지 않아도 div가 갖게되는 기본값입니다
사진에 나와있는것처럼 가로 한 줄을 다 차지하게된다.
display: inline;
컨텐츠를 감쌀정도의 크기만 갖게된다.
block 태그와 다르게 줄바꿈이 되지않으며, 크기를 변화시킬 수 없다.
display: inline-block;
inline 과 block의 특성을 합쳐놓은 속성이다.
기본적으로 Inline 속성을 지니고있지만, 임의로 크기를 바꿔줄 수 있다.
flex-direction 자세히 알아보기
flex-direction: row;
기본 값이며 아이템이 가로방향으로 흐른다. (좌-> 우)
flex-direction: row-reverse;
아이템이 가로방향으로 흐른다. (우-> 좌)
flex-direction: column;
아이템이 세로방향으로 흐른다 (상 → 하)
flex-direction: column-reverse;
아이템이 세로방향으로 흐른다 (하 → 상)
flex-wrap 자세히 알아보기
복수행 flex 컨테이너 지정할 때 사용
예시
<html>
<head>
<style>
.flex-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.test{
border: 3px solid pink;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="test">Test1></div>
<div class="test">Test2></div>
<div class="test">Test3></div>
</div>
</body>
</html>Result 1 → flex-wrap: wrap;
Result 1 → flex-wrap: wrap-reverse
