Css-Flex

Css-Flex

 

Css배치에 있어서 꽃인 Flex를 다뤄보자.

 

먼저.

Flex를 왜 배우는지 부터 알아보자.

 

1) 간단하고 동적인 부분에서도 효율적이다

2) 수평적인 부분에서 정렬을 하고싶다

 

1. Flex의 기본

Flex의 기본구조는 아래와 같다.

 

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

 

class명인 container와 item은 관례적으로 사용하며, 뜻 그대로 상자안에 물건들이 있다고 생각하면 편하다. 

우리는 물건을 세로로 배치할 지, 가로로 배치할 지, 띄워서 배치할 지 등 여러가지 방법들로 배치를 할 것이다.

 

이 때 항상 margin이나 padding을 줌으로써 간격을 주는 것은 상당히 비효율적이라고 볼 수 있다.

그래서 우리는 "flex"를 사용한다.

 

이의 속성은 부모요소인 "container"에 적용할 것인가? 자식요소인 "item"에 적용할 것인가에 따라 요소의 배치를 자유자재로 할 수 있다.

 

 

2. Container클래스의 flex 속성

아래 코드는 container클래스의 style이다.

 

.container {
	display : flex;
}

 

큰 상자에 display :flex를 준다면, item들이 가로로 정렬이 된다.

원래 div태그는 block요소로 세로로 열거가 되는게 정상이지만 이들을 감싸고 있는 container에 flex하나 줬다고 가로로 배치가 되었다. 

여기서 짚고 넘어갈 것은 각 item의 width만큼 배치가 된다는 것이다.

 

 

display : inline-flex또한 간단하다. flex에서 inline-block의 형태를 띄고 있다고 보면된다. 

예를 들어 기존의 flex는 item을 감싸도 여백이 남을 수 있지만 inline-flex는 container가 item에 거의 꽉 붙어서 맞춘다고 보면 된다. 상황에 맞춰 쓰면 된다.

 

 

3. flex-direction

flex에는 방향이 존재한다. 

row는 왼쪽에서 오른쪽으로 row-reverse는 오른쪽에서 왼쪽으로 요소를 배치한다.

또 column은 위에서 아래로, column-reverse는 위에서 아래로 요소를 배치한다.

 

Ex) flex-direction : column;과 같이 주면 된다.

 

 

부가적으로 flex-wrap속성은 줄넘김이 있을 때 요소를 밑에로 보낼 것인지에 대한 것인데 사용은

 

.container {
	flex-wrap :wrap;
}

 

과 같이 하면 된다.

 

 

3. flex 정렬

flex에서는 정렬만 잘 알아도 요소배치를 원하는데로 할 수 있다.

먼저 가로축 정렬과 세로축 정렬이있는데, 가로축(x축)에 대한 건 justify, 세로축(y축)에 대한 건 align-items라고 보면 된다.

 

 

예시를 들어보자.

 

.container {
	justify-content : center;
}

 

위의 코드는 가로축에 대해서 정렬한 것이기 때문에 아래 그림과 같은 결과가 나온다.

 

x축 정렬

 

반대로 세로축은 center를 줬을 때 y축에 대하여 정렬이 된다.

 

.container {
	align-items : center;
}

y축 정렬

 

 

center말고도

flex-start : 요소를 처음으로 배치

flex-end : 요소를 마지막으로 배치

space-between : 요소 사이에 동일한 간격을 줘서 배치 

와 같은 속성을 줘서 배치시킬 수가 있다.

 

 

그렇다면 요소가 한개가 아닌 여러개로 이루어진 두개이상의 행일 때는 어떻게 해야할까?

즉 flex-wrap : wrap에 상태에서 요소가 범위를 초과했을 때 말이다.

 

 

이는 "align-content"를 주면 해결할 수 있다.

align-content는 위와 마찬가지로 flex-start, space-between등 동일하게 주면 잘 작동한다.

 

 

4. flex-grow

이는 아이템들을 비율에 맞게 주고싶을 때 사용하면 편리하다.

예를들어 요소가 3개가 있는데 1:3:1크기비율로 배치를 하고싶다고 가정하자.

그렇다면 코드는 이렇다.

 

.item:nth-child(1) {
	flex-glow : 1
}
.item:nth-child(2) {
	flex-glow : 3
}
.item:nth-child(3) {
	flex-glow : 1
}

 

그냥 flex-glow :1만 존재한다면 이 세개의 요소는 동일한 비율로 container를 빈틈없이 꽉 채울 것이다.