신예리의 개발자취

Flex Item flexbox 정렬에 영향을 미치는 속성. flex container와 달리 부모(container)가 아니라 자식(item, box)에 직접 설정해야 한다. flex container에 대한 설명은 아래 링크에서 읽어보면 된다. Flex Container Flex Container 부모(container)가 display:flex일 때, 부모에게 설정하면 그 자식(box)의 정렬에 영향을 미치는 속성. flex-direction flex-wrap flex-flow flex-direction과 flex-wrap을 함께 사용할 때, fle.. shinye0213.tistory.com align-self align-items, align-content와 비슷하므로 자세한 설명은 생략. 말 ..

Flex Container 부모(container)가 display:flex일 때, 부모에게 설정하면 그 자식(item, 즉 box)의 정렬에 영향을 미치는 속성. flex-direction flex-wrap flex-flow flex-direction과 flex-wrap을 함께 사용할 때, flex-flow로 대체하면 코드가 짧아진다. justify-content align-items 이 속성은 cross axis 방향의 box 위치와 여백 설정에 관여하며, 개행하지 않는다. align-content 마찬가지로 cross axis 방향의 box 위치와 여백 설정에 관여해 align-items와 유사한 성질을 가진다. 부모의 width가 부족하면 flex-wrap처럼 개행하며, box 덩어리들을 inli..

display: block; display: inline; display: inline-block; display: flex; (번외) float: left; 아래 글에서 float에 대해 상세하게 설명해 놓았다. 영어 전문을 읽을 필요 없이 그림만 봐도 어느 정도 이해가 된다. All About Floats | CSS-Tricks Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is comm..