다중 라인 플렉스박스 레이아웃에서 줄 바꿈을 지정하는 방법은?

다중 라인 플렉스박스 레이아웃에서 줄 바꿈을 지정하는 방법은?

멀티 라인 플렉스박스에서 라인을 끊는 방법이 있습니까?

예를 들어 이 코드펜의 각 3번째 항목 뒤에 깨지는 것입니다.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) {
  background: silver;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

맘에 들다

.item:nth-child(3n){
  /* line-break: after; */    
}

가장 간단하고 신뢰할 수 있는 솔루션은 플렉스 아이템을 적재적소에 삽입하는 것입니다.넓을 히을우(우width: 100%), 줄바꿈을 합니다 를 합니다 를 .

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

하지만 그것은 추하고 의미있는 것이 아닙니다. 컨테이너 에 의사 요소를 할 수 ,신너사를여할다수스에다수할de신여de스,oer,eed-order그들을 올바른 장소로 이동시킬 수 있습니다.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  background: silver;
}
.container::before, .container::after {
  content: '';
  width: 100%;
  order: 1;
}
.item:nth-child(n + 4) {
  order: 1;
}
.item:nth-child(n + 7) {
  order: 2;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

제한점이 : 가 는 만 가질 수 있습니다.::before그리고.::after사이비 사기의 바꿈은 줄번만 강제로 할 있습니다 수 즉 force 있습니다 수 2 only , breaks line 할 you 강제로 can means 사이비 즉 사기의 that 줄 바꿈은 번만 2 force

이를 해결하기 위해 플렉스 컨테이너 대신 플렉스 항목 내부에 유사 요소를 생성할 수 있습니다.이렇게 하면 2개로 제한되지 않습니다.하지만 그 사이비 요소들은 플렉스 아이템이 아니기 때문에 줄을 끊는 것을 강요할 수 없을 것입니다.

하지만 운 좋게도 CSS 디스플레이 L3는 다음과 같이 소개했습니다. (현재 파이어폭스 37에서만 지원됨)

요소 자체는 상자를 생성하지 않지만 하위 요소와 유사 요소는 여전히 정상적으로 상자를 생성합니다.상자 생성 및 레이아웃을 위해 요소는 문서 트리에서 자식 및 유사 요소로 대체된 것처럼 처리되어야 합니다.

그래서 신청할 수 있습니다.display: contents플렉스 용기의 아이들에게 그리고 각각의 내용물을 추가적인 포장지 안에 포장합니다.그러면 플렉스 아이템은 추가 포장지와 아이들의 가짜 요소가 될 것입니다.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  display: contents;
}
.item > div {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) > div {
  background: silver;
}
.item:nth-child(3n)::after {
  content: '';
  width: 100%;
}

<div class="container">
  <div class="item"><div>1</div></div>
  <div class="item"><div>2</div></div>
  <div class="item"><div>3</div></div>
  <div class="item"><div>4</div></div>
  <div class="item"><div>5</div></div>
  <div class="item"><div>6</div></div>
  <div class="item"><div>7</div></div>
  <div class="item"><div>8</div></div>
  <div class="item"><div>9</div></div>
  <div class="item"><div>10</div></div>
</div>

이전 버전의 사양에 따르면 Flexbox는 또는 이전 CSS 2.1 별칭을 사용하여 강제 중단을 허용했습니다.

.item:nth-child(3n) {
  page-break-after: always; /* CSS 2.1 syntax */
  break-after: always; /* CSS 3 syntax */
}

하지만 이러한 강제 회선 차단은 Firefox에서만 작동하며, 현재 사양대로 작동하지는 않는 것 같습니다.제안된 새로운 방법(어디에도 구현되지 않음)은 다음과 같습니다.

.item:nth-child(3n) {
  wrap-after: flex; /* New proposed syntax */
}

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  page-break-after: always;
  break-after: always;
  wrap-after: flex;
  background: silver;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

제가 보기에 그것은 더 의미심장한 것입니다.<hr> 플렉스 항목들 사이에서 선이 끊어짐에 따라 요소들.

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

.container hr {
  width: 100%;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <hr>
  <div>3</div>
  <div>2</div>
  ...
</div>

Chrome 66, Firefox 60 및 Safari 11에서 테스트되었습니다.

@오리올은 훌륭한 답을 가지고 있습니다, 슬프게도 2017년 10월 현재, 둘 다 아닙니다.display:contents,둘 다 아니다.page-break-after이는 널리 지원되며, 다른 플레이어는 지원하지 않는 파이어폭스에 관한 것이라고 더 잘 말할 수 있습니다. 저는 세 번째 요소가 끝날 때마다 하드 코딩보다 더 나은 것으로 생각되는 다음과 같은 "핵"을 생각해 냈습니다. 그렇게 하면 페이지를 모바일로 만들기가 매우 어렵기 때문입니다.

해킹이라고 했는데 단점은 무료로 추가 요소를 많이 추가해야 하는데 날짜가 지정된 IE11에서도 트릭을 수행하고 브라우저 간에 작동한다는 것입니다.

각 div 요소를 으로, "" 에 를 하는 이며 과 됩니다 는 됩니다 과 는 display:none CSS했습니다 를 했습니다.nth-child다음과 같이 라인 브레이크를 강제로 작동시키기 위해 이 중 어떤 것을 실제로 보여야 하는지 결정합니다.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n-1) {
  background: silver;
}
.breaker {
  display: none;
}
.breaker:nth-child(3n) {
  display: block;
  width: 100%;
  height: 0;
}

<div class="container">
  <div class="item">1</div>
  <p class="breaker"></p>
  
  <div class="item">2</div>
  <p class="breaker"></p>
  
  <div class="item">3</div>
  <p class="breaker"></p>
  
  <div class="item">4</div>
  <p class="breaker"></p>
  
  <div class="item">5</div>
  <p class="breaker"></p>
  
  <div class="item">6</div>
  <p class="breaker"></p>
  
  <div class="item">7</div>
  <p class="breaker"></p>
  
  <div class="item">8</div>
  <p class="breaker"></p>
  
  <div class="item">9</div>
  <p class="breaker"></p>
  
  <div class="item">10</div>
  <p class="breaker"></p>
</div>

의미론적 선이 끊어지길 원하십니까?

그럼 사용을 고려해 보시기 바랍니다.<br>. W3 학교들은 당신에게 다음을 제안할지도 모릅니다.BR는 시를 쓰기 위한 것일 뿐이지만(내 것이 곧 출시됩니다) 스타일을 변경하여 컨텐츠를 다음 줄로 밀어주는 100% 너비 블록 요소로 동작할 수 있습니다.brbr'의 break보다는 br'의 break를 사용하는 이 더 적절해 .hr ≥ 100%div을 더 읽을 수 있도록 .

합니다를 합니다.<br>라인브레이크가 필요한 곳에서 이렇게 스타일링을 할 수 있습니다.

 // Use `>` to avoid styling `<br>` inside your boxes 
 .container > br 
 {
    width: 100%;
    content: '';
 }

미디어 쿼리를 사용하지 않도록 설정할 수 있습니다.display:block아니면none적절한 경우(이에 대한 예시를 포함시켰으나 주석을 달지 않은 경우).

을 사용할 수 .order:필요한 경우 순서를 설정할 수 있습니다.

그리고 클래스나 이름을 다르게 해서 얼마든지 넣을 수 있습니다 :-)

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

.container > br
{
  width: 100%;
  content: '';
}

// .linebreak1 
// { 
//    display: none;
// }

// @media (min-width: 768px) 
// {
//    .linebreak1
//    {
//       display: block;
//    }
// }

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <br class="linebreak1"/>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

---

W3Schools에서 말하는 내용으로 제한할 필요가 없습니다.

전통적인 방식은 유연하고 상당히 이해하기 쉽다고 생각합니다.

마크업

<div class="flex-grid">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-3">.col-3</div>
    <div class="col-9">.col-9</div>

    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

grid.css 파일 만들기:

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.col-1 {flex: 0 0 8.3333%}
.col-2 {flex: 0 0 16.6666%}
.col-3 {flex: 0 0 25%}
.col-4 {flex: 0 0 33.3333%}
.col-5 {flex: 0 0 41.6666%}
.col-6 {flex: 0 0 50%}
.col-7 {flex: 0 0 58.3333%}
.col-8 {flex: 0 0 66.6666%}
.col-9 {flex: 0 0 75%}
.col-10 {flex: 0 0 83.3333%}
.col-11 {flex: 0 0 91.6666%}
.col-12 {flex: 0 0 100%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

예제를 만들었습니다(jsfiddle).

창 크기를 400px 이하로 조정해 보십시오. 반응이 좋습니다!!

적절한 조건을 고려할 때 당면한 문제를 과도하게 생각할 필요가 없다는 점을 상기시키기 위해 이 답변을 종합하고자 합니다.원하는 것은 다음과 같이 달성할 수 있습니다.flex: wrap그리고.max-width에 대신에:nth-child.

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 420px;
  list-style-type: none;
  background-color: tomato;
  margin: 0 auto;
  padding: 0;
}

li {
  display: inline-block;
  background-color: #ccc;
  border: 1px solid #333;
  width: 23px;
  height: 23px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0.2rem;
  flex-shrink: 0;
}

<div class="root">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
    <li>S</li>
    <li>T</li>
    <li>U</li>
    <li>V</li>
    <li>W</li>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
  </ul>
</div>

https://jsfiddle.net/age3qp4d/

추가 마크업을 추가할 필요가 없는 또 다른 가능한 해결책은 요소를 분리하기 위해 동적 마진을 추가하는 것입니다.

, 으로 의 으로 은 의 calc() 추가하기, margin-left그리고.margin-right원소 (3n+2 λ(2, 5, 8) 로.

.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

스니펫 예제

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

질문에 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ ΔΔ Δ Δ Δ Δ Δ Δ,float각각의 3개의 요소에서 그것을 치우는 것.

여기 제가 만든 예시가 있습니다.

.grid {
  display: inline-block;
}

.cell {
  display: inline-block;
  position: relative;
  float: left;
  margin: 8px;
  width: 48px;
  height: 48px;
  background-color: #bdbdbd;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-indent: 4px;
  color: #fff;
}

.cell:nth-child(3n) + .cell {
  clear: both;
}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
</div>

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}

<div class="container">
  <div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="item">10</div>
</div>

당신은 여기와 같은 돔 요소로 아이템을 포장해 볼 수 있습니다. 이것으로 많은 CSS를 알고 있을 필요는 없습니다. 단지 좋은 구조를 사용하면 좋은 구조를 가질 수 있습니다.

언급URL : https://stackoverflow.com/questions/29732575/how-to-specify-line-breaks-in-a-multi-line-flexbox-layout