https://www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=9
Container
display
flex-direction : main axis, cross axis 어느 방향으로 정렬할 것인지 정하는 것에 의해 바뀜.
flex-wrap
flex-flow
justify-content
align-items
align-content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>.container {
background: beige;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/* flex-flow: column nowrap */
/* justify-content: space-between;
align-items: baseline;
align-content: space-between; */
}
.item {
width: 40px;
height: 40px;
border: 1px solid black;
}
.item1 {
background: #ef0a0a;
flex-grow: 1;
flex-shrink: 1;
align-self: center;
/* flex-basis: 30%; */
}
.item2 {
background: #f48fb1;
flex-grow: 1;
flex-shrink: 1;
}
.item3 {
background: #ce93d8;
flex-grow: 1;
flex-shrink: 1;
}
Color 선택할 때 유용한 사이트
https://material.io/resources/color/#!/?view.left=0&view.right=0
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
Flex Box 복습 게임
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'Front-End > 프론트엔드 강의 - 프론트엔드 개발자 되기 입문편⭐️ (개념+클론코딩)' 카테고리의 다른 글
| 도움되는 사이트 (0) | 2022.02.01 |
|---|---|
| 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web (0) | 2022.01.31 |
| CSS 레이아웃 정리 display, position 완성 (0) | 2022.01.31 |
| CSS 셀렉터, 기초 이론 정리. (0) | 2022.01.31 |
| HTML 태그 완성 (0) | 2022.01.31 |