CSS/CSS display

CSS - display(4) flexbox, item

쫑뚱이 2022. 7. 29. 23:16
728x90
반응형

CSS - display(4) flexbox, item


오늘은 저번 글에 이어서 flexbox에서 item에 관련한

속성에 대해 알아보겠습니다.

 

order 속성 예시 코드
결과값

(해당 코드는 순서가 정해진 박스에 order 속성을 사용하여 배치 순서를 바꾸어보는 예시입니다.)

 

(1)

order

order은 item들의 배치 순서를 지정해 줄 수 있는 속성으로

숫자가 낮을수록 왼쪽으로 배치가 됩니다.

 

기본적으로 원래 작성된 태그의 순서대로 진행이 되며

숫자가 높을수록 오른쪽으로 배치가 됩니다.

(기본값은 0으로 되어있습니다.)

 

그래서 배치를 바꾸고 싶을 때는 태그의 순서를 바꿀 수도 있지만

태그가 많고 복잡한 상황이라면 order속성을 통해 재배치를 할 수 있습니다.

 

flex-grow 예시 코드
결과값

(해당 예시는 flex-grow를 사용하여 1번 아이템의 크기를 다른 아이템보다 높은 2를 적용하여

너비를 넓히는 예시입니다.)

 

(2)

flex-grow

flex-grow 속성은 item의 너비를 지정해 줄 수 있는 속성입니다.

지정을 하면 일단 공간에 같은 너비로 배치가 되는데

그때 flex-grow의 숫자를 높이면 다른 item들의 너비가 줄고

그 크기만큼 해당 item의 너비가 넓어질 수 있습니다.

 


 

오늘은 flexbox에서 지난 글에 이어 item과 관련된

기본적인 속성에 대해 알아보았습니다.

 

초반에는 container과 관련된 속성만 알아도

웹디자인을 할 수 있기 때문에

container과 관련된 속성 위주로 공부하시고

 

item과 관련된 속성에는 이런 것들이

있다는 것만 알아두셔도 좋을 것 같습니다.

 

그럼 추후에 필요한 경우 구글이나 네이버와 같은 곳에서

검색해서 사용할 수 있기 때문에

이런 게 있구나 정도로 알아두시면 좋겠습니다.

 

감사합니다!

728x90
반응형