02.19(6일차)
<!-- <h1>flex</h1>
<p>flex 컨테이너와 flex 아이템을 활용하여 다양한 레이아웃을 만들 수 있다</p>
<pre>
- flex 컨테이너 속성
1 flex direction
2 flex wrap
3 justify content (row)
4 justify content (col)
5 align items (row)
6 align items (col)
- flex 아이템 속성
1 flex basis
2 flex grow
3 flex shrink
4 flex order
</pre>
<style>
.container {
border: 1px solid;
}
/* flex container */
.flex {
display: flex;
}
/* flex item */
.item {
padding: 0.5rem;
background-color: #ddd;
}
</style>
<div class="container flex">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div> -->
<!-- <h1>flex direction</h1>
<p>아이템의 배열 방향</p>
<style>
.container {
border: 1px solid;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.item {
background-color: #ddd;
padding: 0.5rem;
}
</style>
<h3>flex direction: row (default)</h3>
<div class="container flex flex-row">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>flex direction: column</h3>
<div class="container flex flex-col">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div> -->
<!-- <h1>Q. flex</h1>
<p>flex direction</p>
<style>
#italy {
width: 150px;
height: 100px;
}
#germany {
width: 150px;
height: 100px;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
#italy .item {
width: 50px;
height: 100px;
}
#germany .item {
width: 150px;
height: 33.33333px;
}
.green {
background-color: green;
}
.white {
background-color: white;
}
.red {
background-color: red;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
.gold {
background-color: gold;
}
</style>
<h3>Italy</h3>
<p>colors: green, white, red</p>
<div id="italy" class="flex flex-row">
<div class="item green"></div>
<div class="item white"></div>
<div class="item red"></div>
</div>
<h3>Germany</h3>
<p>black, red, gold</p>
<div id="germany" class="flex flex-col">
<div class="item black"></div>
<div class="item red"></div>
<div class="item gold"></div>
</div> -->
<!-- <h1>flex wrap</h1>
<p>아이템을 감쌀 것인지 결정한다</p>
<style>
.container {
border: 1px solid;
width: 150px;
}
.flex {
display: flex;
}
.flex-nowrap {
/*
아이템의 크기가 줄어든다
flex (유연한)
*/
flex-wrap: nowrap;
}
.flex-wrap {
/*
컨테이너의 넓이가 부족할 때 아이템을
아래로 떨어뜨린다
*/
flex-wrap: wrap;
}
.item {
background-color: #ddd;
width: 100px;
padding: 0.5rem;
}
</style>
<h3>flex wrap: nowrap (default)</h3>
<div class="container flex flex-nowrap">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>flex wrap: wrap</h3>
<div class="container flex flex-wrap">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div> -->
<!-- <h1>justify content (row)</h1>
<p>아이템의 배열 방법</p>
<style>
.container {
border: 1px solid;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between
}
.justify-end {
justify-content: flex-end;
}
.item {
background-color: #ddd;
padding: 0.5rem;
}
</style>
<h3>justify content: flex-start (default)</h3>
<div class="container flex flex-row justify-start">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>justify content: center</h3>
<div class="container flex flex-row justify-center">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>justify content: space-between</h3>
<div class="container flex flex-row justify-between">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>justify content: flex-end</h3>
<div class="container flex flex-row justify-end">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div> -->
<!-- <h1>justify content (col)</h1>
<p>아이템의 배열 방법</p>
<style>
.container {
border: 1px solid;
height: 200px;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between
}
.justify-end {
justify-content: flex-end;
}
.item {
background-color: #ddd;
padding: 0.5rem;
}
</style>
<h3>justify content: flex-start (default)</h3>
<div class="container flex flex-col justify-start">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>justify content: center</h3>
<div class="container flex flex-col justify-center">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>justify content: space-between</h3>
<div class="container flex flex-col justify-between">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>justify content: flex-end</h3>
<div class="container flex flex-col justify-end">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div> -->
<!-- <h1>align items (row)</h1>
<p>행의 위치</p>
<style>
.container {
border: 1px solid;
height: 100px;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.items-stretch {
align-items: stretch;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.item {
background-color: #ddd;
padding: 0.5rem;
}
</style>
<h3>align items: stretch (default)</h3>
<div class="container flex flex-row items-stretch">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>align items: flex start</h3>
<div class="container flex flex-row items-start">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>align items: center</h3>
<div class="container flex flex-row items-center">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>align items: flex-end</h3>
<div class="container flex flex-row items-end">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div> -->
<!-- <h1>align items (col)</h1>
<p>열의 위치</p>
<style>
.container {
border: 1px solid;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-stretch {
align-items: stretch;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.item {
background-color: #ddd;
padding: 0.5rem;
}
</style>
<h3>align items: stretch (default)</h3>
<div class="container flex flex-col items-stretch">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>align items: flex start</h3>
<div class="container flex flex-col items-start">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>align items: center</h3>
<div class="container flex flex-col items-center">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>align items: flex-end</h3>
<div class="container flex flex-col items-end">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div> -->
<!-- <h1>Q. flex</h1>
<pre>
flex direction
justify-content
align items
</pre>
<style>
.container {
border: 1px solid;
width: 200px;
height: 100px;
}
.item {
background-color: #ddd;
padding: 0.5rem;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.justify-between {
justify-content: space-between;
}
.justify-end {
justify-content: flex-end;
}
.items-center {
align-items: center;
}
</style>
<h3>1</h3>
<div class="container flex flex-row justify-between items-center">
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>2</h3>
<div class="container flex flex-col justify-end items-center">
<div class="item">item</div>
</div> -->
<!-- <h1>flex basis</h1>
<p>아이템의 크기</p>
<style>
.container {
border: 1px solid;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.item {
background-color: #ddd;
padding: 0.5rem;
/*
row일 때 넓이,
col일 때 높이
기본값은 auto
*/
flex-basis: 100px;
}
</style>
<h3>flex direction: row</h3>
<div class="container flex flex-row">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>flex direction: column</h3>
<div class="container flex flex-col">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div> -->
<!-- <h1>flex grow</h1>
<p>아이템의 크기를 증가시킨다</p>
<style>
.container {
border: 1px solid;
}
.flex {
display: flex;
}
.item {
background-color: #ddd;
padding: 0.5rem;
}
.grow-0 {
/* default */
flex-grow: 0;
}
.grow {
background-color: #0cf;
flex-grow: 1;
}
</style>
<div class="container flex">
<div class="item grow-0">item</div>
<div class="item grow">item</div>
<div class="item grow-0">item</div>
</div> -->
<!-- <h1>flex shrink</h1>
<p>아이템의 크기를 감소시킨다</p>
<style>
.container {
border: 1px solid;
width: 400px;
}
.flex {
display: flex;
}
.item {
background-color: #ddd;
padding: 0.5rem;
width: 200px;
}
.shrink {
/* default */
flex-shrink: 1;
}
.shrink-0 {
background-color: #f00;
flex-shrink: 0;
}
</style>
<div class="container flex">
<div class="item shrink">item</div>
<div class="item shrink-0">item</div>
<div class="item shrink">item</div>
</div> -->
<h1>flex order</h1>
<p>아이템의 배열 순서</p>
<style>
.container {
border: 1px solid;
}
.flex {
display: flex;
}
.item {
background-color: #ddd;
padding: 0.5rem;
}
.order-none {
/* default */
order: 0;
}
.order-1 {
order: 1
}
.order-2 {
order: 2
}
.order-3 {
order: 3
}
</style>
<div class="container flex">
<div class="item order-2">item 1</div>
<div class="item order-3">item 2</div>
<div class="item order-none">item 3</div>
<div class="item order-1">item 4</div>
</div>