근육처럼 구부려. - 고급 플렉스박스.

이로써 너는 flexbox를 잘 파악해야 한다.너는 심지어 자신을 flexbox 대가라고 부른다.가자, 하자, 내가 감히 말하겠다.
아니면 나처럼 다른 옵션 카드에서 내가 Flexbox에 올린 마지막 두 편의 블로그 글을 열 수도 있다.모든 대사들은 이렇게 한다.
flexbox 길을 한가로이 거닐며 당신을 놀라게 할 선진 기술을 봅시다!
주의: 빈혈, 천식, 고혈압, 의심스러운 구름이 따라오거나 정신을 차리고 싶다면 크게 놀라지 마세요.

시작합시다.

....하하여기서부터 시작합시다...
따라서, 만약 당신이 아직 들어보지 못했다면, flexbox는 display: flex; 속성 레이아웃 웹 페이지를 사용하는 방법입니다.하위 요소와 아버지 요소가 필요합니다. 이 요소가 있으면 페이지에 원하는 곳에 거의 모든 요소를 놓을 수 있습니다.
고급 기술은 flexbox의 간단한 부분을 결합시켜 화려한 웹 페이지를 만드는 데 도움을 줍니다.이것이 바로 우리가 오늘 토론할 내용이다.
솔직히 말해서, 나는 그것으로 스스로 공부하는 것을 도왔기 때문에, 우리는 이 여정을 함께 걸었다.그중 일부는 생각보다 간단할 수도 있지만, 나에게는 선진적인 것이기 때문에 나와 맞서고 싶다면 오세요.

등고열

보다기둥을 같은 높이로 유지하기가 매우 어렵다.해봤어요.때때로 나의 엉덩이가 매우 아프다.
하지만 우리가 할 수 있다면...이게 쉬워요?
이것 좀 봐:

.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

실제로 flex-direction과align-items를 기본값으로 설정하고 용기를flex로 설정한 다음bam로 설정하면 됩니다.간단한 등고주가 있다.
이것은 백 퍼센트 생명을 구할 것이다.알아요.

서스펜션 시 증가

너는 그 멋진 사진 사이트들이 호버에서 사진을 성장시키는 것을 알고 있니?
FLEXBOX는 이를 수행할 수 있습니다.그리고 쉽게 할 수 있어요!

.items {
    flex: 1;
}

간단합니다. 모든 항목을 기본 flex 값 1로 설정합니다.
하지만 이제 우리는 해냈다.

.items:hover {
    flex: 2;
}

멈추는 모든 항목의 값은 2가 증가하고 나머지 항목은 1에 머무른다.이것은 그것이 두 배의 사용 가능한 공간을 차지하고 당신의 눈앞에서 끊임없이 증가한다는 것을 의미한다.많은 사이트들이 이런 효과를 사용하여 가장 큰 매끄러움을 얻는데, 지금은 우리도 그것을 사용할 수 있다.
솔직히 나도 이전에 다른 방법을 시도해 봤지만, 이것이 가장 간단한 방법인 것 같다.

추가 구성 요소 가져오기

크기를 입력하는 것은 절대 싫은 문제다.디자인과 인코딩 폼은 모든 웹 디자이너와 개발자에게 존재하는 화근이 될 수 있다.나는 어떤 사람이 진정으로 표를 사용하는 것을 좋아한다는 것을 들어 본 적이 없다.
flexbox가 없으면 기본적으로 요소를 추가하거나 미리 추가할 수 없습니다.하지만 flexbox를 추가하면 간단해진다.
만약 우리가 입력의 시작에 몇 가지 내용을 추가하고 싶다고 가정하자.HTML로 사용합니다.

<div class="add-on">
    <input class="addon-field">
    <button class="addon-item">
</div>

간단합니다. - 필드는 입력이고, 항목은 우리가 추가한 모든 내용입니다. (이 예에서는 단추입니다.)
지금 flexbox 코드예요?

.add-on {
    display: flex;
}

.addon-field {
    flex: 1;
}

화목하다그렇습니다.멋진 추가 단추가 있을 것입니다. 스타일은 괜찮지만, 입력 필드에 추가하고 싶습니다.
이거 신기하지 않아요?미안하지만, 나는 여전히 이것에 대해 경외감을 느낀다.

여백: 자동

분명히 잘 알려지지 않은 사실이 하나 있다. flexbox와 flex-grow는 사실상 영혼의 동반자이다.나도 이 관계를 믿지 않는다는 것을 알지만, 나는 그들이 이미 해결했다고 생각한다.
질문: 덮어쓰는 방법flex?나는 세 개의 값이 margin: auto;인 항목이 있다고 생각하지만, 그 중 하나는 맨 오른쪽에 있고 싶다.나는 경계를 하드코딩하고 싶지 않다. 이것은 유연해야 한다.
해결 방안: justify-content 그 창녀.
이렇게 하는 목적은 항목의 왼쪽 간격을 이 측의 모든 사용 가능한 공간을 채우고 항목을 용기의 맨 오른쪽으로 밀어내는 것이다.따라서 flex-start 를 설정한 다음 margin-left: auto; 을 마지막 항목에 추가하면 마지막 항목은 오른쪽에 있고 나머지 항목은 용기의 시작에 있습니다.
제가 설명을 잘 했나요?내가 없는 것 같아서.최선을 다했습니다.
자세한 내용은 다음 링크를 참조하십시오. https://medium.com/hackernoon/flexbox-s-best-kept-secret-bd3d892826b6#.byxqvyhah

결론

그래서 보도만 했는데...뭐, 네 가지 다른 기술?더욱 선진적인 flexbox 기술과 기교가 많다.그럼
나는 이것들이 일상 인코딩에서 매우 유용하다고 생각한다.이것들은 내가 이전에 몰랐던 것들로 아마도 나의 일반 사이트에서 실현될 것이다.이것이 바로 flexbox가 이렇게 잘하는 곳이다. 이것은 레이아웃을 무한히 간단하게 만든다.디자이너/개발자로서의 결합은 정말 하늘이 내린 좋은 기회이다.
즐거운 인코딩 되세요, 점원들<삼.