CSS flex, 첫 번째 줄에 하나의 항목을 표시하고 다음 줄에 두 개의 항목을 표시하는 방법

CSS flex, 첫 번째 줄에 하나의 항목을 표시하고 다음 줄에 두 개의 항목을 표시하는 방법

---

이것은 매우 간단한 질문이지만, 플렉스 컨테이너에 3 개의 항목을 2 개 행으로 표시 할 수 없습니다. 하나는 첫 번째 행에, 다른 하나는 두 번째 행에 표시합니다. 플렉스 컨테이너의 CSS입니다. 분명히 한 줄에 3 개의 항목을 표시합니다. :)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

가로 flex-wrap설정된 경우 wrap3 개 항목이 열에 표시됩니다. 여러 줄에 컨테이너 항목을 표시하려면 포장 설정이 필요하다고 생각했습니다. 첫 번째 컨테이너 항목에 대해이 CSS를 시도하여 첫 번째 행 전체를 차지하려고했지만 작동하지 않았습니다.

div.intro_item_1 {
  flex-grow: 3;
}

"CSS-Tricks"의 지침을 따랐 지만 어떤 명령 조합을 사용해야하는지 잘 모르겠습니다. 내가 이것에 의아해하기 때문에 어떤 도움이라도 매우 환영받을 것입니다.

---

다음과 같이 할 수 있습니다.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}

<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

다음은 데모입니다. http://jsfiddle.net/73574emn/1/

이 모델은 하나의 "행"이 가득 차면 줄 바꿈에 의존합니다. 첫 번째 항목 flex-basis을 100 %로 설정 했으므로 첫 번째 행을 완전히 채 웁니다. 에 특별한주의flex-wrap: wrap;

---

Nico O의 대답이 맞습니다. 그러나 이것은 Internet Explorer 10-11 및 Firefox에서 원하는 결과를 얻지 못합니다.

IE의 경우

.flex > div
{
   flex: 1 0 50%;
}

...에

.flex > div
{
   flex: 1 0 45%;
}

트릭을하는 것 같습니다. 이유를 묻지 마십시오. 더 이상 설명하지 않았지만 IE가 테두리 상자를 렌더링하는 방법과 관련이있을 수 있습니다.

In the case of Firefox I solved it by adding

display: inline-block;

to the items.

참고URL : https://stackoverflow.com/questions/26086515/css-flex-how-to-display-one-item-on-first-line-and-two-on-the-next-line