고래씌
[CSS] 4-2. FlexBox ② (flex-container 전용 속성) 본문
1. flex-container 전용 속성
1) flex-direction : maxi axis(중심축) 방향, 시작 / 끝 지정
- row(기본값)
- row-reverse
- colum
- colum-reverse
2) flex-wrap : item이 한줄/여러 줄로 배치되게 지정
- nowrap(기본값) : 한줄로 배치, item의 크기가 변경 및 훼손될 수 있음
- wrap : 여러줄로 배치
- wrap-reverse : 여러줄로 배치(cross axis 방향 반대)
3) flex-flow : flex-direction + flex-wrap;
4) justify-content : main axis(중심축)을 기준으로 item 정렬
5) align-content : cross axis(교차축)을 기준으로 포장된 item들을 정렬
-> 조건 : flex-wrap이 wrap 또는 wrap-reverse이어야 함
- flex-start : 축 시작 지점 기준으로 정렬
- flex-end : 축 끝 지점 기준으로 정렬
- center : 축 가운데 정렬
- space-around : item에 축 방향 양쪽으로 일정 크기 공간을 배치
- space-evenly : item에 축 방향 양쪽으로 모두 동일한 크기의 공간을 배치
- space-between : space-evenly에서 시작과 끝부분은 flex-container에 붙여서 배치
6) align-items : 교차축을 기준으로 item을 배치
- stretch(기본값) : item을 교차축 방향으로 flex-container만큼 늘림. 단, item에 크기속성이 없어야한다.
- flex-start : 교차축 시작 지점에 배치
- flex-end : 교차축 끝 지점에 배치
- center : 가운데 지점에 배치
- baseline : item에 작성된 내용이 한 직선에 배치될 수 있도록 item을 교차축 방향으로 알맞게 배치한다.
2. flex-wrap: wrap | wrap-reverse; 배치 방법
■ HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox2</title>
<link href="../css/flex-style2.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
</head>
<body>
<h1>flex-wrap : wrap | wrap-reverse; 배치 방법</h1>
<div class="flex-container">
<!-- (.item.item${item$}*9)*2 -->
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
<div class="item item6">item6</div>
<div class="item item7">item7</div>
<div class="item item8">item8</div>
<div class="item item9">item9</div>
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
<div class="item item6">item6</div>
<div class="item item7">item7</div>
<div class="item item8">item8</div>
<div class="item item9">item9</div>
</div>
</body>
</html>
■ style.css
div{
border: 1px solid black;
box-sizing: border-box;
}
.item{
width: 75px;
height: 75px;
}
.item1{background-color: red;}
.item2{background-color: orangered;}
.item3{background-color: orange;}
.item4{background-color: yellow;}
.item5{background-color: yellowgreen;}
.item6{background-color: green;}
.item7{background-color: lightblue;}
.item8{background-color: blue;}
.item9{background-color: violet;}
■ ① flex-style2.css 파일
.flex-container{
height: 75vh; /* 현재 화면의 75%만큼의 비율 */
/*
vh : viewport height(현재 화면 높이)
viewprot : 브라우저 또는 기기 화면
*/
display: flex;
}
☞ height: 75vh
=> 현재 화면에 75%만큼의 비율을 보여주겠다는 의미. 화면을 축소하던 확대하던 그 비율만큼 자동으로 변형되어 보여줌
☞ display : flex;
=> item 박스들을 상단에 고정시킴
■ ② flex-style2.css 파일(flex-wrap: wrap; 추가)
.flex-container{
height: 75vh; /* 현재 화면의 75%만큼의 비율 */
/*
vh : viewport height(현재 화면 높이)
viewprot : 브라우저 또는 기기 화면
*/
display: flex;
flex-wrap: wrap;
}
☞ flex-wrap : wrap; 추가한 결과, 화면 비율에 맞게 여러줄로 배치가 된 것을 볼 수 있음
=> 이것을 일렬로 정렬을 해주도록 하겠다.
=> align-content : cross axis 방향으로 item이 포장된 라인으로 정렬하는 방법을 사용하면 된다!
(조건 : flex-wrap 속성이 wrap 또는 wrap-reverse일 때만 사용 가능. 속성값은 just-content의 속성 값을 전부 사용할 수 있다.
■ ③ flex-style2.css 파일(align-content: flex-start; 추가)
.flex-container{
height: 75vh; /* 현재 화면의 75%만큼의 비율 */
/*
vh : viewport height(현재 화면 높이)
viewprot : 브라우저 또는 기기 화면
*/
display: flex;
flex-wrap: wrap;
/* cross axis 방향 시작 지점으로 포장된 item들을 정렬 */
align-content: flex-start;
}
=> 일렬로 정렬 된 것을 볼 수 있다.
=> 여기서 교차축 방향으로 포장된 아이템들을 양쪽으로 일정한 공간을 나눠주어 정렬을 하고 싶다면,
"align-content: space-arund;" 및 "align-content: space-evenly;" 추가하면 된다.
☞ align-content: space-around; 추가 하였을 때
'Front-End > CSS' 카테고리의 다른 글
| [CSS] 5. 글자관련 스타일 (1) | 2023.11.03 |
|---|---|
| [CSS] 4-3. FlexBox ③ (item 전용 속성-수축, 팽창 등) (0) | 2023.11.03 |
| [CSS] 4-1. Flex Box ① (0) | 2023.11.03 |
| [CSS] 3-4. 레이아웃(Layout) 스타일 ④ (배치 관련) (0) | 2023.11.03 |
| [CSS] 3-3. 레이아웃(Layout) 스타일 ③ (float / clear) (0) | 2023.11.02 |
