heropy.blog/2018/11/24/css-flexible-box/
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F
heropy.blog
flex에 대해 매우 자세히 나와있는 곳이다.
우선 container에는 display, flex-flow, justify-content 속성을 사용할 수 있다.
또한 그 container 안의 박스들에는 order, flex, align-self 속성을 사용할 수 있다.
container
display
container를 표시하는 방식에 대한 특성으로 보인다.
block/inline-blick/none 이외에 flex/inline-flex로 컨테이너가 정렬하는 방식을 정의한다.
flex-flow
flex-direction과 flex-wrap의 단축 속성.
flex-direction은 row/column[-reverse]을 지정하여 container 안의 아이템들이 가로로 쌓일지, 세로로 쌓일지를 결정한다. (정확하게는 main-axis와 cross-axis를 반전시킴)
reverser를 추가하면 쌓이는 시작 지점이 반전된다.
flex-wrap은 nowrap을 지정하면 item들을 무조건 한 줄로 쌓는다. wrap은 container 밖으로 넘어갈 시 줄바꿈을 시행하고, wrap-reverse는
flex의 start지점이 반전되며 wrap한다.
justify-content
container 안의 item들을 정렬하는 방식을 지정한다.
특히, space-around 속성값을 지정하면 균등 정렬이 된다. (양쪽 정렬은 space-between)
align-content / align-items
2줄 이상일 경우 content를 1줄일 경우 items를 사용한다.
container안의 items의 cross-axis 방식을 선택한다.
Items
속성의미
| order | Flex Item의 순서를 설정 |
| flex | flex-grow, flex-shrink, flex-basis의 단축 속성 |
| flex-grow | Flex Item의 증가 너비 비율을 설정 |
| flex-shrink | Flex Item의 감소 너비 비율을 설정 |
| flex-basis | Flex Item의 기본 너비 설정 |
| align-self | cross-axis를 기준으로 각 개별 item의 정렬 방식 설정 |
'길 > CSS' 카테고리의 다른 글
| child element를 중앙에 위치시키는 법 (0) | 2021.02.06 |
|---|---|
| line-height (0) | 2021.01.24 |
| box model (0) | 2021.01.21 |
| id vs class (0) | 2021.01.21 |
| background 속성 (0) | 2021.01.21 |