[CSS] flex

 

엘리먼트들을 정렬하는 방식은 float, flex, grid 등이 있다.

내가 배웠던 방식은 float으로 맞추던 방식(only one,,)이었는데 벌써 '옛것'이 되어버렸다고 한다.

 

실제로 flex를 사용해보니 float을 사용하는 것보다 코드의 양도 적고 한번에 해결할 수 있다는 느낌이다.

훨씬 간단한 flex를 알아보자...

 

 

---

 

 

◽ Flex의 속성들

각 박스들은 <div class="box">이고 박스를 둘러싼 엘리먼트는 <div class="box-wrap">으로 구성했다.

박스를 둘러싼 엘리먼트인 box-wrap에 display: flex;를 주면 아래와 같이 개발자도구에서 바로 flex와 관련된 속성들을 확인할 수 있기때문에 더욱 쉽게 적용할 수 있다.

 

 

이렇게 개발자도구에서 미리 볼 수 있다!

 

 

1) justify-content

- center

 

- flex-start

 

- flex-end

 

- space-between

 

 

2) align-items

- center

 

- flex-start

 

- flex-end

 

3) 조합

align-items: center;
justify-content: space-between;

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.