flex 속성 및 태그 종류, flex 말줄임

chaewona·2023년 1월 28일
0

flex란?

Flex는 레이아웃 배치 전용 기능으로 고안
레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 편리

justify-content (가로축 이동)

  • *flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
  • *flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
  • *center: 요소들을 컨테이너의 가운데로 정렬
  • *space-between: 요소들 사이에 동일한 간격
  • space-around: 요소들 주위에 동일한 간격

align-items (세로축 이동 뭉탱이로 전부 이동)

  • *flex-start: 요소들을 컨테이너의 꼭대기로 정렬
  • *flex-end: 요소들을 컨테이너의 바닥으로 정렬
  • *center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
  • baseline: 요소들을 컨테이너의 시작 위치에 정렬
  • stretch: 요소들을 컨테이너에 맞도록 늘림

align-content (세로축 이동, 열끼리 이동)**

  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
  • center: 여러 줄들을 세로선 상의 가운데에 정렬
  • space-between: 여러 줄들 사이에 동일한 간격
  • space-around: 여러 줄들 주위에 동일한 간격
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘림

align-self 개개인 상하축! 이동!

flex-direction (row,column방향설정!)

  • *row: 요소들을 텍스트의 방향과 동일하게 정렬 가로
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬 가로역방향
  • *column: 요소들을 위에서 아래로 정렬 세로
  • column-reverse: 요소들을 아래에서 위로 정렬 세로역방향

flex-wrap !!!

flex는 자식들이 width가 넘더라고 줄여서 무조건 한줄에 나오려는 속성이 있음

  • nowrap: 모든 요소들을 한 줄에 정렬 (기본값)
  • *wrap: 부모 요소에 넘치는 자식 요소들을 여러 줄에 걸쳐 정렬 (떨군다!!)
  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

만약, 4개의 항목이 있는데 2개씩 정렬하고 싶을때
부모에 flex-wrap: wrap;을 주고
항목에 flex: 0 1 calc(50% - 5px);
->grow 하지 않고(0), shrink 하고(1) width 50% 사이 간격 10px 가정하에

order 태그의 순서를 바꿔줄수가있다.!

order

자식 요소에 오더값을 주면 순서를 독단적으로 결정할 수 있다

order: -1 전(앞)으로 한칸

order: 0 제자리

order: 1 후(뒤)로 한칸

order를 명령 하지 않은 요소는 다 0으로 셋팅 되어 한 뭉텅이로 간주되어 이동된다.

자식 요소에 주는 수치

  • flex-grow: ; → 자라나다~ / 증가될때의 비율

    (요소에 width 값을 설정했을때 그 기준으로 화면이 증가 되면 커짐)

    flex-grow:1을 주면 다른 요소를 뺀 나머지 영역을 다 채움

  • flex-shrink: ; → 줄어들다 / 줄어들때의 비율 — 기본값으로 1이 들어가있다

    (요소에 width 값을 설정했을때 그 기준으로 화면이 감소 되면 작아짐)

  • flex-basis: ; → 중심축기준값 (위드, 높이가 될 수도 있다)

    따로 flex-basis를 설정 안하면 width/height값으로 수축/감소하지만,

    flex-basis를 쓸 경우는 width나 height 값을 설정하지 않고도 basis값이 기준이 되어서 수축/감소 한다 (flex-basis를 주고 width나 height 값을 줘도 basis값으로 적용된다)

    -기본을 가로가 기준으로 flex-bais값을 주면 width 값으로 적용 되지만

    flex-diretion: cloumn; 을 부모에게 주고

    자식에게 flex-basis값을 주면 기준값이 세로로 변경 되었기 때문에 height 가 늘어난다.

  • flex : grow값 shrink값 basis값 다 합쳐서 쓰는 것

    flex: 1 = flex: 1 1 100%

    display: flex를 부모에게 주면 자식 요소가 inline-block화 됨

    자식에 따로 선언 x


    alin-items: strech

    가 기본으로 적용 되는 속성이여서 높이값을 지정하지 않아도 다른 요소의 높이값을 동일하게 가져감

    flex: ; 값은 두줄이상일 때 적용이 안됨. 따로 width를 선언해야함

flex에서 말줄임 하기

flex:1; 선언한 요소한테 min-width: 0; 을 쓰면

말줄임하고 싶은 요소한테 white-space: nowrap; 을 써도 가로스크롤이 생기지 않는다.

절대 요소에 width 값을 직접적으로 px로 박아버리지 말자

두줄이상되는 요소는, display: -webkit-box; 로 변경해주기

나머지는 float에서 정리한 내용과 같음

말줄임기법 정리

profile
화이팅

0개의 댓글