cssflex (2) 썸네일형 리스트형 <CSS> Flexbox 레이아웃 (2) + Flexbox Froggy 풀이 2. 자식 요소 flex item 자식 요소인 flex item를 정렬할 수 있는 속성에는 여러가지가 있는데, 다음과 같다. *유의점 : CSS 기존 속성 중 float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다. 1) order flex container에 추가된 순서를 기준으로 각 flex item에 번호를 부여하여 순서를 바꿀 수 있다. ex. order:정수값; 2) flex-grow 각 flex item들에 대해 설정한 값으로 너비를 준다. 화면이 늘어나면 같이 늘어난다. *기본값은 0 ex. flex-grow:양의 정수값; 3) flex-shrink 각 flex item들에 대해 설정한 값으로 축소된다. 화면이 줄어들면 설정한 값만큼 축소된다(숫자가.. <CSS> Flexbox 레이아웃 (1) - Flexbox란? CSS3의 새로운 레이아웃 방식으로, 비교적 최신 브라우저에서 사용이 가능하다. Flexbox 레이아웃을 이용하면 부모 태그 내 자식 태그들의 위치나 정렬 등의 레이아웃 설정을 보다 편리하게 할 수 있다는 장점이 있다. - Flexbox 레이아웃 구성 크게 flex container라는 부모 요소가 있고, 이 내부에 flex item이라 불리는 자식 요소들이 위치한 형태로 구성된다. 이러한 관계를 갖고 있기 때문에, Flexbox를 사용하려면 부모 요소에 display 속성의 값을 flex로 먼저 설정한 후 사용할 수 있다. 혹은 부모 요소가 inline이면 inline-flex로 display 속성의 값을 설정해주면 된다. 구성은 flex container과 flex item들이 .. 이전 1 다음
