공부기록, 2021-05-26

2021-05-26, 032일차

일반

flex 완벽 이해하기!!!

1. 플렉스 개구리
2. 플렉스 디펜스
3. 플렉스 실험실

• 1.display:flex (플렉스의 시작)
• 2.flex-direction (배치방향 설정)
  • row(기본값):아이템들이 행(가로) 방향으로 배치됩니다.
  • row-reverse:아이템들이 역순으로 가로 배치됩니다.
  • column:아이템들이 열(세로) 방향으로 배치됩니다.
  • column-reverse:아이템들이 역순으로 세로 배치 됩니다.
• 3.flex-wrap (줄넘김처리 설정)
  • nowrap(기본값):줄바꿈을 하지 않습니다. 넘치면 그냥 삐져 나가요.
  • wrap:줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작해요.
  • wrap-reverse:줄바꿈을 하는데, 아이템을 역순으로 배치해요. 그림을 보면 이해하실 수 있을 거예요.
• 4.flex-flow (flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성.)
  (flex-direction, flex-wrap의 순으로 한 칸 떼고 쓰면됨.)
• 5.justify-content (메인축 방향 정렬)
  • flex-start(기본값):아이템들을 시작점으로 정렬합니다.
  • flex-end:아이템들을 끝점으로 정렬합니다.
  • center:아이템들을 가운데로 정렬합니다.
  • space-between:아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다.
  • space-around:아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다.
  • space-evenly:아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.
• 6.align-items (수직축 방향 정렬)
  • stretch(기본값):아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다.
  • flex-start:아이템들을 시작점으로 정렬합니다.
  • flex-end:아이템들을 끝으로 정렬합니다.
  • center:아이템들을 가운데로 정렬합니다.
  • baseline:아이템들을 텍스트 베이스라인 기준으로 정렬합니다.
• 7.align-content (여러 행 정렬)
  • stretch(기본값):아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다.
  • flex-start(기본값):아이템들을 시작점으로 정렬합니다.
  • flex-end:아이템들을 끝점으로 정렬합니다.
  • center:아이템들을 가운데로 정렬합니다.
  • space-between:아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다.
  • space-around:아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다.
  • space-evenly:아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.
• 8.flex-basis(유연한 박스의 기본 영역)
  • flex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이).
    (.item {
    flex-basis: auto; /* 기본값 /
    / flex-basis: 0; /
    / flex-basis: 50%; /
    / flex-basis: 300px; /
    / flex-basis: 10rem; /
    / flex-basis: content; */
    })
  • width를 사용하면 전체크기가 조절된다.
• 9.flex-grow(유연하게 늘리기)
  • flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성.
• 10.flex-shrink(유연하게 줄이기)
  • flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정합니다.
  • 기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있었습니다.
  • flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있어요. 고정 크기는 width로 설정합니다.
• 11.flex(축약형)
  • flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.
  • {.item {
    flex: 1;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; /
    flex: 1 1 auto;
    / flex-grow: 1; flex-shrink: 1; flex-basis: auto; /
    flex: 1 500px;
    / flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
    }}
• 12.align-self (수직축으로 아이템 정렬)
  • align-items의 아이템 버전. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬.
    {
    align-self: stretch;
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    }
• 13.order (배치 순서)
  • 각 아이템들의 시각적 나열 순서를 결정하는 속성.
    숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됩니다. “시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의하셔야 합니다. 시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다는 것을 기억해 주세요.

화면높이대비 크기 vh