[TIL] 220201

Lee Syong·2022년 2ė›” 1ėž
0

TIL

ëŠĐ록 ëģīęļ°
166/204
post-thumbnail

📝 ė˜Ī늘 한 ęēƒ

  1. flexbox

📚 ë°°ėšī ęēƒ

1. flexbox

1) flex-wrap

flexbox는 ęļ°ëģļė ėœžëĄœ flex-wrapėī nowrap(ęļ°ëģļ값)ėž 때 ę·ļ itemë“Īė— ëķ€ė—Žëœ width 값ė„ ëŽīė‹œí•˜ëĐīė„œ ëŠĻ든 itemë“Īė„ 한 ėĪ„ė— ėœ„ėđ˜ė‹œí‚Ļë‹Ī.

flex-wrap: wrapė„ ė§€ė •í•˜ëĐī flexboxė˜ itemė— ëķ€ė—Ží•œ 프로퍾티(width 등)ė— 따띾 itemë“Īėī ë°°ėđ˜ëœë‹Ī.

2) wrap-reverse

<div class="father">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>
.father {
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap; /* 또는 flex-wrap: wrap-reverse */
  height: 100vh;
}

.child {
  width: 100px;
  height: 100px;
  color: white;
  background-color: lightblue;
  /* ðŸ’Ą ėžė‹ divė— flex ė†ė„ąė„ ëķ€ė—Ží•œ ėīėœ ëŠ” div ė•ˆė˜ 텍ėŠĪíŠļëĨž ėĪ‘ė•™ ė •ë Ží•˜ęļ° ėœ„í•īė„œėīë‹Ī. */
  display: flex;
  justify-content: center;
  align-items: center;
}

ðŸ’Ą flex-directionė— row-reverse 또는 column-reverse 값ė„ ėĢžė—ˆė„ 때ė™€ ęĩŽëķ„í•īė•ž 한ë‹Ī.
flex-directionė—ė„œė˜ reverse는 ėĢžėķ•ė˜ ė‹œėž‘ė ęģž 끝ė ė„ 바ęūļ는 반ëĐī,
flex-wrapė—ė„œė˜ reverse는 ėš”ė†Œę°€ 나ė—ī되는 ė‹œėž‘ė ęģž 끝ė ė„ 바ęūžë‹Ī.

3) align-content

cross axis ėƒė— itemë“Ī ė™ļė—ë„ ë‚Ļė€ ęģĩ간ėī ėžˆė„ 때(flex containerė— height 값ė„ 따로 ė§€ė •í•īėĪ€ ęē―ėš° 등) flex container ë‚īė—ė„œ lineė„ ė •ë Ží•˜ęļ° ėœ„í•ī ė‚ŽėšĐ한ë‹Ī.

justify-contentëĨž main axis ë‚īė˜ 각각ė˜ itemë“Īė„ ė •ë Ží•  때 ė‚ŽėšĐ하는 ęēƒęģž ëđ„ėŠ·í•˜ë‹Ī.

4) flex-shrink, flex-grow

(1) flex-shrink

flex-shrinkė˜ ęļ°ëģļ값ė€ 1ėīë‹Ī.
screen 큎ęļ°ëĨž ëģ€ęē―í•Ļė— 따띾 flex containerė˜ 큎ęļ°ę°€ ėĪ„ė–īë“Īė–ī flex itemė˜ 큎ęļ°ę°€ flex containerė˜ 큎ęļ°ëģīë‹Ī ėŧĪėĄŒė„ 때 ëŠĻ든 flex itemë“Īė˜ 큎ęļ°ëĨž ėžė •í•˜ęēŒ ėž‘ęēŒ 만든ë‹Ī.

값ėī 0ėž 때는 screenė„ ė•„ëŽīëĶŽ ėĪ„ė—Žë„ ėĢžëģ€ė˜ ë‹ĪëĨļ itemėī ëģīėīė§€ ė•ŠęēŒ 될ė§€ė–ļė • flex-shrinkëĨž 0ėœžëĄœ ė§€ė •í•œ itemė˜ 큎ęļ°ëŠ” ė›ëž˜ 큎ęļ°ė—ė„œ ëģ€í•˜ė§€ ė•ŠëŠ”ë‹Ī.

값ėī 2가 되ëĐī ë‹ĪëĨļ itemë“Īëģīë‹Ī 2배만큾 더 ėž‘ęēŒ ėĪ„ė–ī든ë‹Ī.

(2) flex-grow

flex-growė˜ ęļ°ëģļ값ė€ 0ėīë‹Ī.
screen 큎ęļ°ëĨž ëģ€ęē―í•Ļė— 따띾 flex containerė˜ 큎ęļ°ę°€ ėŧĪė ļ flex itemė˜ 큎ęļ°ę°€ flex containerė˜ 큎ęļ°ëģīë‹Ī ėž‘ė•„ė ļ ęģĩ간ėī ë‚Ļė•„도(ėķ”ę°€ëĄœ ęģĩ간ėī ėƒęēĻ도) flex itemė˜ 큎ęļ°ëŠ” ëģ€í•˜ė§€ ė•ŠëŠ”ë‹Ī.(ėŧĪė§€ė§€ ė•ŠëŠ”ë‹Ī.)

많ė€ itemë“Ī ėĪ‘ 하나ė˜ itemė˜ flex-grow 값ėī 1ėž 때는 í•īë‹đ itemė˜ 큎ęļ°ę°€ screenėī ėŧĪė§ė— 따띾 ėķ”ę°€ëĄœ ėƒęļī ęģĩ간ė„ ëŠĻ두 ė°Ļė§€í•œ 만큾ė˜ 큎ęļ°ëĄœ ėŧĪė§€ęēŒ 된ë‹Ī.

flex-grow 값ėī 각각 1, 2ėļ itemėī 두 개가 ėžˆë‹ĪëĐī screenėī ėŧĪė§ė— 따띾 ėķ”ę°€ëĄœ ėƒęļī ęģĩ간ė„ 1:2ė˜ ëđ„ėœĻ로 나눠 가ė§€ëĐ° ę·ļ만큾 itemė˜ 큎ęļ°ę°€ ėŧĪė§€ęēŒ 된ë‹Ī.

5) flex-basis

flex itemė˜ 큎ęļ°ę°€ ëģ€í•˜ęļ° ė „ė— ėīˆęļ° 큎ęļ°ëĨž ė„Īė •í•˜ęļ° ėœ„í•ī ė‚ŽėšĐ한ë‹Ī.
flex growëĨž ė‚ŽėšĐ하ëĐī flex-basis 값ė€ ëŽīė‹œëœë‹Ī.

6) flexbox froggy

í†ĩęģž


âœĻ ë‚īėž 할 ęēƒ

  1. grid
profile
ëŠĨ동ė ėœžëĄœ ė‚īėž, 행ëģĩ하ęēŒðŸ˜

0개ė˜ 댓ęļ€