지정된 간격을 사용하여 행의 플렉스 항목 정렬

Question

두 개가 포함되어 있습니다<div>的行，每行都有display: flex;，每个行中都包含几个子<div>项目。在下面的示例中，您可以看到在第一行中有2个项目（绿色的盒子标记为“item”），它们的比例为6/3。在第二行中有4个项目，它们的比例为2/2/2/3.

이제 각 행의 마지막 항목에 flex: 3;）能够完美对齐，除非我添加一个gap: X px;.

을 갖고 싶습니다.

---

이 gap，以便具有相同宽度的项目根据它们的flex속성 정렬을 계산에 어떻게 포함하나요? 또는 다음 코드 조각에서 그래픽으로 단순화합니다. 빨간색 테두리를 어떻게 정렬합니까?

으아악 으아악

Answer 1

가능한 많은 솔루션 중 하나는 일부 항목을 다른 flex div에 래핑하는 것입니다.
flex-item 클래스가 포함된 아래 코드를 참조하세요.

으아아아 으아아아