핫하게 떠오르는 flex 속성 공부해보자(1)

css로 작업을 하다 보면 block요소를 수평으로 주고싶을때 float나 inline-block 을 많이 씁니다

사실 이 방법으로 많이 쓰다보면 float 같은 경우에는 부모요소에 float해제도 시켜줘야하고 .. (귀찮고 비효율적)

flex는 굉장히 유연하고 요소의 정렬,방향,크기,순서 까지 제어 할 수 있어요.

사실 쓰다 보면 신세계..!!

왜그런지 같이 공부해볼까요??

이번 포스트는 부모에게 속성을 적용해

요소들이 배치가 되는 속성들을 배워볼 거에요. 집중 ~~

1.flex 사용방법

: display:flex

flex를 사용하기 위해선 컨테이너와 그 의 자식 을 만들어주어야 합니다.

container 안에 item요소들을 만들어줄게요

    

        
1
        
2
        
3
        
4
        
5
    

위에 처럼 만들어 주었다면 flex를 적용볼게요

    #container{
        display: flex;
    }
    .item{
        font-size: 36px;
    }   

#contatiner 에 flex를 적용하면 그안의 자식들이 배치가 됩니다

바로요렇게 !!

2.요소의 방향

: flex-direction

이제 item방향을 바꾸어볼게요

지금 위에보면 item이 왼쪽으로 요소들이 다닥다닥 나열되어 있지요?

이 말은 flex-direction 기본값이 row(열) 라는 거에요.

그럼 이 요소들을 column(행)으로 바꾸어 볼게요

       
  #container{
        display: flex;
        flex-direction: column;
    }

column(행)으로 바뀌었죠? 

아까 처음상태(row)에서 오른쪽으로 나열하는 걸로 바꿔볼게요

          
   #container{
        display: flex;
        flex-direction: row-reverse;
    }

어때요? float없이도 item을 오른쪽으로 이동할수 있어요.

flex-direction:row	요소의 정렬을 가로로 설정(기본값)
flex-direction:row-revers	요소의 정렬을 가로반대로 설정
flex-direction:column	요소의 정렬을 세로로 설정
flex-direction:column-revers	요소의 정렬을 세로반대로 설정

3.요소의 줄바꿈

: flex-wrap

flex-wrap은 주로 반응형일때 많이 사용되는데

컨테이너가 줄어들었을때 요소들이 떨어질것인가 붙어있을것인가를 설정해줍니다.

item에 width값을 줄게요.

    #container{
       display: flex;
       flex-wrap: wrap;
    }
    .item{
        width: 200px;
        font-size: 36px;
    }

flex-wrap : nowrap 일때

flex-wrap : wrap 일때

둘의 차이점 보이시나요?

nowrap일땐 item의 width,higth값을 무시 하기 때문에 창이 줄어들면 item도 같이 줄어듭니다

여기서 item이 width값을 유지하면서 자연스럽게 떨어지게 하고싶다면 wrap을적용 해주면 되겠죠?

flex-wrap:nowrap	요소를 한 줄에 정렬(기본값)
flex-wrap:wrap	요소를 여러줄에 걸쳐 정렬
flex-wrap:wrap-revers	요소를 여러줄에 걸쳐 반대로 정렬

4.컨테이너내 상하관계 정렬

: align-content

컨테이너에서 y축을 기준으로 요소를 위,가운데,아래 정렬해준다고 생각하면 됩니다.

이 속성은 flex-wrap과 함께 사용되며 요소가 여러줄(2줄 이상) 이고 여백이 있을 경우에 사용되요.

flex-wrap 속성 추가하고

컨테이너에 높이를 줄게요

#container{
   display: flex;
   flex-wrap:wrap;
   align-content:center;
   height: 1000px;
   background: #ffd700;
}
.item{
    font-size: 36px;
}

align-content:stretch	요소의 정렬상태 기본(기본값)
align-content:center	요소들을 컨테이너의 수직 가운데으로 정렬
align-content:flex-start	요소들을 컨테이너의 위로 정렬
align-content:space-between	시작요소는 위쪽에 끝요소는 아래쪽에 정렬되고 그사이 요소들이 정렬
align-content:space-around	요소에 여백을 포함하여 정렬

5.컨테이너내 요소 상하관계 정렬

: align-items

교차축에서 요소를 정렬합니다.

교차축이라 하면 위에서 배운 요소의 방향을 생각하면 되요.

바로 flex-direction !!

지금은 기본값으로 설정되어있겠죠? row로요

그럼 교차축은 row방향이 되어 수평이겠죠?

수평을 기준으로 생각하여 align-items를 설정해봅시다 

#container{
   display: flex;
   align-items:center;
   height: 1000px;
   background: #ffd700;
}
.item{
	width: 200px;
    font-size: 36px;
}

align-items:stretch	컨테이너내에 요소들이 교차축에 걸쳐 늘어남(기본값)
align-items:flex-start	교차축 시작부분에 정렬
align-items:flex-end	교차축 밑부분에 정렬
align-items:center	교차축 중심에 정렬
align-items:baseline	요소에 텍스트를 기준으로 정렬

6.컨테이너내 좌우관계 정렬

: justify-content

컨테이너에서 x축을 기준으로 요소를 왼쪽,가운데,오른쪽 정렬해준다고 생각하면 됩니다.

   
    #container{
       display: flex;
       justify-content: center;
    }
    .item{
        font-size: 36px;
    }

센터정렬 됬죠?

그럼 요소에 간격을 줘서 정렬되게끔 해볼까요?

space-around 값을 줍시다

이것은 신...세계..!!

사실 마진값 계산해서 일일이 요소에 주고 첫번째요소 마진빼주고...귀찮잖아요??

이 space-around 값하나면 균등하게 여백을 포함하여 알아서 정렬해줘요.

justify-content:flex-start	요소들을 컨테이너의 왼쪽으로 정렬(기본값)
justify-content:flex-end	요소들을 컨테이너의 오른쪽으로 정렬
justify-content:center	요소들을 컨테이너의 가운데으로 정렬
justify-content:space-between	시작요소는 첫번째에 마지막요소는 끝점에 정렬되고 그사이 요소들이 정렬
justify-content:space-around	요소에 여백을 포함하여 정렬

컨테이너에서 적용하는 flx속성을 알아봤어요

너무 흥미롭죠..?

다음은 items에서 적용하는 flex속성을 배워보겠습니다