CSS Flexbox 메모장

소개

Flexbox는 레이아웃에서 유연성을 높이고 응답성 레이아웃 설계를 단순화하는 좋은 방법입니다.2D 평면에서 엔티티를 쉽게 정렬하고 주요 속성에 익숙해지면 쉽게 사용할 수 있습니다.
첫 번째 단계는 용기 요소에display:flex를 설정하는 것입니다.flex 용기의 하위 항목은 flex 항목이 됩니다.한 그룹의 속성은 flex 용기에 응용되고 전체 프로젝트에 영향을 미칠 수 있으며 다른 한 그룹의 서로 다른 속성은 flex 프로젝트에 응용되고 목표 프로젝트에 영향을 미칠 수 있다.Flex 항목은 반대로 요소를 포함하는 Flex 용기일 수도 있어 복잡한 레이아웃을 쉽게 만들 수 있습니다.
브라우저 지원: 2020년 데이터에 따르면 전 세계 브라우저의 98%now support flexbox가 공급업체 접두사를 필요로 하지 않습니다.
다음은 Flexbox에 대한 일목요연한 이해를 돕기 위한 빠른 입문입니다.이것은 모든 사용 가능한 속성, 값, 테두리 상황의 상세한 목록이 아니라 가장 유용하거나 자주 사용하는 속성의 빠른 요약입니다.

Flex 컨테이너 속성

Flexbox가 없는 3개의 Flex 항목을 포함하는 컨테이너입니다.

<div class="box">
  <span class="item">
    <img src="/images/dino.svg" width="64" height="45" alt="Dino Sammy">
  </span>
  <span class="item">
    <img src="/images/steampunk.svg" width="64" height="45" alt="Steampunk Sammy">
  </span>
  <span class="item">
    <img src="/images/skeleton.svg" width="64" height="45" alt="Skeleton Sammy">
  </span>
</div>

표시: flex

이제 용기에display:flex를 설정하면 자동으로 개선됩니다.이제 컨테이너의 사용 가능한 공간으로 항목이 자동으로 확장되는 방법을 확인하십시오.

.container {
  display: flex;
}

구부러진 방향

커브 방향 속성을 사용하여 항목의 방향을 변경할 수 있습니다.

.container {
  display: flex;
  flex-direction: column;
}

기본값은row이고 다른 사용 가능한 값은rowreverse,column,columnreverse입니다.
행 반전과 열 반전은 HTML 태그의 순서를 변경하지 않고 항목의 시각적 순서를 변경합니다.

.container {
  display: flex;
  flex-direction: column-reverse;
}

행과 열 방향 사이에서 변경하는 능력은 비교적 작은 장치에서 레이아웃을 조정하는 데 매우 쉽다. 미디어 조회에서 CSS 규칙을 변경하기만 하면 된다.

컨텐트 조정

컨텐트 정렬을 사용하여 주 축에 항목을 정렬합니다.'flex direction'이'column'일 때 주축은 Y축이고,'flex direction'이'row'일 때 주축은 X축이다.
기본값은 "flex start"이며, 기타 사용 가능한 값은 "flex end", "center", "space between", "space around"와 "space Equalized"입니다.
컨텐트 조정:
flex-start
flex-end
center
space-between
space-around
space-evenly
.내용 조정(>);[name="flex start"]: 서스펜션~.demo\u wrap {내용 조정:flex start;}
.내용 조정(>);[name="flex end"]: 서스펜션~.demo\u wrap {내용 조정:flex end;}
.내용 조정(>);[name="center"]: 서스펜션~.demo\u wrap {내용 조정: 중심;}
.내용 조정(>);[name="space between"]: 서스펜션~.demo\u wrap {내용 조정: 간격;}
.내용 조정(>);[name="space around"]: 서스펜션~.demo\u wrap {내용 조정: 공백;}
.내용 조정(>);[name="space equality"]: 서스펜션~.demo\u wrap {내용 조정: 균일한 간격;}

항목 정렬

정렬 항목은 정렬 내용과 유사하지만 가로축에 항목을 정렬할 수 있습니다.기본값은 밀어내기이며 신축성 시작점, 탄성 끝점, 중심 및 베이스라인도 적용됩니다.
항목 정렬:
stretch
flex-start
flex-end
center
baseline
.항목 정렬(>);[스트레칭]: 서스펜션~.demo\u wrap {정렬 항목: 밀어내기;}
.항목 정렬(>);[name="flex start"]: 서스펜션~.demo\u wrap {정렬 항목:flex start;}
.항목 정렬(>);[name="flex end"]: 서스펜션~.demo\u wrap {정렬 항목:flex end;}
.항목 정렬(>);[name="center"]: 서스펜션~.demo\u wrap {정렬 항목: 가운데;}
.항목 정렬(>);[name="baseline"]: 서스펜션~.demo\u wrap {정렬 항목: 베이스라인;}

컨텐트 정렬

align 콘텐츠는 align items와 유사하지만, 여러 줄의flex items가 있을 때만 유효합니다. (아래의flex wrap 참조)기본적으로 밀어내기이며 탄성 시작점, 탄성 끝점, 중심, 간격, 균일 간격도 적용됩니다.
컨텐트 정렬:
stretch
flex-start
flex-end
center
space-between
space-around
space-evenly
.내용 정렬(>);[스트레칭]: 서스펜션~.demo\u wrap {정렬 내용: 밀어내기;}
.내용 정렬(>);[name="flex start"]: 서스펜션~.demo\u wrap {정렬 내용:flex start;}
.내용 정렬(>);[name="flex end"]: 서스펜션~.demo\u wrap {정렬 내용:flex end;}
.내용 정렬(>);[name="center"]: 서스펜션~.demo\u wrap {정렬 내용: 중심;}
.내용 정렬(>);[name="space between"]: 서스펜션~.demo\u wrap {정렬 내용: 공백;}
.내용 정렬(>);[name="space around"]: 서스펜션~.demo\u wrap {정렬 내용: 공백;}
.내용 정렬(>);[name="space equality"]: 서스펜션~.demo\u wrap {정렬 내용: 균일한 간격;}

부드러운 성질.

기본적으로 항목은 줄을 바꾸지 않습니다. (기본값은nowrap) 프로젝트가 사용할 수 있는 공간을 초과하면 넘칩니다."flex wrap"을 "wrap"으로 설정하면 이 문제를 해결할 수 있습니다.
부드러운 패키지:
nowrap
wrap
.부드러운 패키지(>);[이름 = "nowrap"]: 서스펜션~.demo\u wrap{flex wrap:nowrap;}
.부드러운 패키지(>);[name="wrap"]: 서스펜션~.demo\u wrap{flex wrap:wrap;}

탄력성 항목 속성

자가 정렬

자기 정렬은 항목 정렬과 유사하지만 특정 항목에만 적용됩니다.이를 통해 유연한 프로젝트는 주요 규칙을 쉽게 돌파할 수 있습니다.
자가 정렬:
stretch
flex-start
flex-end
center
baseline
.자기 정렬(>);[스트레칭]: 서스펜션~.demo\u 패키지.항목: 첫 번째 하위 항목 {맞춤:밀어내기;}
.자기 정렬(>);[name="flex start"]: 서스펜션~.demo\u 패키지.항목: 첫 번째 하위 항목 {align self:flex start;}
.자기 정렬(>);[name="flex end"]: 서스펜션~.demo\u 패키지.항목: 첫 번째 하위 항목 {align self:flex end;}
.자기 정렬(>);[name="center"]: 서스펜션~.demo\u 패키지.항목: 첫 번째 하위 항목 {정렬자: 가운데;}
.자기 정렬(>);[name="baseline"]: 서스펜션~.demo\u 패키지.항목: 첫 번째 하위 항목 {자기 맞춤: 베이스라인;}

flex 성장

flex grow를 통해 우리는 flex 프로젝트가 다른 프로젝트에 비해 차지하는 공간량을 제어할 수 있다.flexgrow는 사용 가능한 공간의 일부분을 나타내는 수치를 받아들인다. 구체적으로는 다른 프로젝트의 flexgrow 값에 달려 있다.기본값은 0입니다. 이것은 이 항목이 사용할 수 있는 빈 공간을 차지하지 않는다는 것을 의미합니다.
비례에 기초하기 때문에 모든 항목을 (예를 들어) 200으로 설정하는 탄력성 증가는 모든 항목을 1로 설정하는 탄력성 증가와 같다.
다음 예제에서 첫 번째 항목의 기본 flex grow 값은 0, 두 번째 항목의 값은 1, 세 번째 항목의 값은 2입니다.


탄력적 성장: 1

탄력적 성장: 2

신축성 수축

flexshrink는 flexgrow와 반대로 프로젝트의 수축성을 정의합니다.기본값은 1입니다. 이것은 프로젝트가 flex grow와 같이 다른 프로젝트와의 비례를 기반으로 수축할 수 있음을 의미합니다.

신축 기준값

flexbasis는 프로젝트가 차지하는 시작 공간을 정의하지만, 공간의 가용성이나 추가 공간을 채울 수 있는지에 달려 있기 때문에 보장할 수 없습니다.
예를 들어, 다음 예제에서는 모든 항목의 탄력적인 기초가 25%입니다.



하지만 이제 우리도 첫 번째 flex 항목에 1의 flex grow를 제공한다.다음 예제에서 모든 항목의 탄력성 기초는 25%이지만 첫 번째 항목은 탄력성 증가치가 1이기 때문에 남은 사용 공간을 차지한다.
탄력적 성장: 1


마지막으로 우리의 세 번째 항목은 신축성 기초가 77%이고 신축성 기초가 25%인 다른 항목은 신축성 기초가 0이기 때문에 수축을 거부한다.


탄성기초: 77%;신축성 수축: 0;

.item {
  flex-basis: 25%;
}
.item:last-child {
  flex-basis: 77%;
  flex-shrink: 0;
}

구부러지다

flex는 flex grow, flex shrink와 flex basis 조합의 간략한 속성입니다.예를 들어 flex grow 값이 2, flex shrink 값이 0, flex basis가 2rem인 항목의 문법은 다음과 같다.

.item {
  flex: 2 0 2rem;
}

.프레젠테이션 탭(&T);a{
표시: 인라인 블록;
충전재: 4px;
커서: 포인터;
}
.프레젠테이션 탭(&T);a: 서스펜션 {
배경: rgba(114, 186, 94, 0.25);
}
.demo\u 패키지.프레젠테이션 탭(&T);a{
테두리: 2px 점선 rgba(114, 186, 94, 0.35);
배경: rgba(114, 186, 94, 0.05);
}
.demo\u 패키지
표시: flex;
높이: 250px;
격자 템플릿 열: 1fr 1fr 1fr;
격자 템플릿 줄: 자동;
가장자리 밑부분: 1.2rem;
}
.demo\u 패키지.신축성 없음
표시: 블록,
}
.demo\u 패키지.열
구부러진 방향: 열;
}
.demo\u 패키지.열 반전
구부러진 방향: 기둥 반향;
}
.demo\u 패키지.항목
배경: rgba(255, 213, 70, 0.4);
테두리: 2px 점선 rgba(23619848 0.5);
채우기:.875 렘;
}
.demo\u 패키지.프로젝트 img{
표시: 내부 연결;
왼쪽 거리: 0;
오른쪽 여백: 0;
최대 너비: 설정되지 않음;
테두리: 없음;
}
.demo\u 패키지.프로젝트 범위
항목 정렬: 가운데 맞추기;
}
.demo\u 패키지.항목 너비.프로젝트
.demo\u 패키지.프로젝트-wide2.항목
너비: 45%;
}
.demo\u 패키지.wrap2{
부드러운 소포: 소포;
}