CSS

🎨 CSS 4 | Flexbox (with λ“œλ¦Όμ½”λ“œ by 앨리) 2탄

grasinnong 2022. 9. 5. 23:25

 

 

 

 

Step 4: Flexbox  μžμ‹μ—κ²Œ 쀄 수 μžˆλŠ” 속성듀 (item)

 

HTML λ¬Έμ„œ μž‘μ„± 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-item편</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>

 

CSS μž‘μ„±

.container {
  padding-top : 100px;
  background : beige;
  height: 100vh;
  display : flex;
}
.item {
  width: 40px;
  height: 40px;
  border : 1px solid black;
}
.item1 {
  background-color: rgb(247, 114, 114);
}
.item2 {
  background-color: rgb(250, 134, 153);
}
.item3 {
  background-color: rgb(165, 100, 250);
}

 

 

 

- order

default κ°’ : 0;

μˆœμ„œ μž„μ˜λ‘œ μ§€μ •ν•˜κΈ° 

.container {
  padding-top : 100px;
  background : beige;
  height: 100vh;
  display : flex;
}
.item {
  width: 40px;
  height: 40px;
  border : 1px solid black;
}
.item1 {
  background-color: rgb(247, 114, 114);
  order : 2;
}
.item2 {
  background-color: rgb(250, 134, 153);
  order : 1;
}
.item3 {
  background-color: rgb(165, 100, 250);
  order : 3;
}

 

 

 

 

- flex-grow

default κ°’ : 0; μžμ‹ μ˜ κ³ μœ ν•œ μ‚¬μ΄μ¦ˆ μœ μ§€ 

flex-grow κ°’ μ§€μ •ν•˜κΈ° : 화면이 컀질 λ•Œ ν•΄λ‹Ή λΉ„μœ¨λ§ŒνΌ λŠ˜μ–΄λ‚¨ 

.container {
  padding-top : 100px;
  background : beige;
  height: 100vh;
  display : flex;
}
.item {
  width: 40px;
  height: 40px;
  border : 1px solid black;
}
.item1 {
  background-color: rgb(247, 114, 114);
  flex-grow : 1;
}
.item2 {
  background-color: rgb(250, 134, 153);
  flex-grow : 2;
}
.item3 {
  background-color: rgb(165, 100, 250);
  flex-grow : 3;
}

 

 

 

- flex-shrink

default κ°’ : 0; μžμ‹ μ˜ κ³ μœ ν•œ μ‚¬μ΄μ¦ˆ μœ μ§€ 

flex-shrinkκ°’ μ§€μ •ν•˜κΈ° : 화면이 μ€„μ–΄λ“€λ©΄μ„œ ν•΄λ‹Ή λΉ„μœ¨λ§ŒνΌ 쀄어듦

.container {
  padding-top : 100px;
  background : beige;
  height: 100vh;
  display : flex;
}
.item {
  width: 40px;
  height: 40px;
  border : 1px solid black;
}
.item1 {
  background-color: rgb(247, 114, 114);
  flex-grow : 1;
  flex-shrink : 1;
}
.item2 {
  background-color: rgb(250, 134, 153);
  flex-grow : 2;
  flex-shrink : 1;
}
.item3 {
  background-color: rgb(165, 100, 250);
  flex-grow : 3;
  flex-shrink : 1;
}

 

화면이 컀질 λ•Œ (flex-grow λΉ„μœ¨λ‘œ)

 

ν™”λ©΄ 크기가 쀄어듀 λ•Œ (flex-shrink λΉ„μœ¨λ‘œ)

 

 

- flex-basis

default κ°’ : auto; flex-grow, flex-shrink 에 맞게  

flex-basis κ°’ μ§€μ •ν•˜κΈ° : flex-grow, flex-shrinkκ°€ 없을 경우, flex-basis 에 μ§€μ •λœ λΉ„μœ¨λ§ŒνΌ 차지. 

.container {
  padding-top : 100px;
  background : beige;
  height: 100vh;
  display : flex;
}
.item {
  width: 40px;
  height: 40px;
  border : 1px solid black;
}
.item1 {
  background-color: rgb(247, 114, 114);
  flex-basis: 60%;
}
.item2 {
  background-color: rgb(250, 134, 153);
  flex-basis: 30%;
}
.item3 {
  background-color: rgb(165, 100, 250);
  flex-basis: 10%;
}

 

 

 

 

-align-self

default κ°’ : auto; 

align-self : μ•„μ΄ν…œ λ³„λ‘œ μ•„μ΄ν…œμ˜ align 지정 

.container {
  padding-top : 100px;
  background : beige;
  height: 100vh;
  display : flex;
}
.item {
  width: 40px;
  height: 40px;
  border : 1px solid black;
}
.item1 {
  background-color: rgb(247, 114, 114);
  flex-basis: 60%;
  align-items : center;
}
.item2 {
  background-color: rgb(250, 134, 153);
  flex-basis: 30%;
}
.item3 {
  background-color: rgb(165, 100, 250);
  flex-basis: 10%;
}

 

 

λ‹¨μΆ•ν˜• 

flex : 2 2 auto /*grow, shrink, basis*/

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi

css-tricks.com

 

μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ λ³€κ²½κΈˆμ§€ (μƒˆμ°½μ—΄λ¦Ό)