/ CSS

CSS Flexbox - 자주 사용되는 것 정리

CSS는 다음과 같이 구성되어 있습니다.




Flexbox의 자주 사용되는 것들을 정리해보겠습니다. Flexbox는 일단 기본적으로 Container, 각 아이템들을 감싸는 박스에 사용되는 스타일 명령이 있고,
item, 각각의 아이템들에 사용되는 스타일 명령이 있습니다.

컨테이너에 사용되는 스타일

1) display : flex;

display : flex;

일단 flexbox를 사용하기위해 display : flex;를 선언해줍니다.

2) flex-direction

.container {
    flex-direction : row
    /* row가 기본값 */
}

배치 방향을 결정합니다. 기본값은 row이며 가로로 아이템들이 배치됩니다. 반대로 column으로 해주면 세로로 아이템이 배치됩니다. 중심축을 결정하는 것입니다. row-reverse, column-reverse도 있습니다.

3) flex-wrap

.container {
    /* ... */
    flex-wrap: wrap;
}

기본값은 nowrap인데 item이 많아질 경우 한줄에 꽉꽉 모두 채워지도록 기본값이 되어있습니다. 그런데 wrap을 해준다면 다음줄에 이어서 배치할 수 있습니다.

4) flex-flow

.container {
    /* ... */
    flex-flow : column wrap;
}

flex-flow로 flex-direction, flex-wrap을 같이 쓸 수 있음.

5) justify-content

.container {
    /* ... */
    justify-content : center;
}

중심 축에서 justify-content는 아이템을 어떻게 배치할 것인지 결정합니다. 예를 들어 center로 둔다면 아이템들이 가운데배치될 것입니다. 이외에도 flex-end, flex-start, space-around, space-between, space-evenly 등등이 있습니다.

6) align-items

.container {
    /* ... */
    align-items : center;
}

flex 아이템들을 수직방향으로 정렬하는데 사용할 수 있는 녀석입니다.

7) align-content

.container {
    /* ... */
    align-content : center;
}

중심 축의 반대축에서 아이템 배치할때 align-content 를 사용할 수 있습니다.

컨테이너 안의 아이템에서 사용되는 스타일

1) flex-grow

.item {
    flex-grow : 1;
}

컨테이너내부에서 아이템의 할당할 공간의 정도를 설정할 수 있습니다.

2) flex-shrink

.item {
    flex-shrink : 2;
}

flex-shrink는 컨테이너의 사이즈가 줄었을 때 어느정도로 줄어들게 할 것인지를 결정합니다.

3) flex-basis

.item {
    flex-basis : 20%;
}

flex-basis로 어느정도 공간을 차지할지 결정할 수도 있습니다.

4) align-self

.item {
    align-self: center;
}

align-self로 각각의 아이템에 대해서 위치를 따로 조정할 수 있습니다.




End.