[UI/UX] flex

주 축(main-axis)과 교차 축(cross-axis)

위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같다.
값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 된다.
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 된다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다.

 

 

---

 

flex : 1 1 auto; //flex-grow flex-shrink flex-basis 

 

flex-grow

`flex-grow`는 0보다 큰 값을 세팅하면 Flexible 박스로 변하면서 남은 여백을 메우는 속성입니다.

flex-shrink

`flex-grow`속성이 남는 공간을 분배해서 나눠가지는 것이라면 `flex-shrink` 속성은 반대로 공간을 넘어갈 경우에 각 아이템들을 줄이는 방법을 설정하는 것입니다.

기본값은 1이고 속성값이 1 이상이라면 부모 컨테이너의 크기가 flex아이템보다 작아질 경우 부모 컨테이너에 맞춰서 크기가 줄어들게 됩니다.

flex-basis

flex 아이템의 기본 사이즈를 지정하는 속성입니다.

기본값은 auto이기 때문에 설정하지 않으면 컨텐츠의 크기에 따라서 사이즈가결정되게 됩니다.

따라서 flex: 1 1 auto;를 주게 되면

 

 

 

 

 

---

 

https://appdevelopmaster.tistory.com/350

 

https://velog.io/@joyh7680/flex-1-1-auto-flex-0-0-100px