플렉스 컨테이너의 요소가 줄 바꿈되지 않습니다.

Question

플렉스 컨테이너에 블럭 요소를 삽입하려고하면 인라인 블럭 인 것처럼 동일한 줄에 모두 머물러 있습니다.

두 개의 첫 번째 div가 같은 줄에 있고 마지막 줄이 두 번째 줄에 있어야합니다. 슬프게도, 그것은 작동하지 않는 것 같습니다.

누구든지 아이디어가 있으십니까? 부모의

Answer 1

플렉스 용기의 초기 설정은 flex-wrap: nowrap입니다. 즉, 플렉스 항목은 한 줄에 있어야합니다.

flex-wrap: wrap으로 기본값을 무시할 수 있습니다.

플렉스 (flex) 레이아웃에서 플렉스 아이템의 값은 무시됩니다.

---

display: flex 또는 display: inline-flex와 원소이다 플렉스 용기 안, flex formatting context 정한다. block formatting context과 유사하지만 차이점이 있습니다.

하나의 차이점은 flex 컨테이너의 하위 항목이 display 속성을 무시한다는 점입니다.

또 다른 차이점은 플렉스 컨테이너에서 여백이 붕괴되지 않으며 float 및 clear 속성이 아무런 영향을 미치지 않는다는 것입니다.

플렉스 컨테이너에는 몇 가지 기본 설정도 있습니다.그 중 :

• justify-content: flex-start - 플렉스 항목은 행의 시작에 스택됩니다
• flex-shrink: 1 - 플렉스 항목을 축소 할 수있다 컨테이너
• align-items: stretch 오버 플로우하지 않습니다 - 플렉스 항목은 다루 확대됩니다 컨테이너
• flex-direction: row의 간 크기 - 플렉스 항목은 수평
• flex-wrap: nowrap가 정렬됩니다 - 플렉스 항목이 한 줄에 머물 강제

마지막 두 항목에 유의하십시오.

플렉스 아이템은 연속으로 나열되며 줄 바꿈을 할 수 없습니다.

두 번째 플렉스 항목을 첫 번째 줄에, 세 번째 항목을 두 번째 줄에 두려면 컨테이너가 멀티 라인이되도록 flex-wrap: wrap으로 지정하십시오. 또한

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.box { 
 
    flex: 0 0 45%; 
 
    height: 50px; 
 
    margin: 5px; 
 
    background-color: lightgreen; 
 
    border: 1px solid #ccc; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

, 당신은 플렉스 컨테이너, 인라인 표시되지 display: flex display: inline-flex을 사용합니다. 이것들은 display: inline-block과 display: block에 필적합니다.

Answer 2

• <div style="display: flex"> 
   
      <div style="display: inline-block"> 
   
      This is an inline block element 
   
      </div> 
   
      <div style="display: inline-block"> 
   
      This is an inline block element 
   
      </div> 
   
      <div style="display: block"> 
   
      This is a block element 
   
      </div> 
   
  </div>

  사용 flex-wrap:wrap 기본적으로 flex-wrap는 동일한 크기의 두 인라인 블록 요소를 분할 자식 nowrap

• 사용 flex-basis:50%,이기 때문이다.

이 기사에 대한 인 flexbox에 대한 자세한 정보를 참조하십시오 A Complete Guide to Flexbox

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-wrap: wrap 
 
} 
 
.flex div { 
 
    flex: 0 50%; /*change to 1 50% to see the difference */ 
 
    border: 1px solid black; 
 
    padding: 10px 
 
}

<div class="flex"> 
 
    <div> 
 
    This is an inline block element 
 
    </div> 
 
    <div> 
 
    This is an inline block element 
 
    </div> 
 
    <div> 
 
    This is a block element 
 
    </div> 
 
</div>