플렉스 박스는 css3에서 새롭게 생긴 레이아웃 방식으로 요소의 사이즈가 불명확하거나 동적으로 변할때도 유연한 레이아웃을 만들 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
justify-content: space-around;
margin: 10px;
padding: 15px;
border-radius: 5px;
background: #c280d3;
}
.flex-item {
margin: 10px;
padding: 20px;
color: black;
font-weight: bold;
text-align: center;
border-radius: 5px;
background: #f2f2f2;
}
</style>
</style>
<title>Document</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
</body>
</html>
Flexbox의 장점으로는
- 간단하게 수평 정렬이 가능
- 요소의 상하좌우 정렬과 순서변경이 간단하다
- 요소의 간격 조절이 쉽다
Flexbox는 flex item이라 불리는 여러 자식 요소와 이들 담고있는 flex container라 불리는 부모 요소로 구성된다.
Flex container 속성
1. flex-direction
flex-direction 속성은 flex-container의 주축 방향을 설정한다
`flex-direction:row`
좌에서 우로 수평 배치 (기본값)
`flex-direction:row-reverse`
우에서 좌로 수평 배치
`flex-direction:column`
위에서 아래로 수직배치
`flex-direction:column-reverse`
아래에서 위로 수직배치
2. flex-wrap
flex-wrap속성은 flex-container의 너비가 flex-item들의 너비의 합보다 작을때 한줄로 표현할 것인지, 여러줄로 표현할 것인지를 지정한다.
flex-wrap: nowrap
한줄로 표현한다. 각 flex-item은 flex container안에 들어갈 수 있는 크기로 축소된다. (기본값)
flex-wrap: wrap
여러줄로 표현한다. 기본적으로 좌에서 우로 위에서 아래로 배치된다.
(코드의 결과물은 위의 사진과 너비가 같은 코드)
flex-wrap: wrap-reverse
여러줄로 표현한다. 이름에서 알 수 있듯이 wrap과는 반대로 배치된다
3. flex-flow
flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 설정하기 위한 축약 속성이다. 기본값은 row nowrap이다.
4. justify-content
flex-container의 주 축의 정렬 방법을 지정한다.
justify-content:flex-start;
주 축의 좌측을 기준으로 정렬한다(기본값)
justify-content:flex-start;
주 축의 우측을 기준으로 정렬한다.
justify-content:center;
주 축의 중앙에 정렬한다.
justify-content:space-between;
첫번째와 마지막 아이템은 좌우 끝에 배치되고 나머지와 균등한 간격으로 정렬된다.
justify-content:space-around;
모든 아이템이 균등한 간격으로 정렬된다.
5. align-items
flex-item을 flex-container의 교차축으로 정렬한다.
align-items: stretch;
아이템들은 컨테이너 높이만큼의 높이를 갖는다(기본값)
align-items: flex-start;
아이템들은 컨테이너의 시작점을 기준으로 정렬된다
align-items: flex-end;
아이템들은 컨테이너의 끝점을 기준으로 정렬된다
align-items: center;
아이템들은 교차축의 중앙에 정렬된다
