CSS Flexbox 완전 정리
HTML, CSS 2020. 9. 15. 20:02www.youtube.com/watch?v=7neASrWEFEM&t=619s
jsbin.com/tafobiyofo/edit?html,css,output
JS Bin
Sample of the bin:
jsbin.com
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
CSS-Tricks
CSS-Tricks is a website about websites.
css-tricks.com
developer.mozilla.org/en-US/docs/Web/CSS/float
float
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
developer.mozilla.org
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Basic concepts of flexbox
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of
developer.mozilla.org
<!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 class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
</html>
.container{
background: beige;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* flex-flow: column nowrap; */
justify-content: space-between;
align-items: baseline;
align-content:center;
}
.item{
width: 40px;
height: 40px;
border: 1px solid black;
}
.item1{
background: #ef9a9a;
}
.item2{
background: #ffcccb;
}
.item3{
background: #ffc1e3;
}
.item4{
background: #e6ceff;
}
.item5{
background: #c7e5c8;
}
.item6{
background: #6f74dd;
}
.item7{
background: #b6ffff;
}
.item8{
background: #eeffff;
}.item9{
background: #ff616f;
}.item10{
background: #d7ffd9;
}
'HTML, CSS' 카테고리의 다른 글
| 웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript (0) | 2020.12.30 |
|---|---|
| 비쥬얼 스튜디오 코드 설치 및 웹개발을 위한 필수 익스텐션 10개 추천 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript (0) | 2020.12.30 |
| 반응형 웹 실전 프로젝트 #45 (서브 페이지의 스크립트) (0) | 2020.07.23 |
| 반응형 웹 실전 프로젝트 #44 (서브 페이지의 마크업과 CSS) (0) | 2020.07.23 |
| 반응형 웹 실전 프로젝트 #43 (서브 페이지의 시안 점검) (0) | 2020.07.23 |