CSS flexbox에서 래핑 할 요소를 지정하는 방법은 무엇입니까?

CSS flexbox에서 래핑 할 요소를 지정하는 방법은 무엇입니까? [복제]

---

이 질문에는 이미 답변이 있습니다.

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

나는 이것이 flexbox 표준의 일부라고 생각하지 않지만 특정 요소 뒤에 줄 바꿈을 제안하거나 강요하는 트릭이 있습니까? 다른 페이지 크기에 응답하고 추가 마크 업없이 목록을 다르게 래핑하고 싶습니다. 예를 들어 다음 줄에 고아 메뉴 항목을 두지 않고 메뉴 중간에 침입합니다.

시작 HTML은 다음과 같습니다.

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

그리고 CSS :

ul {
    display: flex;
    flex-wrap: wrap;
}

나는 다음과 같은 것을 좋아합니다 :

/* inside media query targeting width */
li:nth-child(2n) {
    flex-break: after;
}

보다 완전한 설정은 jsfiddle을 참조하십시오 : http://jsfiddle.net/theazureshadow/ww8DR/

---

컨테이너에서이를 설정하여이를 수행 할 수 있습니다.

ul {
    display: flex;
    flex-wrap: wrap;
}

그리고 아이에서 당신은 이것을 설정했습니다 :

li:nth-child(2n) {
    flex-basis: 100%;
}

이것은 다른 계산 전에 자식이 컨테이너 너비의 100 %를 구성하게합니다. 컨테이너가 충분한 공간이없는 경우에 대비하여 컨테이너가 깨지도록 설정되었으므로이 자식 전후에 공간이 부족합니다.

---

==========================

전체 옵션 목록이있는 기사는 다음과 같습니다. https://tobiasahlin.com/blog/flexbox-break-to-new-row/

편집 : 이것은 그리드로 정말하기 쉽습니다 : https://codepen.io/anon/pen/mGONxv?editors=1100

==========================

나는 당신이 특정 항목을 깰 수 있다고 생각합니다. 아마도 최선의 방법은 중단 점에서 플렉스 기준을 변경하는 것입니다. 그래서:

ul {
  flex-flow: row wrap;
  display: flex;
}

li {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

@media (min-width: 40em;){
li {
  flex-basis: 30%;
}

샘플은 다음과 같습니다. http://cdpn.io/ndCzD

=============================================

EDIT: You CAN break after a specific element! Heydon Pickering unleashed some css wizardry in an A List Apart article: http://alistapart.com/article/quantity-queries-for-css

EDIT 2: Please have a look at this answer: Line break in multi-line flexbox

@luksak also provides a great answer

---

There is part of the spec that sure sounds like this... right in the "flex layout algorithm" and "main sizing" sections:

Otherwise, starting from the first uncollected item, collect consecutive items one by one until the first time that the next collected item would not fit into the flex container’s inner main size, or until a forced break is encountered. If the very first uncollected item wouldn’t fit, collect just it into the line. A break is forced wherever the CSS2.1 page-break-before/page-break-after [CSS21] or the CSS3 break-before/break-after [CSS3-BREAK] properties specify a fragmentation break.

From http://www.w3.org/TR/css-flexbox-1/#main-sizing

It sure sounds like (aside from the fact that page-breaks ought to be for printing), when laying out a potentially multi-line flex layout (which I take from another portion of the spec is one without flex-wrap: nowrap) a page-break-after: always or break-after: always should cause a break, or wrap to the next line.

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

.child {
  flex-grow: 1;
}

.child.break-here {
  page-break-after: always;
  break-after: always;
}

However, I have tried this and it hasn't been implemented that way in...

• Safari (up to 7)
• Chrome (up to 43 dev)
• Opera (up to 28 dev & 12.16)
• IE (up to 11)

It does work the way it sounds (to me, at least) like in:

• Firefox (28+)

Sample at http://codepen.io/morewry/pen/JoVmVj.

I didn't find any other requests in the bug tracker, so I reported it at https://code.google.com/p/chromium/issues/detail?id=473481.

But the topic took to the mailing list and, regardless of how it sounds, that's not what apparently they meant to imply, except I guess for pagination. So there's no way to wrap before or after a particular box in flex layout without nesting successive flex layouts inside flex children or fiddling with specific widths (e.g. flex-basis: 100%).

This is deeply annoying, of course, since working with the Firefox implementation confirms my suspicion that the functionality is incredibly useful. Aside from the improved vertical alignment, the lack obviates a good deal of the utility of flex layout in numerous scenarios. Having to add additional wrapping tags with nested flex layouts to control the point at which a row wraps increases the complexity of both the HTML and CSS and, sadly, frequently renders order useless. Similarly, forcing the width of an item to 100% reduces the "responsive" potential of the flex layout or requires a lot of highly specific queries or count selectors (e.g. the techniques that may accomplish the general result you need that are mentioned in the other answers).

At least floats had clear. Something may get added at some point or another for this, one hopes.

---

Setting a min-width on child elements will also create a breakpoint. For example breaking every 3 elements,

flex-grow: 1;
min-width: 33%; 

If there are 4 elements, this will have the 4th element wrap taking the full 100%. If there are 5 elements, the 4th and 5th elements will wrap and take each 50%.

Make sure to have parent element with,

flex-wrap: wrap

---

The only thing that appears to work is to set flex-wrap: wrap; on the container and them somehow make the child you want to break out after to fill the full width, so width: 100%; should work.

If, however, you can't stretch the element to 100% (for example, if it's an <img>), you can apply a margin to it, like width: 50px; margin-right: calc(100% - 50px).

참고URL : https://stackoverflow.com/questions/19574851/how-to-specify-an-element-after-which-to-wrap-in-css-flexbox