CSS flexbox

css의 flexbox는 element의 요소의 화면 포지션을 쉽게 컨트롤할 수 있다.

기본구조

컨테이너와 아이템을 어떻게 정렬시키는지에 대한 박스

• Container와 item

  Flex box는 Container와 item에서 사용할 수 있다.

  container

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

  item

  • order
  • flex-grow
  • flex-shrink
  • flex
  • align-self

• Axis

  수평축 -> 중심축(main axis)이라하면 수직축이 반대축(cross axis) ex) 수평축이 row라고 가정 justify가 main axis고 align이 cross axis이다.

  container

  • flex-direction 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정

  • flex-wrap 줄이 꽉 찼을 시 한줄에 계속 표현할지, 다음줄로 넘길지
  • flex-flow flex-direction와 flex-wrap를 동시에 표현한다.
  • justify-content main axis(row)선 상에서 정렬
  • align-items cross axis(column)선 상에서 정렬

  • align-content 여러 줄 사이의 간격을 지정

    align-content는 여러 줄들 사이의 간격을 지정
    align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정
    한 줄만 있는 경우, align-content는 효과를 보이지 않는다.

  item

  개별 content에 대해서만 적용한다.

  • order 우선순위를 바꾼다.
  • align-self 지정한 요소에만 align-items를 적용시킨다.
  • flex-grow 공간이 남을때 지정한 item이 남은 공간을 확장시킬지, 공백으로 남길지를 정함
  • flex-shirink grow의 반대.

cf)실습사이트 : Flexbox 게임

CSS

👉 CSS Centering 2021.04.09

👉 CSS flexbox 2021.04.08

👉 CSS 변수 2021.04.07

👉 CSS Size 2021.04.06

👉 CSS layout 2021.04.05

👉 CSS 기본 2021.04.04

flexbox

👉 CSS flexbox 2021.04.08

Frontend

👉 pinia기본 2023.05.05

👉 github pages에서 vue router 404 에러 2023.04.03

👉 object의 변수인 경우 ref와 reactive 어느 것을 사용할까 2023.04.02

👉 Route 2023.04.01

👉 Template ref 2023.03.26

👉 provide와 inject 2023.03.25

👉 slots 2023.03.24

👉 nonProps 2023.03.23

👉 v-model을 통한 3depth 양방향 바인딩 2023.03.22

👉 emit, component와 v-model을 통한 양방향 바인딩 2023.03.21

👉 props 2023.03.20

👉 watch 2023.03.19

👉 양방향 바인딩 2023.03.18

👉 event Parameter 2023.03.17

👉 Scope와 Closure 2023.03.17

👉 classStyleBinding 2023.03.16

👉 computed 2023.03.15

👉 Ref와 Reactive 2023.03.14

👉 notion page를 웹사이트에 삽입하기 2022.01.25

👉 간단한 반응형 메뉴갖는 웹 만들기 2021.08.04

👉 Json 2021.04.16

👉 Javascript 배열 2021.04.15

👉 Javascript 객체 2021.04.14

👉 Javascript 클래스 2021.04.13

👉 Javascript 함수 2021.04.12

👉 Javascript 변수심화 2021.04.11

👉 Javascript 변수 2021.04.10

👉 CSS Centering 2021.04.09

👉 CSS flexbox 2021.04.08

👉 CSS 변수 2021.04.07

👉 CSS Size 2021.04.06

👉 CSS layout 2021.04.05

👉 CSS 기본 2021.04.04

👉 HTML5 Data 속성 2021.04.03

👉 HTML의 다양한 태그 2021.04.02

👉 Visual studio code의 유용한 툴 2021.04.01

👉 HTML 기초 2021.04.01