CSS: Flex 공부 정리

mango·2023년 3월 18일
CSSFlex멋쟁이사자처럼프론트엔드 스쿨
0

🆕HTML/CSS

목록 보기
1/1

출처: FLEXGRID 웹사이트
flex/grid의 시각적 예제와 자세한 설명이 담긴 웹 사이트입니다. 강 추 추

알겠다가도 모르겠는 flex에 대해 공부를 시작하도록 하겠습니다.

🪄 Flex

다양한 화면의 크기에 맞추어 유연하게 반응할 수 있는 레이아웃을 만들기 위해 사용되는 속성입니다.

flex는 1차원적 레이아웃을 잡을 때,
grid는 2차원적 레이아웃을 잡을 때 용이합니다.

flex는 container(부모 요소) 아래에서 item(자식 요소) 들이 한 방향으로 배치가 됩니다.

flex는 부모와 자식 태그가 필요하고, flex-container(부모)와 flex-item(자식)에 적용하는 속성이 구분되어 있습니다.

이때 속성의 영향이 container의 직계자식까지만 영향을 줍니다.

flex-container에는 정렬 방식과 item의 배치 흐름을 정의합니다.
flex-item에는 크기, 속성, 순서를 정의합니다.

flex-container의 속성

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

flex-item의 속성

  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self
  • order
  • z-index

어떤 속성을 적용해야 하는지 헷갈린다면, 컨테이너에 flex 속성을 적용하고 크롬 개발자 도구의 스타일 탭을 확인합니다.

주요 속성 다섯 가지를 GUI 기능으로 제공해서 미리 보기가 가능합니다.

➕ axis 와 cross-axis

Main Axis

flex의 주축이 되는 main axis 중심축의 방향은 flex-direction이라는 속성에 의해 결정됩니다.

Cross Axis

교차축은 주축의 수직 방향입니다.
주축이 flex-direction에 의해 결정되었다면,
교차축은 main axis 방향에 따라 결정이 됩니다.

➰ flex-direction

flex-direction 은 flex container 내의 item들의 정렬 방향을 결정하는 속성입니다.

flex-direction 은 item의 부모요소인 container 에 적용하여 사용합니다.

  • flex-direction:row : 기본 값입니다. 행 방향, 가로로 정렬됩니다. -------
  • flex-direction:column : 열 방향으로 세로로 배치됩니다. ||||||
  • flex-direction:row-reverse : 역순 row 배치
  • flex-direction:column-reverse : 역순 column 배치

이건 제 공부용이기 때문에 제 발그림과 함께합니다.
인터넷에 있는 그런 깔끔한 그림은 없서욧

reverse 속성을 사용하면 DOM 구조와 시각적 표현에 차이가 발생하여 스크린 리더로 접근하는 사용자에게 잘못된 정보를 전달 할 가능성이 있으니 주의를 요합니다.

➰ justify-content

justify-content는 주축으로 어떻게 정렬할지 정하는 코드입니다.

flex-start, center, flex-end 이름 그대로
시작점, 중심, 끝점에 배치됩니다.

space-between, space-around, space-evenly
사이에, 둘레에, 균등하게 라는 뜻입니다.

➰ align-items

justify-content의 수직 방향 정렬을 의미합니다.
container 안에서 교차 축에 따라 item이 정렬되는 속성입니다.
justify-content가 row면 column 방향으로 정렬되고,
justify-content가 column 이면 row 방향으로 정렬됩니다.
한줄 기준 정렬입니다.

justify-content: center;
align-item: center 
를 해주면 아이템을 정가운데에 놓을 수 있습니다.

출처: 생활코딩님의 FLex 설명

주축 flex-direction:row
교차축 column 일 때

주축 flex-direction:column
교차축 row 일 때

➰ align-content

align-items가 한 줄 기준 정렬이었다면
align-content는 flex-wrap:wrap 이 설정된 경우, 두 줄부터 기준으로 정렬합니다.
flex-wrap이 무엇인지는 바로 밑장에서 다룹니다.

주축 flex-direction:row
교차축 column 일 때

➰ flex-wrap

flex-wrap 속성을 사용하게 되면, container의 크기만큼 items 의 크기를 조절할 수 있고, items들이 container의 영역을 벗어날 경우 밑으로 내려서 정렬도 할 수 있게 해줍니다.

flex-wrap 속성은 flex 레이아웃 모듈의 하위 속성입니다.
정렬된 요소들의 총 너비가 부모 너비보다 클 때, 요소들을 강제적으로 한 줄로 할 것인지 여러줄로 할 것인지 정해줍니다.

두 줄 이상인 경우에는 새로운 라인이 쌓일 방향을 결정하기 위해 교차 축도 정의됩니다.

가로축은 메인축에 수직인 축입니다.
부모 요소에 display:flex 를 !!꼭!! 작성해야합니다

  • flex-wrap: nowrap 기본값

자식 item의 크기가 부모 container의 크기에 맞춰 일정 비율만큼 줄어듭니다.

아래 그림처럼 부모 container를 넘어가는 경우에는
flex-shrink 속성 때문입니다.
flex-shrink의 초깃값이 1로 설정되어 있어 일정 비율만큼 줄어들게 되는데 이 속성을 0으로 할 때 아래 그림처럼 됩니다.

따라서 flex-wrap:nowrap 은
자식 item의 전체 크기< 부모 container,
item 자기 크기를 유지.
자식 item의 전체 크기 > 부모 container,
일정 비율로 줄게 됩니다.

  • flex-wrap: wrap

각 자식 item의 총 넓이 > 부모 container 넓이일 때,
부모 container 안에 자식 item이 들어갈 수 있도록 다음 줄에 이어서 정렬해주는 속성

wrap 같은 경우에는 자식 item의 넓이를 유지한 채로 다음 줄로 이어서 정렬됩니다.
nowrap 은 item의 넓이가 container보다 크면 자동 축소됩니다.

wrap을 사용하는 경우, 자식 item과 부모 container의 크기에 따라 다음 줄로 정렬이 이어지게 되는데요, 이는 flex-direction의 방향을 따르게 됩니다.

flex-direction: row 일때, row에 맞춰 item들이 정렬되고, 교차축인 column으로 아이템이 쌓입니다.

정렬은 ------------> 이렇게 되고
| 이렇게
| 쌓입니다.

flex-direction: column 이면

|정--------------> 여기로
|렬--------------> 쌓여요

이런 자동 맞춤같은 wrap의 성질에 따라서 미디어 쿼리를 구현하는 경우, 크기 변경 없이 위치 조정만 가능도록 많이 사용하게 됩니다.

  • flex-wrap: wrap-reverse

자식 item이 정렬되는 기준점이 반대 방향으로 바뀌어서 배치됩니다.

➰ flex-basis

자식 item에 사용하는 속성입니다.
부모 container의 주축이 되는 방향으로
flex 아이템의 초기 크기를 정해줄 수 있습니다.
container의 flex-direction: row 일 때는 넓이를,
flex-direction: column 일 때는 높이를 지정합니다.

flex-basis 의 값

단위가 들어갑니다.
em, rem, px, %, content, min-content, max-content, fit-content, fill, auto 등의 키워드가 있습니다.
상수는 0 외에는 사용 불가입니다.

flex-basis 속성은 유연한 크기를 가지고 있습니다.
width, height 같은 고정값을 지정해 줄 때와 다르게 축의 방향에 따라, 내부 콘텐츠에 따라 크기가 유연하게 변합니다.

height: 40px 과 flex-basis: 40px 을 주었을 때 차이입니다.
height 40px은 내부 크기는 고려하지 않고 40px에 맞추었고
flex-basis는 콘텐츠의 크기에 맞추었습니다.

flex-basis와 width/height의 관계

기본 값 auto는 해당 아이템의 width 또는 height 값을 사용하게 됩니다.
만약 width 값이 없다면 콘텐츠의 크기가 기본으로 잡힙니다.

flex-basis: 100px 일 때

적은 콘텐츠일 때에는 100px로 아이템들의 width가 결정됩니다.

하지만 콘텐츠가 많아지게 되면 basis보다 넓어집니다.

반면, width: 100px로 설정할 경우,
basis와 달리 컨텐츠의 크기가 많아지면 아이템 width는 100px로 고정되고 컨텐츠가 밖으로 나가버립니다.
이를 방지하기 위해 word-wrap: break-word 값을 줍니다.

기본적으로 flex-basis 속성은 width(height) 값보다 우선시 됩니다.
width:100px을 주고 basis:300px로 주게 되면
basis 값이 우선시 되어 기본 너비가 300px으로 잡힙니다.

서로 다른 값일 경우 기본적으로 flex-basis가 우선되지만, 똑같은 값을 flex-basis와 width(height)에 주고 동시에 적용되면 width의 적용이 우선시됩니다.

또 언어에 따라 word-break 등 다른 속성값에 따라 flex-basis는 예상과 다르게 동작할 수도 있습니다.

flex-basis:auto; / flex-basis:0;

flex-basis: auto 기본값입니다.
이때는 지정해준 width (height) 값을 사용하거나, 다른 박스가 늘어날 때 같이 늘어납니다.
또한, 추가 공간이 flex-grow 값에 따라 분배됩니다.

flex-basis: 0 이면
내용 주위의 추가 공간이 고려되지 않습니다.

flex-basis: content

flex-basis: content는 콘텐츠 크기에 맞게 자동으로 크기가 조절됩니다.
아직은 잘 지원이 안된다고 하네요.

fill, min-content, max-content, fit-content

flex-basis 보다는 flex 축약 속성 사용하기

W3C에 따르면 flex-basis 직접 사용보다는 flex 축약으로 사용할 것을 권장하고 있습니다.

flex = 
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

➰ flex-grow

flex-grow 는 자식 item이 차지하는 비율을 조절하는 속성입니다.
flex-grow의 값은 item 들의 flex-basis를 제외한 여백 부분을 flex-grow 의 비율로 나눠 가집니다.

flex-grow 의 기본값은 0으로,
flex item을 확장하지 않고 원래의 크기를 유지합니다.

.item {
  flex-grow: 0; /* 기본값 */
}

flex-grow:1

flex item이 유연한 박스의 형태로 바뀌며 빈 공간을 채워줍니다.

➰ flex-shrink

flex-shrink는 item 요소를 자동으로 줄여서 적절한 크기로 배치해 유연한 레이아웃을 만들 수 있습니다.

flex-basis 속성으로 지정된 아이템의 기본 크기를 설정한 숫자 값에 비례해 수축시킬 수 있습니다.
flex-grow와는 반대되는 개념입니다.

기본값은 1입니다.
정의하지 않아도 자동으로 축소됩니다.
숫자가 클수록 상대적으로 더 작은 크기를 가집니다.
값을 0으로 선언하면 너비 혹은 높이를 고정해서 항상 유지시킬 수 있습니다.

.item {
  flex-shrink: 1; /* 기본값 */
}

flex-shrink 속성은 부모 컨테이너에 flex-wrap: wrap 속성을 부여한 경우 적용 안됩니다.

적용하려면 wrap 정의를 안하거나, nowrap 속성을 주셔야합니다.

➰ flex-item의 기타 속성들

order

item 들의 순서를 결정하는 속성입니다.
기본적으로는 작성 순서대로 나열되지만, order 속성을 사용해 아이템들의 순서 변경이 가능합니다.

기본값은 0이며, 음수와 양수 사용이 가능합니다.
값이 작을수록 우선순위가 적용되어
음수 -> 0 -> 양수 순서로 표시됩니다.

profile
mango
WebGL 개발

0개의 댓글