Flexbox란 무엇입니까?내가 안에 뭘 넣었지?

저는 키스하는 걸 좋아해요.
만약 네가 나의 다른 블로그 글을 읽은 적이 있다면, 너는 내가 간단하고 어리석은 (키스) 주제를 향해 직진하는 것을 좋아한다는 것을 알게 될 것이다.Flexbox는 본질적으로 용기가 사용 가능한 공간을 가장 잘 채울 수 있도록 하는 방법이다.Flexbox의 다른 배경은 좀 지루하기 때문에, 코드와 예시를 건너뛰고 들어갈 것입니다😁

Flexbox는 어떻게 사용합니까?
용기를 flexbox로 설정하려면 CSS 속성'display'를 사용하고 값을'flex'로 설정합니다.이것은 모든 직접 하위 단계에 flex 상하문을 사용합니다.저희가 지금 flexbox 용기가 생겼어요!축하합니다!🥳

.flex-container {
    display: flex;
}

이제 어떡하지?
flexbox의 행동을 조종하기 위해서 우리는 많은 속성을 설정할 수 있습니다.그 중 몇 가지를 살펴보자.

flexbox 용기의 속성
flex direction 이것은 flexbox의 항목이 수직 (열) 인지 수평 (줄) 인지 정의하는 방식입니다.속성 값 뒤에 '-reverse' 를 붙여서 반대로 표시할 항목을 설정할 수도 있습니다.

.flex-container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex wrap 기본적으로 flexbox는 용기 경계를 고려하지 않고 모든 항목을 한 줄에 놓으려고 시도합니다.우리는 flexbox 용기에 속성 flex wrap을 추가해서 이 점을 바꿀 수 있다.

.flex-container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(기본값): 모든 신축성 항목은 한 줄

에 있습니다.

포장: 신축성 물품은 위에서 아래로 여러 줄로 포장됩니다.

역방향 포장: 탄성 물품은 아래에서 위로 여러 줄로 포장됩니다.

flex-flow flex-flow는 flex-direction과 flex-wrap을 융합한 줄임말이다.

.flex-container {
    flex-flow: column wrap;
}

flexbox 하위 항목의 속성
주문서의 기본적으로 flex 항목은 flexbox 용기에 표시되는 순서대로 표시됩니다.단, 우리는 "order"속성을 사용하여 그것들의 표시 순서를 제어할 수 있다.같은 주문 값을 가진 모든 항목은 flexbox 용기에 표시되는 순서에 따라 표시됩니다.

.flex-item {
    order: 5
}

flexgrow flexgrow는 flexbox 용기의 공간을 채우기 위해 프로젝트를 확장할 수 있도록 합니다.용기 중의 기타 탄성항과 비례하는 무단위값.모든 항목의 값이 1이면 컨테이너의 나머지 공간이 모든 하위 항목에 균등하게 분배됩니다.만약 flex 항목의 flexgrow 값이 2라면, 이 항목은 비례가 1인 항목의 두 배가 넘는 공간을 차지할 것이다.

.flex-item {
    flex-grow: 1
}

사람들이 Flexbox를 사용하는 진짜 이유.

항목 가운데 맞춤!
flexbox의 중심에 물건을 놓으려면 물건이 필요합니다.우선 flexbox 용기가 필요합니다. 그리고 최소한 flex 프로젝트가 필요합니다.

.flex-container {
    display: flex;
}

.flex-item {
    width: 100px;
}


<div class="flex-container">
    <div class="flex-item">
        Item #1
    </div>
</div>

현재 우리는 flex 항목의 수평을 가운데로 맞추기 위해 속성을 추가해야 한다.우리는'증명내용'을 사용하여 이 점을 할 것이다!flexbox 용기 css에 추가합니다.

.flex-container {
    display: flex;
    justify-content: center;
}

완벽해!우리는 이미 이 항목의 수준을 중간에 두었다.이제 수직으로 가운데로 갑시다.이를 위해 flexbox 컨테이너 CSS의 "align items"속성을 사용합니다.우리는 또한 가운데에 있는 용기가 정상적으로 작동하는 것을 볼 수 있도록 용기의 높이를 좀 늘릴 것이다.

.flex-container {
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

너는 나를 믿지 않니?여기에 코드 펜이 하나 있는데, 당신들이 그것의 작용을 볼 수 있고, 당신들은 서로 다른 가치관을 가지고 놀 수 있다.
https://codepen.io/Simon_9/full/OJOYbjZ

Flex 포지셔닝 추가 값
Flex는 컨테이너 내에 요소를 수평 및 수직으로 가운데에 배치하는 데 매우 적합하지만 다른 값을 설정하여 Flex 항목의 표시를 변경할 수 있습니다.

증명 내용이 정당하다

유연성 시작(기본값): 항목을 유연성 방향으로 이동합니다.

유연성 말단: 항목이 유연성 방향의 말단으로 이동한다.

시작: 항목이 쓰기 모드의 시작 방향으로 이동합니다.

끝: 항목이 쓰기 모드 방향의 끝으로 이동합니다.

왼쪽: 항목은 용기의 왼쪽 가장자리로 이동한다. 구부러진 방향에 의미가 없으면 그 행동은 시작과 같다.

오른쪽: 항목이 용기의 오른쪽 가장자리로 이동합니다. 구부러진 방향에 의미가 없으면 그 동작은 끝과 유사합니다.

센터: 프로젝트가 중심선

을 따라 가운데에 있음

간격: 항목 균일 분포

주위 공간: 물품이 고르게 분포하고 주위 공간이 같다.시각적으로 볼 때 공간은 결코 같지 않다. 왜냐하면 모든 항목의 양측에 똑같은 공간이 있기 때문이다.첫 번째 항목은 용기 가장자리에 비해 한 단위의 공간이 있지만 다음 항목 사이에는 두 단위의 공간이 있다. 왜냐하면 다음 항목은 자신의 적용 간격이 있기 때문이다.

공간이 고르다. 항목의 분포는 임의의 두 항목 사이의 간격(그리고 가장자리까지의 공간)을 같다.

항목 정렬

밀어내기(기본값): 용기를 채우기 위해 밀어내기(최소 너비/최대 너비 그대로 유지)

부드러운 가동/가동/자체 가동: 항목은 가로축의 기점에 놓는다.이 두 사람 사이의 차이는 미묘하다. 탄력적인 방향 규칙이나 쓰기 패턴을 존중하는 규칙에 관한 것이다.

유성단/단/자단: 항목은 가로축의 끝에 놓는다.차이점도 미묘하다. 탄력적인 방향 존중 규칙과 쓰기 패턴 규칙에 관한 것이다.

가운데: 항목 수직 가운데

베이스라인: 항목 정렬(예: 베이스라인 정렬)

피드백 시간
나는 네가 이 문장에 대한 견해를 매우 알고 싶다.반응을 남기는 것을 잊지 마라. 그러면 내가 네가 그것을 좋아하는지 아닌지를 안다.아, 빨리 트위터로 인사해!