단순 CSS Flex 자습서

이 인코딩서CSS,JavaScript와Python를 보세요.아마존도 추가 참고자료가 필요하다면 그 중 일부를 제공했다.

Flex is a set of CSS properties that help web designers create layouts. Officially Flex is actually called Flexbox which stands for flexible box. It automatically adjusts layout spacing.

Flex는 브라우저 크기, 인접 항목 크기 및 부모 컨테이너에 있는 항목 크기를 기준으로 자동으로 조정합니다.이것은 flex를 응답성 사이트 레이아웃을 만드는 이상적인 도구로 만들었다.
가능한 한 많은 flex 속성/가치 조합을 배우는 것은 그 작업 원리를 이해하는 데 매우 중요하다.우리 시작합시다!

상위 및 항목

Flex 블록은 부모 컨테이너와 내포된 항목으로 구성됩니다.일부 flex 속성은 상위 수준에만 적용해야 합니다.다른 사람들은 물건에만 관심을 갖는다.

주축과 가로축

flex에서 사고하려면 주축과 가로축을 이해해야 한다.기본 축(수평 축)이 기본값입니다.flex 컨테이너에 항목을 배치하면 해당 항목이 자동으로 주 축에 정렬됩니다.

CSS Flex 속성 컨텐트 조정 및 정렬

이 두 가지 특성에 익숙해지면 제2의 천성이 된다!
주 축을 따라 justify-content 속성을 사용하여 항목 사이의 간격을 생성합니다.가로축에서 align-content 속성을 사용하여 같은 작업을 수직으로 수행합니다.
그러나 align-content는 여러 줄의 신축성 항목이 있을 때만 유효하다.(즉, 용기의 폭을 넣고 다음 줄로 포장할 수 있는 물건이 더 많다는 뜻이다. 신청flex-wrap: wrap이 있어야 다음 줄로 넘어갈 수 있다.)

HTML 요소에서 Flex를 활성화하려면 어떻게 합니까?

Flex는 레이아웃을 별도의 블록으로 분할하는 문제를 처리하는 기본 HTML 요소에 적용할 수 있습니다.
HTML 요소를 flex 컨테이너로 표현하려면 부모 요소에 display:flex 속성을 적용하면 됩니다.
HTML:

<div id = "flex"></div>

CSS:

div#flex { display:flex }

프로젝트로 flex 용기 채우기

현재, 당신이 해야 할 일은 flex 부모 용기와 필요한 임의의 여러 항목을 한데 끼워 넣는 것입니다.

<div id = "flex">
   <div>A</div>
   <div>B</div>
   <div>C</div>
</div>

너는 네가 하고 싶은 것에 따라 모든 상품에 기본적인 스타일을 적용해야 한다.이것은 완전히 너에게 달려 있다!이 예에서 box-shadow 속성은 항목을 돋보이게 하는 데 사용됩니다.

기본적으로 flex는 내용을 왼쪽으로 정렬합니다. (값 flex-start이것은 기본적으로 이 값flex-start이 justify-content에 적용된다는 것을 의미한다.
이제 재미있는 부분으로 들어갑니다.프로젝트 조정!
Flex에는 justify-content 속성에 할당할 수 있는 고유한 값 세트가 있습니다.어느 정도에 이것이 flex 디자인 레이아웃을 사용하는 전체 내용이다.그것은 당신의 물건 사이에서 당신이 원하는 공간을 선택하는 것이다.
우리 먼저 이 간단한 예를 시험해 봅시다.
나는 다음과 같은 방법으로 div#flex 스타일을 편집했다.

div#flex {
    display: flex;
    justify-content: space-evenly;
}

Dell 프로젝트를 다음과 같이 수정하려면 justify-content: space-evenly;만 추가하십시오.

현재 너는 이곳에서 매우 많은 다른 값을 응용할 수 있다.
그것들은 모두 비슷하지만 약간 다른 간격을 형성한다.
이 강좌의 다음 절에서, 나는 flex 도표로 그것들을 소개할 것이다. 이것은 당신이 그들이 어떻게 일을 하는지 신속하게 이해하는 데 도움을 줄 것이다.

justify 내용 사용하기

이 flex 도표는 설정된 값이 어떻게 작동하는지 쉽게 이해할 수 있습니다.왼쪽은 각 값의 이름이고 오른쪽은 flex 항목 간격에 대한 영향입니다.

전체justify-content 값에 대한 설명:

모 피쳐 너비의 100%를 채우기 위해 모든 항목을 밀어냅니다

.

모든 항목 사이의 간격은 같다.외각에 공간이 없다.

주위 공간, 모든 항목, 주위 공간.외각에는 절반의 공간이 있다.

모든 항목과 부모 주위에 똑같은 공간을 고르게 분포한다.

모든 물건을 가운데에 놓아라.물건 사이에 공간이 없다.

모든 항목을 커브 끝으로 정렬합니다.

flex start 는 모든 항목을 왼쪽으로 정렬합니다.기본값입니다.

justify-content가 기본 설정임을 기억하십시오.이것이 바로 모든 항목이 수평(주) 축에 정렬되는 이유입니다.단, flex-direction: row를 flex-direction로 설정하여 축을 교환할 수 있다.
이제 축과 축 사이의 거리가 달라집니다.다음 예제를 참조하십시오.

탄력적인 방향으로 정렬된 컨텐트 사용: 열

이것은 위의 예와 같다.우리가 한 것은 column 속성을 justify-content로 설정하는 것뿐입니다.

커브 방향을 사용하여 수직 간격 생성하기

column 왜 당신의 배치에 적합하지 않은지 곤혹스러울 수 있습니다.많은 사람들이 이 속성을 부모 대상에 적용하려고 시도하는데, align-content 의 대립면으로 사용하기를 원한다.
그런데 하나 잡았어!이 속성은 여러 줄이 필요합니다.그렇지 않으면 효과가 없다.
프로젝트를 다음 줄로 포장하려면 주 용기의 align-content 속성을 justify-content 값으로 설정하십시오.

이곳에서 12개의 물품은 같은 수량의 차도를 채우는 데 전략적으로 쓰인다.flex-wrap 값을 wrap 속성에 적용합니다.

이것은 격자와 유사한 레이아웃을 만들 것입니다.

추가 Flex 참조

CSS Flex Tutorial 완전한 css flex 자습서
Less Common CSS FLex Patterns In 10 Minutes flex를 어떻게 사용하여 격자와 기둥을 바탕으로 하는 레이아웃을 만드는가
flex를 배우는 것은 지속적인 과정으로 css flex를 사용하여 응답성 레이아웃을 만드는 데 일률적인 해결 방안이 없다.다양한 자원에서 배우다.