2021-06-11 ( CSS - FLEX )

오늘 진행한 일정

---

- 14:00 ~ 20:00 [ PHP 로직 수정 ]

 

 

 

FLEX (display: flex)

---

- justify-content:
  - flex-start / flex-end / center (수평 중앙)
  - space-around 요소들 주위에 동일한 간격
  - space-between 요소들 사이에 동일한 간격

- align-items:
  - flex-start (꼭대기) / flex-end (바닥) / center (수직 중앙)
    - align-self : align-items가 사용하는 값을 통해 특정 요소만 위치를 조정할 수 있다.

- flex-direction
  - row / row-reverse (수평 좌/우로부터 정렬(요소 순서 바뀜))
  - column / column-reverse (수직 상/하로부터 정렬(요소 순서 바뀜))

 

- order((-)n)
  - 특정 요소의 순서를 뒤로 밀거나(양수) 앞으로 당김(음수)

 

- flex-wrap
  - nowrap: 한 줄 정렬
  - wrap: 여러 줄 정렬
  - wrap-reverse: 아래부터 여러 줄 정렬

 

- flex-flow : flex-direction과 flex-wrap을 동시에 입력해서 사용 가능

 

- flex-grow : 남은 여백을 grow를 준 값이 해당 숫자의 비율만큼으로 나눠갖는다.

 

 

내일 할 일

---

- PHP 로직 마무리

- HTML/CSS 디자인 위주로 주말 안에 끝내둘 것.
  - 이후 시간 날 때 로직 변경하면 되므로, 반드시 준수.