css 레이아웃 자식이 부모를 결정한다, css side effect

문제1: displey:flex

지금까지 레이아웃을 flex를 이용해서 아주 편하게 관리했고,

문제2: 부모에서 width나 height를 결정하여 자식의 너비를 결정했는데

그러한 side effect적인 css결정방법은, 나중에 코드를 수정해야할 때
직관적이지 못해서 수정에 어려움이 생길 수 있다.

예시로,
부모의 태그에

displey: flex;
flex-direction: column;

사용하는 대신

자식의 display를

display: block

으로 한다면
자동으로 줄바꿈이 일어날 것이다.

그렇다면 flex는 언제 사용하는 것일까?

일단 느낌상으론, 전체 페이지의 레이아웃을 결정할 때
그러한 방법을 이용할 것 같다.

그러니까 최대한 자식요소 자체적으로 css의 값을 지정하여 원하는 레이아웃을 만들 수 있다면
그런 방법을 취해야 하고,
그렇지 못한다면, 그제서야 다른 상위 또는 형제의 값을 건드려
영향을 받아야 한다.

css관련 영상을 찾아봐야 할 것 같다.
좋은 조짐이다.