cs 플렉스박스에 래핑할 요소를 지정하는 방법?

cs 플렉스박스에 래핑할 요소를 지정하는 방법?

이 질문에는 이미 다음과 같은 답변이 있습니다.

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

닫힘4년 전에.

아직 플렉스박스 규격에 포함되지 않은 것 같은데, 특정 요소 뒤에 랩핑을 제안하거나 강제하는 요령이 있을까요?다른 페이지 크기에 대응하고 별도의 마크업 없이 목록을 다르게 랩핑하여 다음 줄에 고아가 된 메뉴 항목이 있는 대신 메뉴 중간에 끼어드는 것을 방지하고자 합니다.

시작 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%;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

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

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

따라서 다른 계산을 수행하기 전에 어린이가 용기 너비의 100%를 구성하게 됩니다.공간이 부족할 경우 용기가 깨지도록 설정되어 있기 때문에 이 아이의 전후에 깨집니다.따라서 빈 div 요소를 사용하여 요소 전후에 요소 간에 랩을 강제할 수 있습니다.

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

다음은 전체 옵션 목록이 포함된 기사입니다. https://tobiasahlin.com/blog/flexbox-break-to-new-row/

편집: 이제 Grid를 사용하면 정말 쉬워집니다. 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

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

편집: 특정 요소 뒤에 깨질 수 있습니다!헤이든 피커링은 A List Apart 기사에서 몇 가지 CSS 마법사를 풀었습니다.http://alistapart.com/article/quantity-queries-for-css

편집 2: 다음 답변을 보십시오: 다중 라인 플렉스박스의 줄 바꿈

@luksak 또한 훌륭한 답을 제공합니다.

이런 소리가 나는 건 확실해요"flex layout algorithm" 및 "메인 사이징" 섹션에서 바로 다음과 같은 정보를 얻을 수 있습니다.

그렇지 않으면 처음 수집되지 않은 항목부터 시작하여 다음 수집된 항목이 플렉스 용기의 내부 메인 크기에 맞지 않을 때까지 또는 강제 중단이 발생할 때까지 연속 항목을 하나씩 수집합니다.처음에 수집하지 않은 항목이 맞지 않을 경우 해당 항목만 라인으로 수집합니다.CSS2.1 page-break-before/page-break-after [CSS21] 또는 CSS3 break-before/break-fter [CSS3-BREAK] 속성이 조각화 깨짐을 지정하는 경우에는 중단이 강제됩니다.

출처 http://www.w3.org/TR/css-flexbox-1/ #메인 주소

잠재적으로 다중 라인 플렉스 레이아웃을 배치할 때(스펙의 다른 부분에서 가져온 것은 인쇄를 위한 것이어야 한다는 사실과는 별개로) 다음과 같이 들립니다. flex-wrap: nowrap) a) apage-break-after: always아니면break-after: always 끊어지거나 다음 줄로 감겨야 합니다.

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

.child {
  flex-grow: 1;
}

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

하지만 저는 이것을 시도해 보았지만, 그것은 그런 방식으로 시행된 적이 없습니다.

• 사파리(최대 7개)
• 크롬 (최대 43 dev)
• 오페라 (최대 28 dev & 12.16)
• IE(최대 11개)

이것은 (적어도) 다음과 같이 들리는 방식으로 작동합니다.

• 파이어폭스 (28+)

샘플은 http://codepen.io/morewry/pen/JoVmVj .

버그 추적기에서 다른 요청이 발견되지 않아 https://code.google.com/p/chromium/issues/detail?id=473481 에 보고했습니다.

하지만 이 주제는 메일링 리스트에 올라갔고, 어떻게 들리든 간에, 그들이 의도했던 것은 분명히 아닙니다. 다만 페이지에 대한 것이 아닐까 생각합니다.따라서 플렉스 차일드 내부에 연속적인 플렉스 레이아웃을 내포하거나 특정 폭(예: 플렉스 차일드)을 만지작거리지 않고는 플렉스 레이아웃에서 특정 박스의 앞뒤를 랩핑할 방법이 없습니다.flex-basis: 100%).

물론 Firefox 구현을 사용하여 작업하는 것은 이 기능이 매우 유용하다는 저의 의심을 확인시켜 주는 것이기 때문에 매우 짜증납니다.수직 정렬이 개선된 것 외에도, 이러한 부족함은 다양한 시나리오에서 유연한 레이아웃의 유용성을 상당 부분 입증해 줍니다.행 랩이 수행되는 지점을 제어하기 위해 중첩된 플렉스 레이아웃으로 래핑 태그를 추가해야 하는 것은 HTML과 CSS의 복잡성을 증가시키고 슬프게도 렌더링을 자주 합니다.order쓸모 없는.마찬가지로 항목의 너비를 다음으로 강제합니다.100%플렉스 레이아웃의 "응답형" 잠재력을 줄이거나 매우 구체적인 수많은 쿼리 또는 카운트 선택기(예: 다른 답변에서 언급된 필요한 일반적인 결과를 달성할 수 있는 기술)가 필요합니다.

부유물은 를 가지고 .clear이를도 있을 것입니다 합니다. 이를 위해 언젠가는 뭔가가 추가될 수도 있을 것입니다, 희망합니다.

하위 요소에 최소 너비를 설정하면 중단점도 생성됩니다.예를 들어, 3개의 요소를 하나도 빠짐없이 깨트리는 경우,

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

만약 4개의 요소가 있다면, 이것은 4번째 요소 랩이 100%를 차지하게 됩니다.만약 5개의 요소가 있다면, 4번째와 5번째 요소는 각각 50%씩 감아서 가져가게 됩니다.

부모 요소가 있어야 합니다.

flex-wrap: wrap

작동하는 것처럼 보이는 것은flex-wrap: wrap;용기 위에 그리고 그들은 어떻게든 당신이 탈출하고 싶은 아이를 만들어 전체 폭을 채웁니다.width: 100%;효과가 있을 겁니다

그러나 요소를 100%로 늘일 수 없는 경우(예를 들어 다음과 같은 경우)<img>), 다음과 같이 마진을 적용할 수 있습니다.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