CSS Flexbox Tutorial for Beginners | (Single) Flex-Items | 2/2

 

single flex item을 바꾸는 방법에는 어떤 방법이 있을까?

 

 

1.   order property

0다음 1의 순서로 order가 적용된다. (div1이 order: 1에 의맨뒤로 이동함)

 

 

 

2. align-self property.

 

  flex-direction은 row기준으로 적용되지만 

  align-self는 cross라인 기준으로 적용됨!

 

div2에 align0-self : flex-start ; 적용된 모습

 

 

div2에 align0-self : flex-end ; 적용된 모습

 

 

 

 

3. MDN 문서 참고!

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

 

 

4. flex property (grow)

 

flex-grow에 1이 기준점이 되어서 이후 숫자가 커지면 커질수록 1의 x배가 된다.

flex-grow가 0이면 늘어나지 않음!

 

flex:1 1 auto; 경우 늘어남!

 

5. flex property (shrink)

 

 

flex:1 4 auto;     ---> 4 times decrease.

 

5. flex property (flex-basis)  ***중요

 

  - depending on the main access  ***

     

 

 

row면 width에 적용 / column 이면 height에 적용됨

 

 

axis : 중심선

 

(강의동영상)

 

https://www.youtube.com/watch?v=RdlEEfx912M