CSS-flex

미루고 미뤘던 flexbox속성 공부를 드디어 했다.🤪

사실 어제 웹퍼블리싱 강의를 저녁에 듣는데 이게 뭔가..? 하고 있었다.

나름 html,css를 쥐어짜내서 원하는 모양대로는 만들 수 있을꺼라 생각했는데 전혀..?ㅋㅋㅋㅋ

네이버 검색바 만들기, 네비게이션바 만들기하고 있는데 일단 class,id부터 헷갈려... 살려주..ㅓ

그러다가 이렇게 효율없이 보고만 있지말고 🤔뭐라도 얻어가자는 마음에 가장 많이 보이는 속성들을 둘러보니까

진짜 기본으로 있는게 이 flexbox속성이였다 (+물론 justify,align도 항상 붙어서)

그래서 직감적으로 알았다지.. 아 flexbox 공부할때가 됬구나.. 애매하게 알고 있던거 이번에 정리를 쫌 하자는 마음에 

시작을 했다..! (서론이 기네..;;)

---

일단 기본적인 틀을 가지고  기록을 하는 게 나중에 다시 봐도 잘 이해가 되겠지.

-container안이 flex의 영향을 받는 공간이다.

---

1.container

①display:flex; 라고 입력 시 가장 기본적으로 기본 그림과 같이 가로로 inline-block처럼 내용들이 나열이 된다.

height는 컨테이너의 높이만큼 알아서 정렬이 됨

(※display:block이라고 설정 시 => ▷

                                                      ▷

                                                      ▷

 //이런 순서로 진행된다.

②flex-direction

:메인 축 방향을 결정하는 속성

   1)row : 가로방향 👉👉👉👉

   2)column : 세로방향  👇

                                     👇

                                     👇

                                     👇

   *약간 블로그들을 읽어보다가 반응형으로 모바일에선 column => PC에서 row로 해주면 좋겠다라는 글을 봤다.

 

③flex-wrap

: 컨테이너 안에 item들이 넘칠경우 줄넘김 처리

    =>nowrap(줄넘김X), wrap, wrap-reverse : 검색해보기

④flex-flow

 : direction + wrap을 합쳐서 쓸 수있는 간단 입력식

  =>ex) flex-flow: row,wrap

 

⑤정렬방향

• justify : 메인축 방향으로 정렬

• align : 수직축 방향으로 정렬

  => justify-content:flex-start····  #검색해보기

  => align-content:flex-start····

그래서 이 두가지를 center로 맞춰주면 container안에서 중간을 유지할 수 있게 된다.

---

2.Item

①flex-basis : container안 item들의 기본크기를 설정한다(direction-row: width ,, direction-column:row 의 길이를 설정)

 

=>item{flex-basis:100px}을 해준다면 👇👇이렇게 400에 딱맞게 사이즈가 조절되는 것을 알 수 있다.

 

 

 

 

②flex-grow

   :basis로정해진 크기에 지정한 배열로 여백을 늘려준다.

   아까전 50px로 지정되어 오른쪽에 여백이 남는 것을 볼 수 있었는데 grow 속성을 써서 item들 각각

   원하는width로 설정을 할 수 있다.

.item:nth-child(1){flex-grow: 1;}
.item:nth-child(2){flex-grow: 1;}
.item:nth-child(3){flex-grow: 0;}
.item:nth-child(4){flex-grow: 2;}

200px남은 거에서 이 속성들의 합을 구하면 4이므로 1=50px이 된다.

그럼 1,2번 item은 100px이 되는것이고 3번 아이템은 그냥 50px, 4번 아이템은 200이 된다.

 (실제로는 패딩값을 다 생각하고 계산을 해야하지만 지금은 간단히 아이템 width만 생각했다.)

 

③flex-shrink

 :flex-grow와 반대이며 기본값으로 1을 가져서 basis보다 크기가 작아진다.

 그래서 width를 고정하고 싶다면 0을 입력해주어야하며 이 속성을 쓸때는 nowrap이 필수다.

 

만약 120px로 basis를 짰더니 80px이 넘어버리는 상황이 생겼다. 그럴 때 사용한다.

.item:nth-child(1){flex-shrink: 1;}
.item:nth-child(2){flex-shrink: 1;}
.item:nth-child(3){flex-shrink: 0;}
.item:nth-child(4){flex-shrink: 2;}

이렇게 적혀있다치자,

그러면 총 속성값이 4가 되고 넘은 px값이 80이므로 나누면 20px이 된다.

즉 1=20px씩 줄이면 된다.

1,2번은 100px이 되고

3번은 고정( 이때 width값을 딱 정해주면 고정값으로 하기 좋다)

4번은 80px이 되는 것이다.

 

이 위에 내용은 row에서의 내용이고, 아까 적었던 것 처럼 columnd은 height값을 조절한다고 생각하면된다.

이제 어느정도 정리를 했으니 필요할땐 이 내용을 바탕으로 구글링하면 더 빨리 이해하고 속성을 가져올 수 있겠다😎😎