2022-10-27 [새싹 프론트엔드] display: flex;

flex란?

- 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,
자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다.
“컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다.

- 부모요소에 width를 주면 작동하지않는다

- flex는 items 의 개별크기보다 flex자체의 기능을 더 중요하게 생각하기 때문에container의 width가 100%; items의 width가 100px 이라할때 가로 사이즈가 줄어들면 자동으로 100px보다 작아진다.items의 크기를 무시한다.

단, 부모에 너비값을 줬을땐 무시하지않는다

-items의 height를 설정하지 않았다면 container의 height를 따라간다.

flex의 종류

display: flex item은 하나의 item이자 display: flex가 될 수 있다.

container = 부모요소에 적용

display: flex, inline-flex | 보통 flex를 많이 씀
flex-directionn | main 축 방향 설정
flex-wrap (부모의 width에서 아이템이 넘쳐날떄 아이템요소 한줄정렬,자동 떨어짐 정렬)
flex-flow (단축속성) | flex-flow: direction wrap
*justify-content (main축) | 부모안에 아이템들과의 간격설정
align-items (cross축) | 한줄일때 교차축간의 라인정렬 설정 | 단체로 움직일떄
align-content (cross축) | 여러줄일때

item = 자식요소에 적용

flex-basis | 원래 items의 적용값 변경
flex-grow | 요소 늘어남
flex-shrink | 요소 줄어듬
*align-self (cross축) 자식들의 각각 기준 설정 | 개별로 움직일때
order : items의 순서 변경
flex (단축속성) | grow shrink basis 한번에 설정가능한

flex 메인축과 교차축 - items가 정렬되는 축이 main축이 된다.

※flex의 메인축과 교차축은 정렬되는 방향에 따라서 달라진다.

부모요소에 적용(컨테이너에 적용)

flex를 받은 부모의 자식중 첫번째 자식들에게만 종속된다.

container> item에만 적용되고 item-child에는 적용 안된다

<div class="container">
    <div class="item"></div>
    <div class="item">
      <div class="item-child"></div> ←적용안됨
      <div class="item-child"></div> ←적용안됨
    </div>
    <div class="item"></div>
  </div>

display: flex;

부모요소에 적용(컨테이너에 적용)

item의 width만큼 차지하여 정렬이 된다. (item의 width가 달라도 알아서 배치됨)

이때 height는 item의 높이값만큼 자동으로 늘어난다

    <style>
      .container {
        border: 3px solid #000;
        display: flex;
        width: 700px;
      }

      .item {
        width: 100px;
        border: 1px solid red;
        height: 100px;
      }
      
      .item:last-child { width: 200px;}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>

display: inline-flex

부모요소에 적용(컨테이너에 적용)

<flex>를 적용받은 요소가 inline-block처럼 주변요소의 흐름을 결정하는 값

flex-direction: flex의 방향 설정

부모요소에 적용(컨테이너에 적용)

메인축 방향 설정

-메인축의 방향을 가로로 할껀지 세로로 할건지 정함

속성값	비고
row기본값	주측은 열(x축) 이며 item의 방향은 정방향 왼 → 오
row-reverse	주측은 열(x축) 이며 item의 방향은 반대방향 오 → 왼
column	주측은 행(y축) 이며 item의 방향은 정방향 위 → 아래 width를 설정하지않았다면 100%
column-reverse	주측은 행(y축) 이며 item의 방향은 반대방향 아래 → 위 width를 설정하지않았다면 100%

flex-wrap : item 강제 한줄배치, 영역내에 배치

부모요소에 적용(컨테이너에 적용)

-컨테이너들의 여유공간이 없을때 줄바꿈을 할지 안할지 설정해줌

보통 화면이 작아질떄, 커질때 사용

속성값	비고
nowrap 기본값	기본값, 공간이 부족하더라도 요소를 무조건 한줄에 강제배치 영역이 아무리 줄어도 행의 수는 무조건 1이다
wrap	공간 크기에 따라 요소가 여러행에 걸쳐서 배치
wrap-reverse	weap과 동일하지만 요소가 위로 쌓이고 끝에 아이템부터 올라간다.

justify-content: main 축을 따라 배치될 item의 방향정렬

부모요소에 적용(컨테이너에 적용)

메인축 방향 설정

- 메인축의 방향을 따라 배치될 items의 위치를 지정한다.

- column-revers , row-reverse와 같이 방향을 반대로 할 경우 start 와 end의 순서,방향도 뒤바뀐다.

flex-direction 방향설정후 요소사이의 공간을 분배하는 방식 , item의 주축(가로)의 배치방식 설정

속성	비고
flex-start 기본값	좌측상단
flex-end	우측상단 ※ flex-direction: reverse일때 flex-end, flex-start의 방향도 반대로 된다 예시는 아래 코드 참고
center	중앙
space-between	양쪽끝 딱 붙여서 요소와 요소사이의 간격을 끝으로 두고 떨어뜨림
space-around	양쪽끝 margin이 똑같지 않음두고 떨어뜨림 여백이 동일하지않음
space-evenly	양쪽끝 margin이 똑같이 떨어뜨림 여백이 동일함

align-items: cross축 을따라 배치될 item 방향정렬

부모요소에 적용(컨테이너에 적용)

교차축 방향 설정

아이템이 한줄일때 적용됨

-flex의 방향이 column일 경우 justify-content, align-items의 방향이 뒤바뀐다(아마 긴쪽이 메인축)

flex-wrap이 기본값 nowrap일때 cross축 배치방법

부모(container)가 자식들을 세로,수직 방향으로 일괄적이게 배치할 수 있는 값

(각각 자식에게 다른 세로,수직 방향을 주고 싶다면 align-self를 주면 된다)

- 가로는 justify-content

기본특성: flex-container에 따라 items의 height(cross축의 길이) 가 늘어난다.

속성값	비고
stretch 기본값	item의 w,h를 지정하지 않으면 알아서 값이 설정된다 html이 보여주는 위치그대로 흐름에 따라 보여준다
baseline	가장 큰 글자의 바닥라인 기준
flex-start	cross축 → 끝점배치 \| 기본특성을 무시하고 높이값을 잃는다.
flex-end	끝점 → cross축 \| 기본특성을 무시하고 높이값을 잃는다.
center	cross축 의 중앙 \| 기본특성을 무시하고 높이값을 잃는다.

align-content : flex-wrap일때 cross축이 여러줄일때

안쪽 요소들간의 정렬 설정

부모요소에 적용(컨테이너에 적용)

교차축 방향 설정

아이템이 여러줄일때만 적용됨

조건1 : flex-wrap값이 wrap으로 지정되야한다

조건2 : item이 배치되기위한 필요한 공간보다 컨테이너가 더 커야한다.

* flex-wrap이 wrap일때 items의 margin,padding값이 없으면 딱 붙어보이기때문에 거리를 벌려주는것이 좋다.

속성	비고
stretch 기본값	흐름대로 수평정렬
center	cross축 의 중앙
flex-start	cross축 → 끝점배치
flex-end	끝점 → cross축
space-between	요소와 요소사이의 간격을 끝으로 두고 떨어뜨림
space-around	양쪽 margin을 두고 떨어뜨림 여백이 동일하지않음
inherit	align-content의 속성 값을 상위요소한테 상속받습니다.

align-self: (align-items를 무시하고 cross축 기준)

각각 다른방향으로 방향 정렬을 하고싶을때

자식요소에 적용(컨테이너에 적용)

교차축 방향 설정

단체(align-items)로 움직일지 개별(align-self )로 움직일지 선택

.item1 { align-self: flex start; }
.item2 { align-self: flex end; }
.item3 { align-self: center; }
.item4 { align-self: baseline;
.item5 { align-self: stretch;

속성값	비고
stretch 기본값
flex-start	cross축 끝점배치
flex-end	끝점 → cross축
center	cross축 의 중앙

gap : cross축 간의 거리를 띄어주고 싶을때 사용

교차축 방향 설정

부모요소에 적용(컨테이너에 적용)

px, em, %, 1em 0 전부 사용가능

flex-basis : item의 비율및 크기 설정

아이템의 원래 가지고 있던 width, height가 우선적용 (auto)

아이템에 flex-basis의 적용값이 적용된다. (auto가 아닐 경우)

CSS에서 요소의 너비는 width로 정의하여 사용했지만 flex의 경우 item의 너비는 flex-basis를 사용하여 지정
기본공간을 의미하며 남는공간이나 부족한 공간은 flex-grow, flex-shrink에 의해 분배된다.

자식요소에 적용(컨테이너에 적용)

속성값	비고
auto 기본값	grow, shrink를 썻다면 해당 속성에 맞게 자동으로 따라감
%, em,rem,px	width 속성에서 사용하는 모든 단위

flex-grow: container에 사이즈가 바뀔때 items가 늘어날 비율을 정함

flex-basis로 배치 후 남은 공간 중 얼마를 지정된 플렉스 항목에 비례하여 분배해야하는지 그 정도를 제어.

기본값: 0

자식요소에 적용(컨테이너에 적용)

요소가 늘어나도 비율을 유지한다.(작아질땐 shrlink)

      .item1 { background-color: #ef9a9a; flex-grow: 1; }
      .item2 { background-color: #e9ef9a; flex-grow: 2;}
      .item3 { background-color: #a99aef; flex-grow: 3;}

단위	비고
양수	음수x 보통 0, 1을 선언한다

flex-shrink: container에 사이즈가 바뀔때 items가 줄어들 비율을 정함

flex container가 item의 너비의 합보다 작아졌을 때 각 아이템의 지정된 너비는 무시되면서 flex container 너비를 기준으로 각 item이 줄어들게 된다.

기본값: 1

숫자가 커질수록 작아진다

body에 margin: 0 을 적용 시킬땐 작동하지않았다

자식요소에 적용(컨테이너에 적용)

단위	비고
양수	음수x 보통 0, 1을 선언한다

order : 1;

자식요소에 적용(컨테이너에 적용)

item의 나열을 '시각적으로만 바꾼다' html자체의 div순서는 바뀌지않고

단순히 시각적인 변경만 이뤄진다.

스크린리더로 화면을 읽을때 order를 이용해서 순서를 바꾼다면 html상에 입력된 순서로 읽히고

oorder를 이용한 순서변경은 의미없다.

단위	비고
양수	우측으로 이동
음수	좌측으로 이동
0	원래 자기자기로

flex-flow: ;

-flex-direction 과 flex-wrap을 한번에 쓸 수 있는 단축속성이다.

-flex-direction → flex-wrap 순서로 써주면 된다.

.container {
	flex-flow: row-reverse wrap;
    
    /* 
    flex-direction: row-reverse;
    flex-wrap: wrap;
    이라는 뜻이다.
    */
}

flex 속성

flex속성에 값이 하나인 경우 flex-grow가 적용된다.

flex속성이 값이 두개인 경우

1. 두번째 값이 단위를 가지고 있으면 basis

2. 두번째 값이 정수이면 shrink

새싹 DT 기업연계형 프론트엔드 실무 프로젝트 2주차 블로그 포스팅

'CSS' 카테고리의 다른 글

2022-10-28 [새싹 프론트엔드] grid 레이아웃 (0)	2022.10.28
2022-10-26 [새싹 프론트엔드] 반응형 웹 (0)	2022.10.26
2022-10-25 [새싹 프론트엔드] 목록태그 (0)	2022.10.25
2022-10-24 [새싹 프론트엔드] 테이블, CSS 레이아웃 강의정리 (0)	2022.10.24
2022-10-21 [새싹 프론트엔드] 강의정리 (0)	2022.10.21

공부중

2022-10-27 [새싹 프론트엔드] display: flex;

flex의 종류

flex 메인축과 교차축 - items가 정렬되는 축이 main축이 된다.

부모요소에 적용(컨테이너에 적용)

display: flex;

display: inline-flex

flex-direction: flex의 방향 설정

메인축 방향 설정

flex-wrap : item 강제 한줄배치, 영역내에 배치

justify-content: main 축을 따라 배치될 item의 방향정렬

메인축 방향 설정

align-items: cross축 을따라 배치될 item 방향정렬

교차축 방향 설정

flex-wrap이 기본값 nowrap일때 cross축 배치방법

align-content : flex-wrap일때 cross축이 여러줄일때

안쪽 요소들간의 정렬 설정

교차축 방향 설정

align-self: (align-items를 무시하고 cross축 기준)

각각 다른방향으로 방향 정렬을 하고싶을때

교차축 방향 설정

gap : cross축 간의 거리를 띄어주고 싶을때 사용

교차축 방향 설정

flex-basis : item의 비율및 크기 설정

flex-grow: container에 사이즈가 바뀔때 items가 늘어날 비율을 정함

flex-shrink: container에 사이즈가 바뀔때 items가 줄어들 비율을 정함

order : 1;

flex-flow: ;

flex 속성

'CSS' 카테고리의 다른 글

티스토리툴바

2022-10-27 [새싹 프론트엔드] display: flex;

flex의 종류

flex 메인축과 교차축 - items가 정렬되는 축이 main축이 된다.

부모요소에 적용(컨테이너에 적용)

display: flex;

display: inline-flex

flex-direction: flex의 방향 설정

메인축 방향 설정

flex-wrap : item 강제 한줄배치, 영역내에 배치

justify-content: main 축을 따라 배치될 item의 방향정렬

메인축 방향 설정

align-items: cross축 을따라 배치될 item 방향정렬

교차축 방향 설정

flex-wrap이 기본값 nowrap일때 cross축 배치방법

align-content : flex-wrap일때 cross축이 여러줄일때

안쪽 요소들간의 정렬 설정

교차축 방향 설정

align-self: (align-items를 무시하고 cross축 기준)

각각 다른방향으로 방향 정렬을 하고싶을때

교차축 방향 설정

gap : cross축 간의 거리를 띄어주고 싶을때 사용

교차축 방향 설정

flex-basis : item의 비율및 크기 설정

flex-grow: container에 사이즈가 바뀔때 items가 늘어날 비율을 정함

flex-shrink: container에 사이즈가 바뀔때 items가 줄어들 비율을 정함

order : 1;

flex-flow: ;

flex 속성

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바