float나 positioning을 사용하지 않고도 배치 구조를 쉽게 설계할 수 있도록 합니다.
1.Flexbox 요소
- Flexbox 모델을 사용 하려면 먼저 flex container를 정의해야 합니다.
- flex container의 직접적인 자식요소는 자동으로 flex 항목이 됩니다.
2.flex container 속성
2-1. flex-direction : flex 방향 속성은 container가 항목을 쌓으려는 방향을 정의합니다.
① column : 위에서 아래 방향으로 수직 정렬 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
② column-reverse : 아래에서 위 방향으로 수직 정렬 합니다.
③ row : 왼쪽에서 오른쪽 방향으로 수평 정렬 합니다.
④ row-reverse : 오른쪽에서 왼쪽 방향으로 수평 정렬 합니다.
2-2. flex-wrap : flex 항목의 줄바꿈 여부를 지정합니다.
① wrap : 줄바꿈을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>
<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
② nowrap : 줄바꿈 하지 않도록 지정합니다.(기본값)
③ wrap-reverse : 역순으로 줄바꿈을 지정합니다.
2-3. flex-flow : flex-direction 및 flex-wrap 속성을 모두 설정하기 위한 속기 속성입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-flow Property</h1>
<p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
2-4. justify-content : flex 항목을 정렬하는데 사용됩니다.
① center : flex 항목을 container 가운데를 기준으로 정렬합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
② flex-start : flex 항목을 container 시작부분을 기준으로 정렬합니다.(기본값)
③ flex-end : flex 항목을 container 끝부분을 기준으로 정렬합니다.
④ space-around : flex 항목의 앞, 뒤 또는 flex 항목의 사이 공백을 일정하게 표시합니다.
⑤ space-between : flex 항목 사이의 간격을 일정하게 표시합니다.
2-5. align-items : flex 항목을 세로로 정렬하는데 사용됩니다.
① center : container 중간에 flex 항목을 정렬합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>
<p>The "align-items: center;" aligns the flex items in the middle of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
② flex-start : container 상단에 flex 항목을 정렬합니다.
③ flex-end : container 하단에 flex 항목을 정렬합니다.
④ stretch : container 높이만큼 flex 항목을 늘립니다.(기본값)
⑤ baseline : 텍스트 기준선에 맞춰 flex 항목을 정렬합니다.
2-6. align-content : flex 라인을 정렬합니다.
① space-between : flex 라인 사이에 동일한 간격으로 정렬합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The "align-content: space-between;" displays the flex lines with equal space between them:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
② space-around : fflex 라인 주변을 동일한 간격으로 정렬합니다.
③ stretch : flex 라인을 동일한 간격으로 정렬한 후 남은 공간만큼 flex 항목을 늘립니다.(기본값)
④ center : container 중간에 flex 라인을 정렬합니다.
⑤ flex-start : container 상단에 flex 라인을 정렬합니다.
⑥ flex-end : container 하단에 flex 라인을 정렬합니다.
2-7. centering : flex 항목을 container 가운데에 배치합니다.
- justify-content 및 align-items 속성을 가운데로 설정합니다.
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
참고
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/cssref/css3_pr_flex.asp
https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/
댓글