(HTML/CSS)Flex에 대해 알아보기

---

Flex는 최대한 예시를 많이 집어 넣으면서 변하는 과정을 볼게요

 

먼저 박스들을 만들어봅시다.

 

---

Flex 의 기본 작동

<div class="container">
            <li class="item">11111</li>
            <li class="item">22</li>
            <li class="item">3</li>
            <li class="item">4444</li>
</div>

Flex container 가 될 container 하나와 그안에 박스를 만들 item 4개를 만들어봤습니다. 

그리고 container에 Flex를 주면 

이렇게 되네요. 

 

이처럼 부모요소인 container 안에 가로로 쭉 배치가 되게 됩니다.

만약 부모요소의 너비값이 이거보다 작으면 어떻게 될까요?

보이는 것처럼 아무 이상이 없는것 처럼 보이지만 개발자 도구를 통해 확인하니 초록색 영역인 부모 너비를 뚫고 나온 모습을 확인할 수 있습니다. 가로로 배치되고, 너비가 충분치 못해도 똑같이 작동하는 것을 확인할 수 있죠. 

 

 

---

Flex 방향 설정(가로, 세로)

Flex는 무조건 가로로만 배치하는 것이 아니죠. 세로로 즉 열방향으로 column 을 이용해 배치할 수 있습니다. 

(부모요소인 container 에게 값을 줘야합니다!!)

• flex-direction: row;  (기본값)

flex-direction: row;

부모요소가 작은상태에서 row 값을 줬습니다. 기본값이 row라 달라진 건 없습니다.

 

• Flex-direction: column;

flex-direction: column;

column 을 주니 일반 display : block 과 같은 형상이 나타났네요. 이런식으로 세로 배치도 가능합니다.

 

그리고 row와 column의 reverse도 존재합니다. 

• Flex-direction: column-reverse;

Flex-direction: column-reverse;

• Flex-direction: row-reverse;

Flex-direction: row-reverse;

특별한 설명 없이도 이전 모습들과 거꾸로 배치가 된 모습을 확인할 수 있겠죠?

 

 

---

Flex 줄바꿈

부모요소의 너비가 처음에 든 예시처럼 부족할때 흘러넘치는 것 외에 컨트롤 하는 방법을 설명해 보겠습니다.

 

• flex-wrap: nowrap;   (기본값)

nowrap은 줄바꿈 하지 않겠다. 라는 뜻으로 여전히 같은 모습을 보이고 있습니다. 

 

• flex-wrap: wrap;

wrap 은 줄바꿈한다는 뜻으로 보이는 것 처럼 부모요소의 너비를 나눠갖고 충분히 못한 item 박스는 밑으로 줄바꿈 처리가 되었습니다. 

 

• flex-wrap: wrap-reverse;

wrap-reverse 는 일반 wrap 이 아닌 거꾸로 올라가서 줄바꿈 처리가 된 모습을 볼 수 있습니다. 

 

이처럼 wrap이나 wrap-reverse를 통해서 줄바꿈 처리를 어떻게 할 것인지 정할 수 있습니다.

 

 

---

Flex 정렬 

제가 블로그 글을 작성하게 된 이유입니다... 

너무 헷갈리더라구요. 우선 이것부터 외우고 가야합니다.

 

justify - x축 정렬

align - y축 정렬

즉 가로로 정렬, 세로로 정렬이라고 생각해야합니다. 

 

먼저 눈에 보이게 하기 위해 부모요소의 너비값을 크게 한번 줄게요.

다시 처음상태로 돌아와서. 부모의 너비값만 크게 줬습니다. 여기서 하나씩 해볼게요.

 

justify (x축 정렬)

• justify-content: flex-start; (기본값)

역시 기본값이라 같게 나옵니다.

 

• justify-content: flex-end;

end로 주니 오른쪽 끝. 즉 끝부분에 붙어서 정렬이 됩니다. 

계속해서 x축 기준으로만 정렬되는 것을 기억하셔야 합니다.

 

• justify-content: center;

center. 가운데 정렬입니다.

 

• justify-content: space-between;

여기서부터 살짝 헷갈릴 거에요. (제가 헷갈려요)

쉽게 이해하면 아이템들 사이에 동일한 간격으로 벌려서 배치되었다고 생각하면 됩니다. (제가그렇게 생각합니다)

 

• justify-content: space-around;

설명을 찾아보니 아이템들 둘레(around)에 동일한 간격으로 배치라고 되어있더라구요. 

아마 처음과 끝의 여백을 더하면 같은 값이 나오게 배치를 해서 그런 것 같습니다. 

 

• justify-content: space-evenly;

이것도 비슷한데 around 에서는 양끝 값을 더해야 같은 공간값이 나왔다면

이것은 처음과 끝에도 동일한 여백값이 들어갔습니다. 

(IE와 Edge에서는 적용이 안된데요... )

 

 

---

align (y축 정렬)

align은 x축 정렬이 아닌 y축으로 즉 높이로의 정렬이기 때문에 부모요소의 크기를 너비를 줄이고 높이를 늘려보겠습니다.

width: 400px;    height: 200px;

이제 하나씩 해보겠습니다!

 

• align-items: stretch;  (기본값)

기본 값이라 역시 같은 결과가 나옵니다.

 

• align-items: flex-start;

flex-direction: row;    align-items: flex-start;

조금 쉽게 설명하기 위해 첫번째 item 요소의 글자크기만 줄여봤습니다. 이처럼 flex-strat는 아이템을 시작점으로 정렬해 자신의 크기만큼 배치합니다. 

 

참고로 flex-direction 을 column 으로 바꾸면 어떨까요? (세로배치)

flex-direction: column;    align-items: flex-start;

역시 세로로 자신의 크기 영역만큼 배치가 되네요!

 

• align-items: flex-end;

justify의 flex-end가 기억나시나요?? 오른쪽 끝으로 붙었는데 지금은 아래에 붙어서 정렬했네요. 

마찬가지로 자신의 크기를 가진 상태로. 

 

이처럼 align 과 justify의 기본적인 배치 방향을 꼭 기억해야합니다. 

 

• align-items: center;

센터는 세로축을 기준으로 가운데에 배치가 되네요. 

 

• align-items: baseline;

 

baseline 은 텍스트 베이스라인 기준으로 정렬하는 기법이라고 하네요. 

 

 

---

축약형

처음에 배웠던 flex-direction 과 flex-wrap을 한번에 사용하는 flex-flow가 있습니다.

 

이것은 flex-flow를 이용해서 한번에 작성할 수 있는데요. 

 

먼저 direction을 적고 한칸 띄우고 wrap을 적으면 됩니다. 

 

.container{
    display: flex;
    width: 400px;
    background-color: antiquewhite;
    flex-flow: row nowrap;
}

이런식으로 flex-flow: row nowrap;

하면 direction은 row로 wrap 은 nowrap 으로 

나타나는 모습을 확인할 수 있습니다.

 

 

꼭!! justify 는 x축 align 은 y축 정렬인 거 잊지마세요