1. Flex item이 여러 줄인 경우에는 어떻게 적용?
앞에서 봤던 grid처럼 flex도 여러 줄 css 적용이 가능하다. 그런데 어떻게 적용해야 할까?
- 강제 개행을 시켜줘야 한다.
- align-items 대신에 align-content 이용하기.
- (참고) flex-flow를 이용하여 단축 속성을 이용할 수 있다.
위의 3가지를 잘 이용하면 grid처럼 여러 줄 flex 적용이 가능하다.
2. flex-wrap으로 강제 줄 바꿈 적용하기
- flex-wrap 은 가로의 길이에 따라 강제 줄 바꿈을 적용할 것인지 아닌지 결정하는 속성이다.
위의 그림은 flex-wrap이 nowrap인 경우다. 분명 각각의 박스의 가로 너비를 300px로 지정하였으나, 무시하고 한 줄에 적어버리는 것을 볼 수 있다.
그러면 이제 너비를 고려한 강제 줄 바꿈을 적용해보자.
300px를 고려하여 전체 가로 길이보다 넘어가는 순간에 개행을 발행한다. 여기서 이제 정렬을 진행해보자.
3. 여러 줄인 경우 레이아웃 정렬하기
한 줄 적용 flex와 동일하게 진행하면 된다. 다만 align-items 대신에 align-content를 이용하여 중심축 반대 정렬을 해주면 된다. 위의 경우는 flex-direction : row이고 flex-wrap이 wrap인 경우이다. 여기서 align-content를 이용하여 중심축 반대 정렬을 진행하면 된다. 각각의 텍스트를 중앙 정렬하기 위하여 flex 속성을 사용하고 중앙에 배치하면 된다.
위의 방식을 이용하여 바둑판 레이아웃도 만들 수 있다.
4. flex-flow로 단축 속성 지정하기
flex-flow는 여러 속성의 값을 한번에 지정할 수 있는 단축 속성이다. 이를 이용할 때 flex-direction flex-wrap 순으로 적어주자. border가 단축 속성에 해당된다. 선의 굵기, 선의 형태, 선의 색상까지 모두 한번에 적어줄 수 있다.
flex-flow: flex-direction flex-wrap 적용 유무5. html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Layout Flex Advanced</title>
<link rel="stylesheet" href="./flex__advanced.css" />
</head>
<body>
<div class="container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
<div>box 4</div>
<div>box 5</div>
<div>box 6</div>
<div>box 7</div>
<div>box 8</div>
<div>box 9</div>
</div>
</body>
</html>6. css 코드
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: #c4c4c4;
font-weight: 700;
height: 300px;
text-align: center;
display: flex;
/* flex-wrap: wrap; */
flex-flow: row wrap;
justify-content: center;
align-content: space-between;
}
.container div {
width: 300px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border: 5px solid blue;
}
.container div:nth-of-type(2n) {
background-color: cadetblue;
}
.container div:nth-of-type(2n + 1) {
background-color: slateblue;
}'web > html css' 카테고리의 다른 글
| [css] 단위 (0) | 2023.03.09 |
|---|---|
| [css] 폰트 속성 (0) | 2023.03.09 |
| [css] 고급 선택자 (2) | 2023.03.09 |
| [css] Layout Grid (0) | 2023.03.09 |
| [css] Layout Flex (0) | 2023.03.09 |