Flexbox 이상의 컨텐츠 문제 해결

14574 단어 HTML flexbox CSS

TL;DR

긴 영어 단어와 긴 URL의 경우

overflow-wrap: break-word;
word-wrap: break-word;

(금지 처리를 최대한 피하고) 가로로 되돌리려고 할 때 대상이 Flex 항목이면 접을 수 없고 초과할 수 있습니다!이때 다음과 같은 대책을 취해야 한다.

flex-direction: row;의 경우 min-width: 0;를 Flex 프로젝트에 배치

flex-direction: column;의 경우 max-width: 100%;를 Flex 프로젝트에 배치

일단 이걸로 할게요.

* {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.row {
    display: flex;
    flex-direction: row;
}
.row>* {
    min-width: 0;
}
.col {
    display: flex;
    flex-direction: column;
}
.col>* {
    max-width: 100%;    
}

Bootstrapv4용 버전

* {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.d-flex:not(.flex-column)>* {
    min-width: 0;
}
.d-flex.flex-column>* {
    max-width: 100%;    
}

이것만 보면...↓ 보면 알 것 같아!

원자재

HTML - word-break: break-word; 유효한 워드-wrap:break-word;overflow-wrap: break-word; 효과가 없는 경우는...teratail
Special Thanks: @s8_chu

알기 쉬운 도해

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Flexbox overflow-wrap Test</title>

<style>
    /* 体裁用 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: monospace;
    }
    html, body, main {
        height: 100%;
    }
    main {
        width: 640px;
        background: ivory;
        margin: 0 auto;
    }
    article {
        border: 4px solid blue;
        margin: 20px auto;
        background: pink;
    }
    p {
        border: 4px solid red;
        height: 4em;
    }

    /* 横方向 Flex */
    .row {
        display: flex;
        flex-direction: row;
    }
    /* 縦方向 Flex */
    .col {
        display: flex;
        flex-direction: column;
    }
</style>

<main>

    <section>

        <h1>Row</h1>

        <article class="row">
            <p>1</p>
            <p>http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryverylooooooooooooooooooooooongurl</p>
        </article>

        <article class="row">
            <p>2</p>
            <p style="min-width: 0;">http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryverylooooooooooooooooooooooongurl</p>
        </article>

        <article class="row" style="overflow-wrap: break-word;">
            <p>3</p>
            <p style="min-width: 0;">http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryverylooooooooooooooooooooooongurl</p>
        </article>

    </section>

    <section>

        <h1>Column</h1>

        <article class="col">
            <p>1</p>
            <p>http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryverylooooooooooooooooooooooongurl</p>
        </article>

        <article class="col" style="overflow-wrap: break-word;">
            <p>2</p>
            <p>http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryverylooooooooooooooooooooooongurl</p>
        </article>

        <article class="col" style="overflow-wrap: break-word; align-items: flex-start;">
            <p>3</p>
            <p>http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryverylooooooooooooooooooooooongurl</p>
        </article>

        <article class="col" style="overflow-wrap: break-word; align-items: flex-start;">
            <p>4</p>
            <p style="max-width: 100%;">http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryverylooooooooooooooooooooooongurl</p>
        </article>

        <article class="col" style="align-items: flex-start;">
            <p>5</p>
            <p style="max-width: 100%;">http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryverylooooooooooooooooooooooongurl</p>
        </article>

    </section>

</main>

해설

전제 조건

overflow-wrap: break-word;
word-wrap: break-word;

반환 단어는 내용이 상자를 초과한 경우에만 적용됩니다.플렉스 프로젝트는 내용 크기에 따라 상자의 크기가 달라지는 특성이 있어 기본적으로 단어의 되돌리기보다 상자의 크기가 우선적으로 고려되는 것이 실패의 원인이다.

가로 Flex

min-width: auto;는 Flex 항목의 최소 너비의 초기 값입니다.이 값은 같은 초기값flex-basis: auto;보다 우선하기 때문에 내부 내용의 증가로 인해 Flex 용기 구역을 넘어섰다.저기 있다

min-width: 0;

, flex-basis: auto;이 우선적으로 적용되고 프로젝트의 폭은 용기에 수용하는 것으로 확정됩니다.이렇게 하면 컨텐트가 상자를 넘어서는 상황이 발생하기 때문에 되돌릴 수 있다.

세로 Flex

align-items: stretch;는 Flex 항목에 대한 수평 정렬의 초기 값입니다.이 경우 Flex 항목의 너비는 항상 Flex 컨테이너의 너비와 일치합니다.따라서 이 값을 바꾸지 않았다면 되돌릴 수 없는 문제가 없었을 것이다.
그러나 align-items: flex-start; 등치를 사용할 때 가로 플렉스와 마찬가지로 플렉스 항목의 폭은 내용의 크기에 따라 달라진다.저기 있다

max-width: 100%;

지정할 때 항목의 최대 값은 일반 블록 요소와 같고 컨테이너 너비와 일치하도록 결정됩니다.이렇게 하면 컨텐트가 상자를 넘어서는 상황이 발생하기 때문에 되돌릴 수 있다.
또한 Flex 용기의 폭을 초과하거나 같은지 여부를 결정하는 가장 큰 Flex 항목에 대해서는 max-width: 100%; 또는 width: 100%;를 지정해서align-self: stretch;해도 같은 효과를 얻을 수 있다.

보태다

가로 Flex 중 max-width:100%;지정된 상황

100%는 Flex 컨테이너의 폭을 나타내므로 같은 행의 다른 Flex 항목과 동일한 폭을 초과합니다.표현하고 싶은 경우max-width: calc(100%-残りの要素);가 옳다.최대 폭의 상한선을 제한하기 전에 최소 폭의 하한선을 확대해야 한다는 생각이 설명할 수 있을까.min-width: 0;이므로 반환된 컨텐츠의 크기를 고려하지 않음
→ max-width: none; min-width: auto;이므로 max-width: none; min-width: 0;

수직 Flex에서 flex-basis:auto;지정된 상황

아무 일도 일어나지 않을 거야.원래 Flex 프로젝트의 폭은 주축 방향으로만 제한되기 때문에 교차축 방향에서 블록 요소와 같은 사고방식을 사용할 수 있다.min-width: 0;이므로 반환된 컨텐츠의 크기를 고려하지 않음
→ max-width: none; min-width: 0;이므로 max-width: 100%; min-width: 0;

비표준 속성 max-width:100%;

테라테일의 질문에서 말한 바와 같이

word-break: break-word;

특이한 움직임 때문에 별다른 공을 들이지 않아도 이 문제를 해결할 수 있지만, 비표준적 속성이기 때문에 가급적 사용하지 않는 것이 좋다.

Reference

이 문제에 관하여(Flexbox 이상의 컨텐츠 문제 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mpyw/items/dfc63c1fed5dfc5eda26

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Linux 기본 서비스 단순 구성(DNS, DHCP, FTP, 작업 예약)

OpenDNS 및 Google Public DNS(DNSpod에서 전환)를 권장하지 않는 이유

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다