[css] flex box

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

container

• display: flex; /* inline-flex */
• flex-direction: row; /* row-reverse, column, column-reverse */
• flex-wrap: nowrap; /* wrap, wrap-reverse */
• flex-flow: row wrap /* flex-diretion과 flex-wrap속성을 합친거 */
• justify-content: flex-start; /* flex-end, center, space-between, space-around */ 주축방향
• align-items: flex-start; /* flex-end, center, baseline, stretch */ 수직방향에서 item과 container 사이 여백
• align-self: flex-start; /* align-items는 모든 item에 작용하지만 align-self는 개별 item에 적용, align-items속성보다 우선
• align-content: flex-start; /* flex-end, center, space-between, space-around, stretch */ flex-wrap: wrap 일때 수직방향에서 item 사이 여백

item

• order: 1; /* item의 순서 */
• flex-grow: 1; /* container에 여분의 여백이 있을 때 item의 너비 > flex-basis너비 일때 동작하는 속성 */
• flex-shrink: 1; /* item의 너비가 flex-basis에서 지정한 기본 너비보다 작을 때 동작하는 비율 */
• flex-basis: auto; /* 100px */ item의 기본 너비

align-self 속성

 

 

참고

https://thrillfighter.tistory.com/489

https://heropy.blog/2018/11/24/css-flexible-box/