Css Flex 사용법

Flex란

 

컨테이너 안에 아이템들을 정렬하기 위해 사용합니다.

여기서 컨테이너는 Flex Container라고 부릅니다

컨테이너에 Flex 적용하기

일단 Flex를 적용하지 않고 그냥 컨테이너에 아이템 3개를 만들어보겠습니다.

컨테이너에 Flex를 적용하면

따라 치시면서 해보시면 글 보는 거보다 이해가 빠릅니다.

.container {
    position: absolute;
    left : 100px;
    top : 100px;
    width : 500px;
    height: 300px;
    border : 2px solid black;
    /* Flex */
    display : flex;
}

이렇게 가로로 정렬이 됩니다 

기본적으로 가로로 정렬이 되고

Flex-direction으로 가로로 정렬할지 세로로 정렬할지 정할 수 있습니다.

어떤 분은 어묵꼬치로 비유하시던데 

flex-direction : row; 는 아이템들이 가로로 꽂혀있는 거고

column은 세로로 꽂혀있는 겁니다.

여기서 row-reverse , column-reverse는 아이템의 순서를 반대로 뒤집어줍니다

column-reverse를 하면 이렇게 세로로 뒤집힙니다

Justify-content 

 

Justify-content는 아이템들의 가로배치를 담당합니다

 

5개만 알아보겠습니다.

 

justify-content : center  // 아이템들을 가운데로 정렬합니다

justify-content : space-beetween  //  아이템들 사이에 일정한 간격을 둡니다

justify-content  : space-around  //아이템들 <주위>에 간격을 둡니다

justify-content  : flex-start // 왼쪽에 정렬합니다.  justify-content에 옵션을 주지 않으면 기본값입니다.

justify-content  : flex-end //오른쪽에 정렬합니다.

 

 

 

align-items 

얘는 4개만 알아보도록 하겠습니다.

align-items : cetner // 세로로 중앙에 배치합니다

align-items : flex-start // 위쪽에 배치합니다

align-items : flex-end // 아래에 배치합니다

align-items : baseline // 컨테이너의 기준선에 맞게 배치합니다.

baseline은 글로만 보시면 이해가 안되실수도 있는데 제가 아이템들 중 하나만 폰트 사이즈를 다르게 만들어보겠습니다.

이런 식으로 배치합니다.

 

 

이것들을 이용해서 컨테이너를 정중앙에 놓고

아이템들도 동글동글하게 만들고 텍스트도 정중앙으로 보내겠습니다.

 

 

body {
    height: 100vh;
    display : flex;
    justify-content: center;
    align-items : center;
}

.container {
    width : 500px;
    height : 300px;
    border : 2px solid black;
    /* Flex */
    display : flex;
    justify-content: center;
    align-items: center;
}

.item {
    width : 90px;
    height : 90px;
    background-color : gray;
    border-radius : 100%;
    color : white;
    margin : 10px;
    /* flex */
    display : flex;
    justify-content :center;
    align-items: center;
}