<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>!!!!!!!!!!!!!ํ๋ ์ค(๋งค์ฐ ์ค์)!!!!!!!!!!!!</title>
</head>
<style>
.container{
display: flex;
margin: 20px auto;
box-sizing: border-box;
border: 2px solid black;
}
.box {
width: 50px;
box-sizing: border-box;
border: 1px solid black;
background-color: #ffd6de;
}
/* display: flex => block ํ๊ทธ */
/* justify~~, align~~, flex~~~ */
#parent1{
width: 1000px;
height: 100px;
flex-direction: row; /* ๊ธฐ๋ณธ๊ฐ: row */
flex-wrap: wrap; /* ์ค ๋๊น ์ฒ๋ฆฌ */
/*
space-around: ๋ชจ๋ ์์์ ์ ์ฌ๋ฐฑ์ ๋๊ฐ์ด ๋ง์ถ๋ค. (๋๋ : around)๊ฐ ๊ท ๋ฑํด์ง
space-between: ์์ชฝ ์์์ ์์ชฝ ๋์ ๋ถ์ด๊ณ ๋ชจ๋ ์์์ ์ ์ฌ๋ฐฑ์ ๋๊ฐ์ด ๋ง์ถค
space-evenly: ์์๋ค(item)์ ์ ๋์ ๊ท ์ผํ ๊ฐ๊ฒฉ์ ๋ง๋ค์ด ์ค๋ค => ์ ๋์ด๋ ์ด์จ๋ ์์๋ค ๊ฐ๊ฒฉ์ ์ ๋ถ ๋์ผํด์ง
*/
justify-content: space-around; /* ์ฃผ์ถ ๋ฐฉํฅ์ผ๋ก ์์ดํ
์ ์ ๋ ฌํ๋ค */
/*
stretch(๊ธฐ๋ณธ๊ฐ): ๋๊น์ง ์ญ์ฑ ๋์ด๋จ
flex-start: ์์์ ์ผ๋ก ์ ๋ ฌ
flex-end: ๋์ผ๋ก ์ ๋ ฌ
center: ๊ฐ์ด๋ฐ ์ ๋ ฌ
baseline: ํ
์คํธ ๋ฒ ์ด์ค๋ผ์ธ ๊ธฐ์ค ์ ๋ ฌ
*/
align-items: baseline; /* cross์ถ ๋ฐฉํฅ์ผ๋ก ์์ดํ
์ ์ ๋ ฌํ๋ค */
}
#parent2 > div{
height: 50px;
}
#parent2{
width: 500px;
/*height: 200px;*/
flex-direction: column;
flex-wrap: wrap;
/*align-items: center;*/
/*justify-content: space-between;*/
}
#parent3{
width: 300px;
height: 500px;
flex-wrap: wrap;
/* flex-wrap: wrap์ด ์ค์ ๋ ์ํ์์ => ์ฌ๋ฌ์ค์ผ๋! */
/* align-content: cross์ถ ๋ฐฉํฅ์ ๊ฒฐ์ ํจ */
/* align-content=> ์ฌ๋ฌ์ค์ ํ์ค์ฒ๋ผ ์๊ฐํด์ ์์ง์ธ๋ค๊ณ ์๊ฐํ๋ฉด ํธํจ */
align-content: center;
}
#parent4{
height: 100px;
}
#parent4 > .box{
width: 100px;
/* basis๋ฅผ ์ค์ ์ํด์ค๋ width๊ฐ ์์ผ๋ฉด ๊ทธ๊ฑธ๋ก ๋๋ค. */
flex-basis: 100px; /* ๊ธฐ๋ณธ ํฌ๊ธฐ ์ ํ๊ธฐ. ๊ธฐ๋ณธ์ auto๋ก. ์์ดํ
์ width๊ฐ์ ์ฌ์ฉํ๋ค. */
}
/* flex-grow ํน์ flex-shrink๋ ์๋ ํฌ๊ธฐ์์ ๋์ด๋ ์ ์์ ๋, ์ค์ด๋ค ์ ์์ ๋ ์ํฉ์ ๋ง์ถฐ์ ์ ์ฉ์ด ๋๋ค */
/* flex-grow ํน์ flex-shrink => flex์ ์์ํํ
ํด์ผํจ */
/* flex-grow: ํด๋น ๋น์จ๋งํผ ๋๋ ค๋ผ */
/* flex-shrink: ํด๋น ๋น์จ๋งํผ ์ค์ฌ๋ผ */
#parent4 > .box:first-child{
flex-grow: 1;
}
#parent4 > .box:nth-child(2){
flex-grow: 1;
}
#parent4 > .box:nth-child(3){
flex-shrink: 2;
}
#parent4 > .box:nth-child(4){
flex: 1 1 auto;
/* ๊ทธ๋ฅ ๋จ๋ ๊ณต๊ฐ์ ์ด item ์ ๋ถ ์ฐจ์งํ์ผ๋ฉด ์ข์ ๊ฒฝ์ฐ์ ์ด๋ ๊ฒ ์์ฃผ ์ด๋ค */
flex: 1; /* flex-grow: 1, flex-shrink:1, flex-basis: 0% */
}
#parent5{
height: 200px;
justify-content: center;
}
/* ์ฃผ์ถ selfํ๋ ๊ฑด ์์ */
/* self ๋ถ์ผ๋ฉด ์๊ธฐ ํผ์ ๋
์์ ์ผ๋ก ์ ๋ ฌ๋๋ค๊ณ ๋ณด๋ฉด ๋๋ค => ์์ํํ
์ค์ ํด์ผ ํจ */
#parent5 > div:nth-child(3){
align-self: start;
}
#parent5 > div:nth-child(5){
align-self: center;
}
#parent5 > div:nth-child(7){
align-self: end;
}
/* order: ์์ํํ
์ ์ฉํจ. ์๊ฐ์ ๋์ด ์์๋ฅผ ๋ณ๊ฒฝํ๋ค */
/* ์ฌ์ค ์คํฌ๋ฆฐ ๋ฆฌ๋๋ก ์น ๋ฌธ์๋ฅผ ์ฝ์ ๋๋ ์ ์ฉ์ด ์๋๊ณ , ์๋ฒ๋ฐ๊ฟ์ผ์ด ์ ์๋ค. */
#parent6 > div:nth-child(2){
order: 4;
}
#parent6 > div:nth-child(2){
order: 2;
}
#parent7 > div:nth-child(2){
z-index: 99;
transform: scale(200%);
}
</style>
<body>
<!-- ((div.container#parent$)>(div.box{$}*10))*7-->
<div class="container" id="parent1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="container" id="parent2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="container" id="parent3">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="container" id="parent4">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="container" id="parent5">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="container" id="parent6">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="container" id="parent7">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
