flexbox에 대한 사용법

흔히 id 또는 class에 적용하여 연속된 컬럼형태의 오브젝트를 가변형에 맞겍 유연하게 사용할 수 있다.

ex. 워드프레스의 컨테인 안에 속해 있는 컬럼을 가로폭에 맞춰서 가로 정렬하여 사용할수 있음.

컨테인의 id 또는 class 에 display 속성값에 flex을 선언하여 flexbox를 사용함으로 써 하위의 컬럼의 폭을 유연하게 변경할수 있다.

ex)
display:flexl;
display:-webkit-flex; (*크로스 브라우징)

  • justify-content:
    • flex-start;  – 기본값, 컨테이너의 시작 부분에서 배열 (좌측정렬)
    • flex-end; – 컨테이너의 끝에 배열 (우측정렬)
    • center; – 컨테이너의 가운데에 배열 (가운데 정렬)
    • space-between; – 컨테이너의 좌우를 기준으로 배열
    • space-around; – 컨테이너의 좌우를 동일한 공간으로 배열
  • align-item:
    • stretch; – 컨테이너에 높이 값
    • flex-start;  – 컨테이너 상단에 배열
    • flex-end; – 컨테이너 하단에 배열
    • center; – 컨테이너의 가운데에 배열 (세로)
    • baseline; – 항목이 컨터이너의 기준에 배치 (*텍스트 사이즈에 맞춰 배열)
  • flex-direction:

    • row; –  기본값, 왼쪽에서 오른쪽 설정
    • row-reverse; – 오른쪽에서 왼쪽 설정
    • cloumn –  세로방향, 위에서 아래로 설정
    • cloumn-reverse; – 세로방향, 아래에서 위로 설정.

정리중~~