flexbox2

• 

  [CSS3] display : flex ② Flex 아이템에 적용되는 속성들 지난 시간에는 'Flex 컨테이너에 적용되는 속성들'에 대해서 알아보았다. 이번에는 컨테이너의 자식 요소인 아이템에 적용되는 속성들을 알아보자. 정해진 비율만큼 크기를 늘려, 여백 채우기 : flex-grow display: flex에 적용된 것을 보면, 여백이 채워지지 않는 모습을 볼 수 있다. 이는 flex-grow의 기본 값이 0이기 때문이다. 만약 다음과 같이 아이템 박스 1에 flex-grow: 1을 지정하면, 나머지 여백의 100% 비율에 맞춰 크기를 늘리는 모습을 볼 수 있다. 이 상태에서 아이템 박스 2에 flex-grow: 1을 지정하면, 나머지 여백의 박스1과 박스2가 각각 1:1의 비율로 크기를 늘리는 모습을 볼 수 있다. See the Pen KKzePBg by joonho lee .. Web/CSS 2020. 9. 15.

• 

  [CSS3] display : flex ① Flex 컨테이너에 적용되는 속성들 반응형 웹페이지를 만들기 위해선, 박스모델들의 너비 비율을 유지한 채 박스모델들을 한 줄로 정렬하는 작업이 필수적이다. 그러나 이는 position이나 float로 처리하기 꽤나 까다롭다. (원래 그러한 목적으로 만들어진 기능들도 아니다. float의 경우, 이미지 주변에 글귀들을 두기 위해 사용되는 속성이다. 또한 Position의 경우, HTML 요소에 차원을 부여하고 위치를 지정하기 위해 생성된 기능이다) 이럴 때 아주 유용하게 쓸 수 있는 기능이 있는데, 바로, display : flex이다!! 다만, 비교적 최근에 나온 기능이라 크로스 브라우징을 고려했을 때 고민하는 분들이 더러 있을 것 같다. 그러나 거의 모든 브라우저는 display : flex를 지원한다. (뿐만 아니라, align-con.. Web/CSS 2020. 9. 14.