Front-end/CSS (3) 썸네일형 리스트형 [flexBox] flex-shrink, flex-grow 공부하기 flex-shrink, flex-grow 는 child 에게 줄 수 있는 property 이다. flex-shrink 는 화면 크기가 줄어들면서 flex box가 눌릴때 element 의 행동을 정의한다. 즉, 어떤 box 가 찌그러질지 정의할 수 있는 것이다. flex-shrink: 1 이 기본값이다. 먼저, 다음과 코드의 결과는 width 를 200px 로 주었어도 화면 크기에 따라 width 가 달라지는 모습을 보인다. 1 2 3 4 5 6 .parent { display: flex; height: 100vh; justify-content: center; align-content: flex-start; align-items: center; } .child { width: 200px; height: .. [flexBox] flex-wrap, align-content 공부하기 flexbox 를 공부중인데, flexbox 는 width 를 신경쓰지 않는다. 만약 내가 width 를 px 로 주어 설정했더라도 flexbox 는 한 줄에 다 표현하려고 하기 때문에 width 가 달라진다. 다음과 같이 child box 들의 width 와 height 를 200px 로 주어도 화면 크기가 작아짐에 따라 다음과 같이 정사각형이 width 가 변하면서 일그러지는 모습을 보인다. 바로 flex-wrap 속성 때문인데, 부모 컨테이너에 flex-wrap: nowrap 이 기본으로 설정되어있다. 무슨 일이 있더라도 element 가 같은 줄에 있어야 해! 라고 말하는 것과 같다. 만약 flex-wrap: wrap 으로 바꾼다면, child 의 크기를 유지해! 라고 말하는 것과 같다. 그런데 .. [flexBox] align-items 와 align-self 차이 + order 프론트엔드 개발을 하면서 layout 을 짜는 게 굉장히 어려운 것 같다. 이번에 새 프로젝트도 하고 회사 홈페이지를 만드는 업무를 맡았는데, 중요한 개념이 될 것 같아서 공부를 시작했다. css 관련해서는 어느정도 알고 있다고 생각했는데, align-self 를 처음 공부하게 되었다. flex-container 를 만들면 justify-content 와 align-items 를 거의 필수로 쓰게 되는데, align-self 는 뭘까? align-items 는 자식 element 들의 cross-axios 를 배치하는 것인데, align-self 를 통해 원하는 자식만 배치할 수 있는 property 다. 예를 들어, 다음과 같은 코드에서 .child:nth-child(2) 에 align-self 속성을.. 이전 1 다음
