Flex란?

숩인·2023년 11월 16일

패스트캠퍼스 블로깅

목록 보기

2/8

Flex하면 뭐가 먼저 떠오르냐고?

이 Flex 말고,,, css의 flex를 알아보자~!~!

Float

먼저 처음 진행했던 프로젝트에서 나는 float를 사용했다. 3년전쯤이니까.. flex를 알았다면 더 쉽게 할 수 있었을텐데!! 라는 생각이 드는데, 그때 작성했던 코드를 보면

.orgins_line p{ float: left;}
.orgins_line::after {
    content: '';
    display: block;
    clear: both;
}

float로 왼쪽으로 정렬을 하고 after로 속성을 변경해주었다.
flex면 한 줄로 끝나는 수평정렬을 float 로 하면 정말 불편하다는 걸 알수있다

Flex

그렇다면 flex 로 수평정렬을 해보자!

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

.container{
	display:flex;
}

이렇게 수평이 될 요소들의 부모에 display:flex; 를 적용시켜주면된다!
flex 만 작성했는데 수평정렬이 왜 되냐면 기본값이 row 이기 때문이다!
그렇다면 flex의 속성을 알아보자!

Flex 속성 (크게 2가지로 나뉜다)

container에 적용하는 속성
items에 적용하는 속성

1. display

Flex Container를 설정한다.
display:flex 로 적용하는게 flex의 시작이다!

display : flex 는 block요소와 같은 수직쌓임을 갖는다.
display : inline-flex 는 inline요소 같은 수평쌓임 갖는다.

2. flex-direction

items의 주 축을 설정한다. row가 기본값!

row : items를 수평축으로 표시한다(왼쪽에서 오른쪽으로)
row-reverse : items를 row의 반대로

column : items를 수직축으로 표시한다(위에서 아래)
column-reverse: items를 column의 반대로

3. flex-wrap

Flex Items의 줄바꿈을 설정한다.
한줄에 표시하는 nowrap 이 기본값이다.

nowrap : Items를 한 줄로 표시
wrap : Items를 여러 줄로 묶는다
wrap-reverse : Items를 wrap의 역 방향으로 여러 줄로 묶는다

.container {
    display: flex;
    flex-wrap: wrap;

    width: 300px;
    height: auto;
    border: 5px solid red;
}

.container .item {
    width: 120px;
    height: 100px;
    border: 3px solid blue;
}

4. justify-content

주 축의 정렬 방법을 설정한다.
왼쪽부터 시작하는 flex:start가 기본값이다.

flex-start : Items를 시작점으로 정렬
flex-end : Items를 끝점으로 정렬
center : Items를 가운데 정렬
space-between : 시작 Item은 시작점에,
마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around : Items를 균등한 여백을 포함하여 정렬

5. align-content

교차축의 정렬 방법이다.
stretch 가 기본값이다.

stretch : Container의 교차 축을 채우기 위해 Items를 늘림 - 교차축에 해당하는 너비가 auto일 경우에 교차축을 채우기 위해 자동으로 늘어난다.
flex-start : Items를 시작점으로 정렬
flex-end : Items를 끝점으로 정렬
center : Items를 가운데 정렬
space-between : 시작 Item은 시작점에,
마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around : Items를 균등한 여백을 포함하여 정렬