260

플렉스 박스를 사용하여 페이지와 함께 크기가 조정되는 8 개의 항목을 표시하고 있습니다. 항목을 두 개의 행으로 나누려면 어떻게합니까? (행당 4 개)?

관련 내용은 다음과 같습니다.

(아니면 jsfiddle 선호하는 경우 - http://jsfiddle.net/vivmaha/oq6prk1p/2/ )

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

스 니펫 확장

html css flexbox

— 비벡 마하 라지
소스

16

[업데이트]이 질문은 반응이 좋지 않은 디자인에 기초한 것입니다. 아래 답변 중 하나를 사용하여 자신을 발견하면 조심하십시오. 좋은 디자인에서는 더 넓은 화면에 더 많은 아이템을, 더 작은 화면에 더 적은 아이템을 갖게됩니다. 모든 화면 크기에 대해 4 개의 항목을 강요하면 좁은 화면 너비에서만 매력적으로 보일 것입니다.

— Vivek Maharajh

380

당신은 flex-wrap: wrap컨테이너에 있어 . 기본값 인 nowrap( source ) 를 무시하기 때문에 좋습니다 . 이 항목에서 그리드 형성하기 위해 포장하지 않는 이유는 몇 가지 사례를 .

이 경우 주요 문제는 flex-grow: 1플렉스 아이템에 있습니다.

이 flex-grow속성은 실제로 플렉스 항목의 크기를 지정하지 않습니다. 그 작업은 컨테이너 ( source ) 에 여유 공간을 분배하는 것 입니다. 따라서 화면 크기가 아무리 작아도 각 항목은 라인의 여유 공간의 비례 부분을받습니다.

보다 구체적으로, 컨테이너에는 8 개의 플렉스 아이템이 있습니다. 을 사용 flex-grow: 1하면 각 라인에 여유 공간의 1/8이 수신됩니다. 아이템에 내용이 없으므로 너비가 0으로 줄어들고 줄 바꿈되지 않습니다.

해결책은 항목의 너비를 정의하는 것입니다. 이 시도:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

스 니펫 확장

함께 flex-grow: 1에 정의 flex속기에 대한 필요가 없습니다 flex-basis실제로는 여백에 한 줄에 세 가지 항목을 초래할 것 25 %을 할 수는.

이후 flex-grow행의 여유 공간을 소모합니다, flex-basis단지 랩을 적용 할 충분한해야합니다. 이 flex-basis: 21%경우을 사용하면 여백을위한 충분한 공간이 있지만 다섯 번째 항목을위한 충분한 공간은 없습니다.

— 마이클 벤자민
소스

1

나는 그것이 나를 위해 일했기 때문에 이것을 좋아하지만“많은 공간”으로 인해 조금 불안해집니다. 이 "추정"이 실패 할 수있는 작은 창이나 상황이 있습니까?

— Jackson

1

어떤 상황입니까? 대부분의 레이아웃에는 문제를 일으킬 수있는 극단적 인 경우가 있습니다. 이러한 경우는 일반적으로 발생하지 않거나 거의 발생하지 않기 때문에 비용-편익 분석을 거치게됩니다. 예를 들어 위의 솔루션에서 매우 큰 여백을 넣으면 레이아웃이 깨질 수 있습니다. 이것이 문제라면 질문에 게시해야합니다. @ 잭슨

— 마이클 벤자민

2

"매우 큰 여백을 넣으면 레이아웃이 깨질 수 있습니다"이것이 피하고 싶은 시나리오의 예입니다. 나는 실용성에 관심이 없습니다. 완벽에 대한 내 숭배를 즐겁게하십시오. 더 정확한 방법이 있습니까?

— Jackson

27

다음을 사용할 수도 있습니다flex: 1 0 calc(25% - 10px);

— MarkG

2

좋은 답변입니다! margin: 2%;작은 장치 / 해상도에서 상자가 새로운 줄로 점프하는 것을 방지하기 위해 고정 픽셀 번호 대신 사용하는 작은 개선 사항이 있습니다 . 일반적인 공식은 (100 - (4 * box-width-percent)) / 8다른 상자 너비에 대한 %

— thomaspsk

104

.child요소에 너비를 추가하십시오 . 나는 개인적으로 margin-left항상 행 당 4를 원한다면 백분율을 사용 합니다.

데모

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}

— 여자들
소스

좋은 생각. 나는이 아이디어를 약간의 편집으로 사용했습니다. jsfiddle.net/vivmaha/oq6prk1p/6

— Vivek

1

아 이것은 실제로 내 문제를 해결하지 못합니다. 예를 보려면 여기를 참조하십시오 : jsfiddle.net/vivmaha/oq6prk1p/7 . 나는 여백에 백분율을 사용할 자유가 없다. 너비는 고정되어 있어야합니다. 즉, 선택한 마진 23 %는 고정 마진을 고려하지 않기 때문에 작동하지 않습니다.

— Vivek

3

예, calc가 해결합니다! 'calc (100 % * (1/4)-10px-1px)'. jsfiddle.net/vivmaha/oq6prk1p/9

— Vivek

24

그렇다면 여전히 flex의 사용법은 무엇입니까?

— twicejr

반응 형 디자인은 어떻습니까? 우리는 아이에게 고정 폭을 붙이고 싶지 않습니다

— 촛대

40

여기 또 다른 apporach가 있습니다.

이 방법으로도 달성 할 수 있습니다.

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

샘플 : https://codepen.io/capynet/pen/WOPBBm

그리고 더 완벽한 샘플 : https://codepen.io/capynet/pen/JyYaba

— 캐피
소스

1

자녀가 4 명 미만인 경우는 어떻습니까? 내가 그 빈 빈 공간을 싫어하는 아이가 반응하지 않는 ...

— candlejack

Muddasir Abbas의 다른 대답은 플렉스 설정 만 사용하므로 더 깨끗한 솔루션이라고 생각합니다.

— 앤드류 코스터

17

나는 거터에 음의 여백과 calc를 사용하여 이렇게 할 것입니다.

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-left: -10px;
}

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

데모 : https://jsfiddle.net/9j2rvom4/

대체 CSS 그리드 방법 :

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

데모 : https://jsfiddle.net/jc2utfs3/

— 샤노 머프
소스

14

<style type="text/css">
.parent{
    display: flex;
    flex-wrap: wrap;
}
.parent .child{
    flex: 1 1 25%;
}
</style>    
<div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>

도움이 되길 바랍니다. 자세한 내용은이 링크를 따라갈 수 있습니다

— 무 다시 르 압바스
소스

4

나는이 예제가 더 많은 뼈대이며 @dowomenfart 보다 이해하기 쉽다고 생각합니다.

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

이것은 고기를 똑바로 자르면서 동일한 너비 계산을 수행합니다. 수학은 쉬운 방법과 em는 IS 새로운 표준 인해 확장 성 및 이동 편의에.

— 조셉 조
소스

3

em은 실제로 새로운 표준이 아닙니다. 엉덩이에 통증이있을 수 있으며 디자이너는 EM을 염두에두고 디자인하지 않습니다.

— Danny van Holten

2

.parent-wrapper {
	height: 100%;
	width: 100%;
	border: 1px solid black;
}
	.parent {
	display: flex;
	font-size: 0;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-bottom: -10px;
}
	.child {
	background: blue;
	height: 100px;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: calc(25% - 10px);
}
	.child:nth-child(even) {
	margin: 0 10px 10px 10px;
	background-color: lime;
}
	.child:nth-child(odd) {
	background-color: orange; 
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
</head>
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

스 니펫 확장

;)

— 마테우스 마 노소 바르 슈치
소스

1

가능한 경우 코드를 게시하는 대신 OP 질문에 답변하는 이유에 대한 컨텍스트를 추가하십시오.

— d219

당신 justify-content: space-evenly;이 prent에 추가 하면, 그들은 잘 정렬되고 당신은 calc아이에 대해 할 필요가 없습니다 . 그래도 감사합니다!

— Mattijs

0

플렉스 랩 + 마이너스 마진

왜 플렉스 대 display: inline-block?

Flex는 요소 크기 조정으로 더 많은 유연성을 제공합니다
내장 된 흰색 간격 축소 ( 부모에 맞지 않는 너비가 정확히 33 % 인 3 개의 인라인 블록 div 참조 )

왜 마이너스 마진?

가장자리 경우 (예 : 열의 첫 번째 요소)에 SCSS 또는 CSS-in-JS를 사용하거나 기본 여백을 설정하고 나중에 외부 여백을 제거합니다.

이행

https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
    <div class="container">
        <div class="elementContainer">
            <div class="element">
            </div>
        </div>
        ...
    </div>
</div>

:root {
  --columns: 2;
  --betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}

.outerContainer {
    overflow: hidden; /* Hide the negative margin */
}

.container {
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--betweenColumns));
}

.elementContainer {
    display: flex; /* To prevent margin collapsing */
    width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
    margin: var(--betweenColumns);
}

.element {
    display: flex;
    border: 1px solid red;
    background-color: yellow;
    width: 100%;
    height: 42px;
}

— zurfyx
소스

-12

를 사용하지 않는 다른 방법이 calc()있습니다.

// 4 PER ROW
// 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins...
.child {
  margin: 0 2% 0 2%;
  width: 21%;
}

// 3 PER ROW
// 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 / 2 = 1.66666)
.child {
  margin: 0 1.66666% 0 1.66666%;
  width: 30%;
}

// and so on!

그것이 전부입니다. 더 심미적 인 크기를 얻기 위해 치수로 멋지게 얻을 수 있지만 이것이 아이디어입니다.

— wle8300
소스

6

나는 이것을 테스트하지 않았지만 CSS 구문이 잘못되었습니다 (CSS 값은 인용되지 않으며 선언은 세미콜론으로 끝나야합니다). 현재 형식으로는 작동하지 않습니다.

— Nick F

Flexbox : 행당 4 개 항목

대체 CSS 그리드 방법 :

플렉스 랩 + 마이너스 마진

이행