danc
danc*dev
danc
  • 분류 전체보기
    • codestates_BE_bootcamp39
      • 주단위 일기
      • 회고
    • programming
      • JAVA
      • SPRING
      • GENERAL
      • LINUX
      • ALGORITHM
      • ERROR_HANDLING
    • web
      • NETWORK
      • DB
      • HTML
      • CSS
    • kr
    • nz

최근 글

인기 글

태그

  • css
  • 코드스테이츠
  • 일기
  • React에서 Authorization헤더
  • AOP
  • 윈도우 11 우분투
  • 코드스테이츠 백엔드
  • TIL 일기
  • HTTP
  • TIL
  • TIL일기
  • 회고

최근 댓글

티스토리

hELLO · Designed By 정상우.
danc

danc*dev

flex 컨테이너 (Parent) 의 속성
web/CSS

flex 컨테이너 (Parent) 의 속성

2022. 4. 28. 17:40

Contents 정렬

본격적으로 html의 레이아웃을 조정할 수 있다

https://www.w3schools.com/css/css3_flexbox_container.asp#flex-direction

 

flex-direction

(Main Axis)

flex-direction:  column; column-reverse; row ;(기본값) row-reverse;
방향 1
2
3

3
2
1

1 2 3 4  4 3 2 1
justifty-content 세로   가로  
align-items 가로   세로  

 

 justifty-content (수평 정렬)                          align-items (수직 정렬)

flex-start flex-start
flex-end flex-end
center center
space-between stretch

 

저작자표시 (새창열림)

'web > CSS' 카테고리의 다른 글

flex 아이템 (Child) 의 속성  (0) 2022.04.28
Layout with Flex Container  (0) 2022.04.28
BOX MODEL  (0) 2022.04.27
FONT  (0) 2022.04.27
Id & Class Selectors  (0) 2022.04.27
    'web/CSS' 카테고리의 다른 글
    • flex 아이템 (Child) 의 속성
    • Layout with Flex Container
    • BOX MODEL
    • FONT
    danc
    danc
    Backend 개발자를 목표로 공부 중 입니다.

    티스토리툴바