Flexbox
요소의 정렬되는 방향, 순서, 요소 간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식
flex-container
1) flex-direction : main axis(중심축) 방향, 시작/끝 지정
- row (기본값)
- row-reverse
- column
- column-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에서 시작, 끝 item은 flex-container에 붙게 배치
6) align-items : cross axis(교차축)을 기준으로 item 배치
- stretch(기본값) : item을 cross axis 방향으로 flex-container만큼 늘림
단, cross axis 방향으로 지정된 크기속성(width/height)이 없어야 함
-
flex-start : 교차축 시작 지점에 배치
-
flex-end : 교차축 끝 지점에 배치
-
center : 교차축 가운데 지점에 배치
-
baseline : item에 작성된 내용이 한 직선에 배치될 수 있도록
item을 교차축 방향으로 알맞게 배치
item
📍 order
순서를 지정하는 속성
📍 grow(팽창)
item이 flex-container 내부에서 비어있는 공간을 메꿀 수 있도록 팽창하는 정도를 지정하는 속성
📍 shrink(수축)
item이 수축하는 정도를 지정하는 속성
📍 basis
item의 main axis 방향으로의 기본 점유율을 지정하는 속성
📍 align-self
각각의 item별로 cross axis 방향으로 정렬을 지정하는 속성
flexbox1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexbox1</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/flex-style1.css">
</head>
<body>
<h1>Flexbox</h1>
<pre>
요소의 정렬되는 방향, 순서, 요소 간의 간격을
수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식
* Flexbox를 이용할 때 반드시 알아야 되는 것!
1. Flexbox의 구성
- flex-container : 정렬이 필요한 요소를 감싸는 요소
- item : 정렬을 적용할 요소
2. Flexbox의 축
- 중심축(main axis)
- 교차축, 반대축(cross axis)
</pre>
<hr>
<div class="flex-container">
<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>
<hr>
<h1>Flexbox를 이용한 요소 정가운데 배치하기</h1>
<div id="con">
<div id="center"></div>
</div>
</body>
</html>flex-style1
.flex-container{
background-color: #ddd;
height: 700px;
display: flex;
/* item(내부 요소)을 감싸는 요소의 형식을 flex로 변경
-> item에 자동으로 지정된 margin의 요소가 모두 사라지고
content 영역만큼의 크기만 가지게 됨
item에 별도의 width/height가 지정되어 있지 않다면
item의 높이는 flex-container의 너비/높이와 같아지게 된다.
(flex-container 정렬 방향에 따라 다름)
*/
/* -------------- */
/* flex-direction */
/* -------------- */
/* (flex-container 전용 속성)
main axis 방향과 시작 위치를 지정하는 속성
*/
/* 행 뱡향(가로_기본값) */
flex-direction: row;
/* 행 방향(가로) + 순서 반대 */
/* flex-direction: row-reverse; */
/* 열 방향(세로) */
/* flex-direction: column; */
/* 열 방향(세로) + 순서 반대 */
/* flex-direction: column-reverse; */
/* --------- */
/* flex-wrap */
/* --------- */
/* 내부 item들을 포장하는 속성
item들이 강제로 한 줄에 배치되게 할 것인지
flex-container가 줄어들면
한 줄을 벗어나 여러 줄로 배치할 것인지를 지정
*/
/* item을 한 줄로 배치(기본 값) */
flex-wrap: nowrap;
/* item을 여러 줄로 배치 */
/* flex-wrap: wrap; */
/* item을 여러 줄로 배치(뒤에서부터 배치) */
/* flex-wrap: wrap-reverse; */
/* --------- */
/* flex-flow */
/* --------- */
/* flex-container의
main axis 방향, 순서와
여러 줄로 배치할지에 대한 여부를
한 번에 설정하는 속성
flex-direction + flex-wrap 합쳐진 형태
*/
/* flex-direction */ /* flex-wrap */
/* flex-flow: row-reverse wrap; */
/* flex-flow: column wrap-reverse; */
/* --------------- */
/* justify-content */
/* --------------- */
/* justify : 조정하다 */
/* justify-content : 내용을 조정하다
-> main axis 방향으로
item(내용)의 정렬 방법을 조정함
*/
/* main axis 시작 지점을 기준으로 정렬(기본값) */
/* justify-content: flex-start; */
/* main axis 끝 지점을 기준으로 정렬 */
/* justify-content: flex-end; */ /* row-reverse는 순서도 바뀌지만 얘는 순서는 그대로(정렬 기준만 바뀜) */
/* 순서가 달라지는
flex-direction : row-reverse; 와 구분해서 기억
*/
/* main axis 가운데 정렬 */
/* justify-content: center; */
/* item 주위에 main axis 방향 양쪽으로
일정한 크기의 공간을 추가
-> 양 끝은 조금, item 중간은 넓게 떨어져 있음
*/
/* justify-content: space-around; */
/* item이 main axis 내에서 동일한 간격을 가지게 됨 */
/* justify-content: space-evenly; */
/* space-evenly에서 양 끝을 flex-container에 붙게 함 */
/* justify-content: space-between; */
/* ----------- */
/* align-items */
/* ----------- */
/* item들을 cross axis (반대축, 교차축) 방향으로 정렬하는 방법을 지정하는 속성 */
/* item들의 너비 또는 높이를
cross axis 방향으로 늘려서
flex-container와 같은 크기를 가지도록 함
(기본값)
조건 : item에 cross axis 방향의 크기 지정 속성이 없어야 함 */
/* align-items: stretch; */
/* cross axis 시작 지점을 기준
(stretch 처럼 늘어나지 않고, content의 크기를 유지 */
/* align-items: flex-start; */
/* cross axis 끝 부분을 기준 */
/* align-items: flex-end; */
/* cross axis 가운데 기준 */
/* align-items: center; */
/* item 내부 content가 모두 한 줄에 배치될 수 있도록
item 요소를 cross axis로 움직이는 설정
*/
/* align-items: baseline; */
}
.item2{padding: 10px;}
.item3{padding: 20px;}
.item4{padding: 30px;}
/* 요소 정가운데 배치하기 */
#con{
width: 450px;
height: 450px;
display: flex;
justify-content: center; /* 중심축 방향으로 가운데 정렬 */
align-items: center; /* 교차축 방향으로 가운데 정렬 */
}
#center{
width: 80px;
height: 80px;
background-color: red;
}flexbox2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox2</title>
<link rel="stylesheet" href="../css/flex-style2.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>flex-wrap : wrap | wrap-reverse; 배치 방법</h1>
<div class="flex-container">
<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>
<!--
flex-container 전용 속성
1) flex-direction : main axis(중심축) 방향, 시작/끝 지정
- row (기본값)
- row-reverse
- column
- column-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에서 시작, 끝 item은 flex-container에 붙게 배치
6) align-items : cross axis(교차축)을 기준으로 item 배치
- stretch(기본값) : item을 cross axis 방향으로 flex-container만큼 늘림
단, cross axis 방향으로 지정된 크기속성(width/height)이 없어야 함
- flex-start : 교차축 시작 지점에 배치
- flex-end : 교차축 끝 지점에 배치
- center : 교차축 가운데 지점에 배치
- baseline : item에 작성된 내용이 한 직선에 배치될 수 있도록
item을 교차축 방향으로 알맞게 배치
-->
</body>
</html>flex-style2
.flex-container{
height: 75vh; /* 현재 화면의 75%만큼의 비율 */
/* vh : Viewport Height(현재 화면 높이)
Viewport: 브라우저 또는 기기 화면
*/
display: flex;
flex-wrap: wrap;
/* ------------- */
/* align-content */
/* ------------- */
/* cross axis 방향으로
item이 포장된(wrap)라인을 정렬하는 방법
<조건 : flex-wrap 속성이 wrap 또는 wrap-reverse일 때만 사용 가능>
속성 값은 justify-content의 속성 값을 전부 사용할 수 있다.
*/
/* cross axis 방향 시작 지점으로 포장된 item들을 정렬 */
/* align-content: flex-start; */
/* cross axis 방향 끝 지점으로 포장된 item들을 정렬 */
/* align-content: flex-end; */
/* cross axis 방향 가운데로 포장된 item들을 정렬 */
/* align-content: center; */
/* cross axis 방향으로
포장된 item들을 양쪽으로 일정한 공간을 나누어 정렬
*/
/* align-content: space-around; */
/* cross axis 방향으로
포장된 item들이 동일한 크기의 공간을 나누어 정렬
*/
/* align-content: space-evenly; */
/* cross axis 방향으로
포장된 item들이 동일한 크기의 공간을 나누어 정렬
단, 처음과 끝은 flex-container에 붙어있게 함
*/
align-content: space-between;
}flexbox3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox3</title>
<link rel="stylesheet" href="../css/flex-style3.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>item 전용 속성</h1>
<h3>order : item의 순서를 지정하는 속성</h3>
<div class="flex-container">
<div class="item item1 order1">item1</div>
<div class="item item2 order2">item2</div>
<div class="item item3 order4">item3</div>
<div class="item item4 order5">item4</div>
<div class="item item5 order3">item5</div>
</div>
<hr>
<h3>flex-grow(팽창) :
item이 flex-container 내부에서
비어있는 공간을 메꿀 수 있도록
팽창하는 정도를 지정하는 속성
</h3>
<div class="flex-container">
<div class="item item1 grow1">item1</div>
<div class="item item2 grow2">item2</div>
<div class="item item3 grow3">item3</div>
<div class="item item4 grow4">item4</div>
</div>
<hr>
<h3>flex-shrink(수축) :
item이 수축하는 정도를 지정하는 속성
</h3>
<div class="flex-container">
<div class="item item1 shrink0">item1</div>
<div class="item item2 shrink1">item2</div>
<div class="item item3 shrink2">item3</div>
<div class="item item4 shrink3">item4</div>
</div>
<hr>
<h3>flex-basis :
item의 main axis 방향으로의
기본 점유율(크기)를 지정하는 속성
(각종 크기 단위 px, %, vh, em, rem 등 사용 가능)
</h3>
<div class="flex-container">
<div class="item item1 basis-150px">item1</div>
<div class="item item2 basis-10">item2</div>
<div class="item item3 basis-25">item3</div>
<div class="item item4 flex1">item4</div>
</div>
<hr>
<h3>align-self : 각각의 item별로 cross axis 방향으로 정렬을 지정하는 속성</h3>
<div class="flex-container">
<div class="item item1 self-start">item1</div>
<div class="item item2 self-end">item2</div>
<div class="item item3 self-center">item3</div>
</div>
</body>
</html>flex-style3
.flex-container{
height: 400px;
background-color: #ddd;
display: flex;
}
/* ------ */
/* order */
/* ------ */
/* flex-container 내부 item의 순서를 지정하는 속성
(기본값 0, 정수, 양수/음수 가능)
*/
.order1{order :1}
.order2{order :2}
.order3{order :3}
.order4{order :4}
.order5{order :5}
/* --------- */
/* flex-grow */
/* --------- */
/* item이 flex-container 내부에서
비어있는 공간을 메꿀 수 있도록
팽창하는 정도를 지정하는 속성
-> 지정된 비율에 맞게 팽창함
(기본값 0 -> 팽창X)
*/
.grow1{flex-grow: 1;}
.grow2{flex-grow: 2;}
.grow3{flex-grow: 3;}
.grow4{flex-grow: 4;}
/* ----------- */
/* flex-shrink */
/* ----------- */
/* item이 수축하는 정도를 지정하는 속성
(기본값 1)
*/
.shrink0{flex-shrink: 0;}
.shrink1{flex-shrink: 1;}
.shrink2{flex-shrink: 2;}
.shrink3{flex-shrink: 3;}
/* ---------- */
/* flex-basis */
/* ---------- */
/* item의 main axis 방향으로의
기본 점유율(크기) 지정하는 속성
(각종 크기 단위 px, %, vh, em, rem 등 사용 가능)
*/
.basis-150px{flex-basis: 150px;}
.basis-10{flex-basis: 10%;}
.basis-25{flex-basis: 25%;}
.basis-50{flex-basis: 50%;}
/* ---- */
/* flex */
/* ---- */
/* flex-grow, flex-shrink, flex-basis 3개를 합쳐둔 속성 */
.flex1{flex: 0 0 100px;}
/* ---------- */
/* align-self */
/* ---------- */
/* 각각의 item별로 cross axis
방향으로 정렬을 지정하는 속성
*/
.self-start{align-self: flex-start;}
.self-end{align-self: flex-end;}
.self-center{align-self: center;}
개발 일지