CSS 6. Flex

min seung moon·2021년 10월 26일
0

HTML5,CSS3,JavaScript

목록 보기
9/10

01. Flex

https://heropy.blog/2018/11/24/css-flexible-box/

  1. flex(Flexible Box)
    : 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공
    • Flex는 2개의 개념으로 나뉜다
    • 첫 번째는 Container 두 번째는 Items 입니다
    • 위에서 살펴본 바와 같이 Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수
    • 주의, Container와 Items에 적용하는 속성이 구분되어 있다는 것
    • 주의, Container에는 display, flex-flow, jusify-content, align-content, align-items 등이 속성을 사용
    • 주의, Items에는 order, flex, align-self 등의 속성을 사용

주 축(main-axis)과 교차 축(cross-axis)

: row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 된다
  반대로 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 됩니다
  즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다

시작점(flex-start)과 끝점(flex-end)

: 주 축이나 교차 축의 시작하는 지점과 끝나느 지점을 지칭
  역시 방향에 따라 시작점과 끝점이 달라진다
  교차축의 시작점과 끝점은 주 축이 row이면 위가 시작점이고 아래가 끝점
  주 축이 column이면 왼쪽이 시작점 오른쪽이 끝점 이다
  1. Flex Container
    : Flex Conatiner를 위한 속성
    주 축(main-axis)과 교차 축(cross-axis)의 개념

    02-01. display
    : Flex Container를 정의
    - flex : Block 특성의 Flex Container를 정의
    - inline-flex : Inline 특성의 Flex Container를 정의
    * flex는 Container가 수직으로 쌓이지만 inline-flex는 Container가 수평으로 쌓임
    flex 안의 Itmes는 동일

    02-02. flex-flow
    : 단축 속성, Flex Itmes의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정
    - flex-direction : Items의 주 축(main-axis)을 설정 : row
    row : Items를 수평축(왼쪽에서 오른쪽으로)으로 표시
    row-reverse : Items를 row의 반대 축으로 표시
    column : Items를 수직축(위에서 아래로)으로 표시
    column-reverse : Items를 column의 반대 축으로 표시
    - flex-direction : 주축;
    - flex-wrap : Items의 여러 줄 묶음(줄 바꿈) 설정 : nowrap
    nowrap : 모든 Items를 여러 줄로 묶지 않음(한 줄에 표시)
    wrap : Items를 여러 줄로 묶음
    wrao-reverse : Items를 wrap의 역방향으로 여러 줄로 묶음
    - flex-wrap : 여러줄묶음 ;
    - 기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 없음
    이는 지정된 크기(주 축에 따라 width 나 height)를 무시하고 한 줄안에서만 가변
    Items를 줄 바꿈 하려면 값으로 wrap을 사용
    - flex-flow : 주축 여러줄묶음;
    -ex) .flex-container{
    flex-flow : row-reverse wrap;
    }

    02-03. jusify-content
    : 주 축(main-axis)의 정렬 방법을 설정
    - flex-start : Items를 시작점(flex-start)으로 정렬 : default
    - flex-end : Items를 끝점(flex-end)으로 정렬
    - center : Items를 가운데 정렬
    - space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬 되고 나머지 Items는 사이에 고르게 정렬
    - sapce-around : Items를 균등한 여백을 포함하여 정렬
    - jusify-content : 정렬방법;

    02-04. align-content
    : 교차 축(cross-axis)의 정렬 방법을 설정
    주의, flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용 가능
    주의, Items가 한 줄일 경우 align-items 속성을 사용
    - stretch : Container의 교차 축을 채우기 위해 Items를 늘림 : default
    * 교차 축에 해당하는 너비(속성 width or height)가 값이 auto(default)일 경우 교차 축을 채우기 위해 자동으로 늘어남
    - flex-start : Items를 시작점(flex-start)으로 정렬
    - flex-end : Items를 끝점(flex-end)으로 정렬
    - center : Items를 가운데 정렬
    - space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬 되고 나머지 Items는 사이에 고르게 정렬
    - sapce-around : Items를 균등한 여백을 포함하여 정렬
    - align-content : 정렬방법;

    02-05. align-items
    : 교차 축(cross-axis)에서 Items의 정렬 방법을 설정
    Items가 한 줄일 경우 많이 사용
    주의, Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 겨웅에는 align-content 속성이 우선
    주의, align-items를 사용하려면 align-content 속성을 기본값(strtch)으로 설정
    - stretch : Container의 교차 축을 채우기 위해 Items를 늘림 : default
    * 교차 축에 해당하는 너비(속성 width or height)가 값이 auto(default)일 경우 교차 축을 채우기 위해 자동으로 늘어남
    - flex-start : Items를 시작점(flex-start)으로 정렬
    - flex-end : Items를 끝점(flex-end)으로 정렬
    - center : Items를 가운데 정렬
    - baseline : Items를 문자 기준선에 정렬
    - align-items : 정렬방법;

  2. Flex Items
    03-01. order
    : Fles Item의 순서를 설정
    - Item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다
    - 음수가 허용된다
    - HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다
    - 숫자 : Item의 순서를 설정 : 0(default)
    -ex) order : 순서
    03-02. flex
    : flex-grow, flex-shrink, flex-basis의 단축 속성
    - Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성
    - flex-grow : Item의 증가 너비 비율을 설정 : 0(default)
    - flex-shrink : Item의 감소 너비 비율을 설정 : 1(default)
    - flex-basis : Item의 (공간 배분 전) 기본 너비 설정 : auto(default)
    -ex) flex : 증가너비 감소너비 기본너비;
    .item{
    flex : 1 1 20px;
    flex : 1 1; // flex-basis를 설정 안해주면 auto가 아닌 0으로 설정 된다
    flex : 1 20px; // 단위를 작성하면 flex-basis가 설정
    }
    03-03. flex-grow
    : Flex Item의 증가 너비 비율을 설정
    - Item의 증가 너비 비율을 설정
    - 숫자가 크면 더 많은 너비를 가진다
    - Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다
    - 숫자 : Item의 증가 너비 비율을 설정 : 0(default)
    -ex) flex-grow : 증가너비;
    -
    ) 모든 Items의 총 증가너비(flex-grow)에서 각 Item의 증가너비의 비율 만큼 너비를 가질 수 있습니다
    예를 들어 Item이 3개이고 증가 너비가 각 각 1,2,1 이라면,
    첫 번째 Item은 총 너비의 25%(1/4)을,
    두 번째 Item은 총 너비의 50%(2/4)을,
    세 번째 Item은 총 너비의 25%(1/4)을 가지게 된다
    03-04. flex-shrink
    : Flex Item의 감소 너비 비율을 설정
    - 숫자가 크면 더 많은 너비가 감소한다
    - Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다
    - 숫자 : Item의 감소 너비 비율을 설정 : 1(default)
    -ex) flex-shrink : 감소너비;
    -*) 감소 너비(flex-shrink)는 요소의 너비에 영향을 받기 때문에 계산하기가 까다롭다
    영향을 받는다는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미한다
    Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게
    Item의 너비가 줄어든다

          예를 들어 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px 일 때,
          요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각 각 2와 1이라면,
          감소 너비는 2:1 비율이며,
          첫 번재 Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
          두 번재 Item은 90px의 1/3인 30px 만큼 너비가 감소한다
    
          다른 예시로 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90xp 일 때,
          요소 너비가 다른 Item이 2개이고 요소 너비는 각 각 200과 100이고,
          지정된 감소 너비가 각 각 2와 1이라면,
          200 x 2 = 400과 100 x 1 = 100 즉 감소 너비는 4:1 비율이며,
          첫 번째 Item은 90px의 4/5인 72px 만큼 너비가 감소하고,
          두 번째 Item은 90px의 1/5인 18px 만큼 너비가 감소한다
          

    03-05. flex-basis
    : Flex Item의 (공간 배분 전) 기본 너비 설정
    - 값이 auto 일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다
    - 하지만 다위 값이 주어질 경우 설정할 수 없습니다
    - auto : 기변 Item과 같은 너비 : default
    - 단위 : px, em, cm 등 단위로 지정
    -ex) flex-basis : 기본너비;
    -*) flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의
    03-06. align-slef
    : 교차 축(cross-axis)에서 Item의 정렬 방법을 설정
    - align-items는 Container 내 모든 Items의 정렬 방법을 설정
    - 필요에 의해 일부Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있다
    - 이 속성은 align-items 속성보다 우선
    - auto : Container의 align-items 속성을 상속 받음 : default
    - flex-start : Items를 시작점(flex-start)으로 정렬
    - flex-end : Items를 끝점(flex-end)으로 정렬
    - center : Items를 가운데 정렬
    - baseline : Items를 문자 기준선에 정렬
    -ex) align-self : 정렬방법;

profile
아직까지는 코린이!

0개의 댓글