[CSS] flex 마스터

◾ flex

1. padding, margin

→ padding 을 기준으로 margin 을 나타낸다.

---

2. display

→  inline : width,height 프로터티 지원 x , 텍스트와 같다. 사용 시 없어짐

→  block : width,height 프로터티 지원 o 사용이 가능하다.

→  inline-block : inline 에 width, height 프로터티 지원이 가능하게함

→  flex

---

3. flex 

→ 반드시 직속 부모에게 적용할 것

→ 사용법 : display: flex

→ div, body, section 등 어떤 태그든 flex container 로 바꿔줌

→ 안에서 요소들이 움직이는 방향을 바꾸는 프로퍼티를 기본적으로 가지고 있음 (flex-direction)

 

flex 레이아웃 시스템에는 main axis(주축), cross axis(교차축)

flex direction > row > 주축은 오른쪽을 가리킴 > 교차 축은 수직선을 가리킴

---

✔ flex-direction

→ 기본값으로 row(가로) 로 설정되어 있음

→ flexbox 에게 요소들이 어떤 방향으로 갈 지를 지시하는 역할을 함 // 방향 : 행(수평), 열(수직)

→ row(가로) , column(세로)

→ row-reverse, columm-reverse

---

✔ flex-wrap (반응형 모바일)

→ 기본적으로 nowrap(줄 바꿈 없음) 으로 설정됨

→ 부모에게 적용하기!

→ flex-wrap: wrap

→ flex-wrap: wrap-reverse

---

✔ flex-flow (반응형 모바일)

→ flex-flow: flex-direction + flex-wrap 같이 사용 가능

→ flex-flow: column wrap;

---

✔ gap

→ flex container 컨테이너들 서로 간격을 주도록 하는 거 (부모에게 적용해야함)

→ gap: 10px;

→ row-gap: , column-gap:  열과 행 각각 부여할 수 있음

---

4. justify-content (가로축)

→ main axis 에서 아이템을 정렬해줌 // 주축에서 아이템을 이동

→ space-between : 박스들 사이에 일정한 공간이 생김

→ space-around :  박스들 주위에 공간을 만들어줌

→ center : 중앙으로

→ flex-start, flex end : 왼쪽 끝 , 오른쪽 끝

 

---

5. align-items (세로축)

→ 교차축을 따라 flex item 을 정렬해줌

→ align-items: center        // height 기준으로 센터 배치

→ align-items: flex-start    // height 기준으로 맨 위쪽 배치

→ align-items: flex-end     // height 기준으로 맨 아래 배치

→ align-items: stretch        // 자식 height 가 없을 경우 세로 선 길이를 가장 크게 만듬

→ 항목들 전체를 위, 아래, 중앙으로 움직임

---

6. align-content (반응형 모바일)

→ 다중라인 flex 컨테이너에서 라인들의 정렬을 설정

→ align-content: space-evenly   // 균일한 간격

→ 여러 개의 라인이 있을 때만 작동

 

 

---

◾ 자식들에 적용하는 속성 (반응형 사이트를 만들 때 유용)

1. order

→ 컨테이너 내부의 모든 자식들은 기본적으로 order 가 0이다.   // 0 , 1, 2, 3, 4, 5

→ order: 1~#;      // 맨뒤로 감  (기준이 0이므로)

→ order: -1~-#;    // 맨앞으로 감 (기준이 0이므로)

 

2. align-self

→ 항목이 교차축에서 개별적으로 정렬을 선택할 수 있게 해줌

→ align-self: flex-start 

→ align-self: flex-end

 

3. flex-grow

→ 컨테이너 자식들에게 얼마만큼의 공간을 차지할 수 있는지 말해줌

→ 너비를 설정할 필요없이 얼마나 큰 공간을 차지해야 하는지 알려주는 속성

→ flex-grow: 1;

→ flex-grow: 2;

→ 기본값은  flex-grow: 0;    // 텍스트가 필요로 하는만큼만 공간을 차지함

 

4. flex-shrink

→ 기본값은 flex-shrink: 1;

→ 형제들에게 상대적이며 0을 제외한 다른 비율은 결코 축소되지 않음

→ 숫자가 높을수록 축소되는 속도가 빨라짐

→ flex-shrink: 0;  // 지정한 너비에 도달했을 때 더이상 줄어들지 않음

 

5. flex-basis

→ flex 항목의 이상적인 크기인 초기 크기를 설정할 수 있음

→ grow: 1 , shrink: 0 basis 500px  // min-width 같은 효과를 낼 수 있음

→ 주 축을 가짐

  

◾ flex: grow, shrink, basis  로 사용가능

→ flex: 1 0 500px

 

https://flexboxfroggy.com/#ko