css flex layout setting

css flex layout setting

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; – 세로방향, 아래에서 위로 설정.

정리중~~