Programing

여러 줄로 된 flexbox 레이아웃에서 줄 바꿈을 지정하는 방법은 무엇입니까?

lottogame 2020. 5. 12. 07:57
반응형

여러 줄로 된 flexbox 레이아웃에서 줄 바꿈을 지정하는 방법은 무엇입니까?

여러 줄 flexbox에서 줄 바꿈을 만드는 방법이 있습니까?

예를 들어이 CodePen의 각 세 번째 항목 다음에 깰 수 있습니다.

.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>

그러나 그것은 추악하고 의미 론적이지 않습니다. 대신, 플렉스 컨테이너 안에 의사 요소를 생성 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의사 요소 만있을 수 있습니다 . 즉, 줄 바꿈을 2 번만 수행 할 수 있습니다.

이를 해결하기 위해 플렉스 컨테이너 대신 플렉스 아이템 내에 의사 요소를 생성 할 수 있습니다. 이렇게하면 2로 제한되지 않지만 의사 요소는 플렉스 항목이 아니므로 줄 바꿈을 강요 할 수 없습니다.

그러나 운 좋게도 CSS Display L3 가 도입했습니다 display: contents(현재 Firefox 37에서만 지원됨).

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

따라서 display: contents플렉스 컨테이너의 자식에 적용 하고 각 랩의 내용을 추가 래퍼로 래핑 할 수 있습니다 . 그런 다음 flex 항목은 추가 래퍼 및 하위 요소의 의사 요소가됩니다.

.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>

또한,에 따라 세분화 플렉스 레이아웃 과 CSS 분열 , 인 flexbox을 사용하여 휴식을 강제 허용 break-before, break-after또는 CSS 2.1 별칭 :

.item:nth-child(3n) {
  page-break-after: always; /* CSS 2.1 syntax */
  break-after: always; /* New 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;
  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>

flexbox의 강제 줄 바꿈은 아직 널리 지원되지 않지만 Firefox에서는 작동합니다.

내 관점 에서 플렉스 항목 간의 <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에서 테스트되었습니다.

@Oriol 슬프게도 년 10 월 2017로, 훌륭한 대답이 없다, 둘 display:contents, 둘 다 page-break-after광범위하게 지원되고, 더 나은이 아닌 다른 플레이어를 지원하는 파이어 폭스에 관하여 말했다, 내가 가지고 올이 다음 내가 더 잘 하드보다 더 고려하는 "해킹" 페이지를 모바일 친화적으로 만들기가 매우 어렵 기 때문에 매 3 번째 요소마다 중단 된 부분을 코딩해야합니다.

말했듯이 그것은 해킹이며 단점은 아무것도 추가하지 않아도 많은 요소를 추가해야한다는 것입니다.하지만 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>. W3Schools는 BR시를 쓰기위한 것임을 제안 할 수 있지만 (광산이 곧 나옵니다), 스타일을 변경하여 100 % 너비 블록 요소로 작동하여 컨텐츠를 다음 줄로 넘길 수 있습니다. 'br'이 휴식을 제안하면 나에게 hr또는 100 %를 사용하는 것보다 나에게 더 적합 div하고 HTML을 더 읽기 쉽게 만듭니다.

<br>줄 바꿈이 필요한 곳에 삽입하고 다음과 같이 스타일을 지정하십시오.

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

적절한 또는 로 설정 하여 미디어 쿼리로 비활성화<br> 할 수 있습니다 (예제를 포함했지만 주석 처리했습니다).display:blocknone

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 미만으로 창 크기를 조정하십시오.

추가 마크 업을 추가하지 않아도되는 다른 가능한 솔루션은 요소를 분리하기 위해 동적 여백을 추가하는 것입니다.

예제의 경우 3n + 2 요소 (2, 5, 8)를 calc()추가 margin-left하고 margin-right에 추가 하여이 작업을 수행 할 수 있습니다.

.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>

나는 여기에 몇 가지 대답을 시도했지만 그중 아무것도 효과가 없었습니다. 아이러니하게도, 가장 효과적인 대안 <br/>은 시도 할 수 있는 것입니다.

<div style="flex-basis: 100%;"></div>

또는 당신은 또한 할 수 있습니다 :

<div style="width: 100%;"></div>

새 줄을 원하는 곳에 배치하십시오. 인접 제품에서도 작동하는 것 같지만 인접 제품 <span>과 함께 사용하고 <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>

여기와 같은 dom 요소로 항목을 래핑 할 수 있습니다. 이것으로 당신은 좋은 구조를 가진 많은 CSS를 알 필요가 없습니다.

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

반응형

'Programing' 카테고리의 다른 글

Python에서 Requests 라이브러리를 사용하여 "User-agent"보내기  (0) 2020.05.12
Curl을 통해 파일에 지정된 데이터로 POST 요청 보내기  (0) 2020.05.12
백 슬래시로 쉘 명령을 시작하는 이유는 무엇입니까?  (0) 2020.05.12
PHP의 비동기 셸 실행  (0) 2020.05.12
정규식 내에서 변수를 사용하는 방법은 무엇입니까?  (0) 2020.05.12

'Programing'의 다른글

  • 현재글여러 줄로 된 flexbox 레이아웃에서 줄 바꿈을 지정하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바