777

내가 사용 인 flexbox 항목 사이의 최소 거리를 설정하는 방법 margin: 0 5px에 .item와 margin: 0 -5px컨테이너에 있습니다. 나를 위해 그것은 해킹처럼 보이지만, 이것을하는 더 좋은 방법을 찾을 수 없습니다.

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

스 니펫 확장

css flexbox

— 사샤 코스
소스

28

그것은 해킹이 아닙니다-아이템을 정렬하기위한 의도 된 방법 중 하나입니다. 그래도 다른 속성이 있습니다. w3.org/TR/css3-flexbox/#alignment

— BoltClock

4

예, 이해합니다 그러나 예를 들어 컨테이너로부터의 거리를 제어 할 수있는 컬럼 갭 속성이 있습니다 : w3.org/TR/css3-multicol/#column-gap

— Sasha Koss

원인은 flexbox의 마진 붕괴입니다. 다른 질문은 [flexbox에서 마지막 마진 붕괴를 어떻게 막을 수 있습니까? ] ( stackoverflow.com/questions/38993170/… )

— Jack Yang

6

CSS 박스 정렬 모듈 레벨 3 에 대한 섹션이 포함되어 상자 사이의 간격 다중 열 요소에 적용 - 플렉스 컨테이너 및 그리드 컨테이너를. 따라서 이것은 다음과 같이 간단합니다 row-gap: 5px.-완료.

— Danield

2

@JohnCarrell 파이어 폭스는 실제로 이미 gap플렉스 컨테이너 ( 캐니 우스 ) 의 속성을 지원합니다

— Danield

427

Flexbox에는 접는 마진이 없습니다.
Flexbox에는 border-spacing테이블 과 비슷한 gap것이 없습니다 (대부분의 브라우저에서 잘 지원되지 않는 CSS 속성 제외 , caniuse )

따라서 원하는 것을 얻는 것이 조금 더 어렵습니다.

내 경험상, 수정하지 않고 :first-child/를 사용하지 않고 :last-child작동 하는 "가장 깨끗한"방법 은 컨테이너와 어린이 flex-wrap:wrap에게 설정 padding:5px하는 것 margin:5px입니다. 그러면 10px각 아동과 각 아동과 부모 사이에 격차 가 생길 것 입니다.

데모

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

스 니펫 확장

— 모든 노동자는 필수적이다
소스

219

이것은 질문과 같은 결과를 얻지 못합니다. 왼쪽과 오른쪽에 10px 들여 쓰기가있을 것이라고 생각합니다. 따라서 원래 질문의 부정적인 마진.

— Chris Nicola

17

어떤 경우에 대한 order속성 집합? :first-child/:last-child예상대로 작동하지 않습니다.

— 구리 아

4

"Flexbox에는 접히는 여백이 없습니다." 매우 통찰력이 있고 분명히 사실이지만 인용을 요청할 수 있습니까?

— chharvey

2

이것은 원래 질문보다 더 나쁜 대답이 아닙니까? 이 방법을 사용하려면 컨테이너 주위에 공간이 있어야하고 거 터링은 항상 짝수 여야합니다.

— limitlessloop

7

@chharvey, 사양에서 w3.org/TR/css-flexbox-1/#item-margins , "인접 플렉스 항목의 마진은 축소하지 않습니다."

— romellem

195

이것은 해킹이 아닙니다. 부트 스트랩과 그리드에서도 동일한 기술이 사용되지만 마진 대신 부트 스트랩은 열에 패딩을 사용합니다.

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

— 루 멜리 스 조지
소스

1

이 방법의 유일한 문제는 배경색과 동일한 높이 항목을 유지하는 것입니다. 을 사용한 절대 위치 지정 height:100%; width:100%은 항목의 패딩 을 무시합니다.

— Steven Vachon

3

여기서 문제는 IE10 및 11에 flex-basis있습니다 . 값은 설명하지 않으므로 box-sizing: border-box패딩이나 테두리가있는 자식이 부모를 오버플로합니다 (이 경우 랩). 출처

— 카슨

18

이 방법에는 또 다른 문제가 있습니다. 이와 같이 여백을 조정하면 페이지 너비가 확장 될 수 있습니다. 데모 : jsfiddle.net/a97tatf6/1

— Nathan Osman

4

나는 이것이 핵이 아니라는 것에 동의하지만, 널리 사용되는 것이 그것이 핵이 아니라는 것을 의미하지는 않습니다. 폴리 필, 임시 보안 패치, 16 진 편집 등 참조

— William

15

물론 이것은 해킹입니다. Bootstrap이이 방법을 사용 한다고해서 이것이 핵 이 아니라는 것을 의미 하지는 않습니다 . 그것은 단지 부트 스트랩이 핵을 사용한다는 것을 의미합니다.

— 마이클 벤자민

108

여러 행을 지원하는 Flexbox 및 CSS 계산

안녕하세요, flexbox를 지원하는 모든 브라우저에서 작동하는 솔루션은 다음과 같습니다. 마이너스 마진이 없습니다.

바이올린 데모

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > div:nth-child(3n) {
  margin-right: 0;
}

.flexbox::after {
  content: '';
  flex: auto;
}

/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > div:nth-child(-n+3) {
  margin-top: 0;
}

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

스 니펫 확장

SASS를 사용하면이 코드가 더 짧을 수 있습니다.

마지막 행에서 왼쪽으로 정렬 된 열 2020.II.11 업데이트

2020.II.14 업데이트 마지막 행에서 여백 하단 제거

— 다리우스 시코 르 스키
소스

13

이 솔루션이 마음에 들지만 마지막 행에 두 항목 만 있으면 실패합니다. 로 인해 항목이 쌓이지 않습니다 justify-content.

— James Brantly

4

두 항목 문제를 해결하려면 justify-content: space-evenly;또는로 변경하십시오 justify-content: space-around;.

— Paul Rooney

6

@PaulRooney 여러 목록이있는 사이트에서 CMS에 의해 목록이 생성되는 경우 항목 수를 항상 알 수있는 것은 아닙니다.

— NinjaFart

1

@ 1.21gigawatts 다른 사람의 코드 / 응답을 임의로 변경하지 마십시오. 대신 자신의 답변을 작성하십시오.

— TylerH

2

@TylerH 그것은 임의적이지 않았습니다. 이 질문은 어떻게 "... flexbox 아이템들 사이의 거리를 설정 하는가"를 물었다. 이 답변에는 거터의 크기가 표시되지 않습니다. 배경색을 설정하면 거터가 표시됩니다. 테두리를 추가하면 마지막 행 아래에 여백이 있습니다.

— 1.21 기가 와트

93

투명한 테두리를 사용할 수 있습니다.

구형 브라우저의 테이블 + 테이블 셀 모델로 대체 할 수있는 플렉스 그리드 모델을 만들려고 할 때이 문제를 고려했습니다. 그리고 기둥 거터의 테두리가 나에게 가장 적합한 선택 인 것 같습니다. 즉, 표 셀에는 여백이 없습니다.

예 :

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

또한 min-width: 50px;flexbox 가 필요 합니다. 플렉스 모델은 고정 flex: none;하고자하는 특정 자식 요소를 다루지 않는 한 고정 크기를 처리하지 않습니다 "flexi". http://jsfiddle.net/GLpUp/4/ 그러나 모든 열과 함께 flex:none;더 이상 플렉스 모델이 아닙니다. 플렉스 모델에 더 가까운 것이 있습니다 : http://jsfiddle.net/GLpUp/5/

따라서 구형 브라우저에서 테이블 셀 대체가 필요하지 않으면 실제로 여백을 정상적으로 사용할 수 있습니다. http://jsfiddle.net/GLpUp/3/

background-clip: padding-box;배경을 사용할 때는 배경이 투명 테두리 영역으로 흐르기 때문에 설정 이 필요합니다.

— hexalys
소스

5

좋은 대답입니다. 여백은 flexbox에서 다르게 사용되므로 (여분의 공간을 흡수하는 것과 같이) 투명한 테두리는 여백과 같은 동작으로

— 둘러싸

4

배경색을 사용하는 경우를 제외하고 배경이 원하는 범위를 초과합니다.

— ahnbizcad

2

@ahnbizcad 배경색이 다른 경우 배경색에 따라 흰색 또는 적절한 색을 사용할 수 있습니다.

— hexalys

27

@ahnbizcad : IE8 지원이 필요하지 않은 경우 더 나은 솔루션입니다.background-clip: padding-box

— Albin

5

Albin의 의견은 여기에 더 많은 투표가 필요합니다! 이것이 가장 좋은 해결책입니다. 투명한 클립과 배경 클립 : 패딩 박스 (및 적절한 가장자리 정렬을 위해 필요한 경우 컨테이너의 음의 여백)는 완벽한 솔루션입니다. IE8은 어쨌든 flexbox를 지원하지 않으므로 백그라운드 클립에 대한 지원이 중요하지 않습니다.

— 브라이언

74

이 솔루션은 여러 행이나 여러 요소가 있더라도 모든 경우에 작동합니다. 그러나 섹션의 수는 첫 번째 행에서 4를 원하고 3은 두 번째 행을 동일하게해야합니다 .4 번째 내용을위한 공간이 비어 있으면 컨테이너가 채우지 않습니다.

우리는 사용하고 있습니다 display: grid; 그리고 그 속성.

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

스 니펫 확장

이 방법의 단점은 Mobile Opera Mini 에서 지원되지 않으며 PC에서는 IE10 이후에만 작동합니다 .

IE11을 포함한 완벽한 브라우저 호환성을 위해 Autoprefixer를 사용하십시오

오래된 답변

오래된 솔루션으로 생각하지 마십시오. 단일 행의 요소 만 원하고 모든 브라우저에서 작동하는 경우 여전히 가장 좋은 방법 중 하나입니다.

이 방법은 CSS 형제 조합 에서 사용되므로 다른 많은 방법으로도 조작 할 수 있지만 조합이 잘못되면 문제가 발생할 수도 있습니다.

.item+.item{
  margin-left: 5px;
}

아래 코드는 트릭을 수행합니다. 이 방법에서는 래퍼 를 제공 margin: 0 -5px;할 필요가 없습니다 #box.

실용 샘플 :

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

스 니펫 확장

— weBBer
소스

마지막 행에 적은 수의 항목이 있어도 그리드 기반 답변이 올바르게 작동 함을 보여주기 위해 편집했습니다. 이 경우에 효과가 있음을 증명합니다. (이 변경이 마음에 들지 않으면 되돌릴 수 있습니다.)

— ToolmakerSteve

이 질문에 따르면 그들은 해킹없이 하위 요소로 공간을 올바르게 채우도록 요청했습니다 grid-template-columns. 따라서 값을 주면 1fr 1fr 1fr 1frdiv를 분할하고 4fractions각 요소의 자식 요소를 채우려 고합니다 fractions. 내 지식으로는 유일한 방법입니다 grid. 내가 대답에서 언급 한 것은 사용자가 div를 4로 나누고 여러 행에도 많은 요소와 함께 사용해야하는 gid경우 도움 이 된다는 것입니다.

— weBBer

69

& > * + *선택기로 사용 하여 flex-gap(한 줄에 대해) 에뮬레이션 할 수 있습니다 .

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}

<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

스 니펫 확장

플렉스 래핑 을 지원해야하는 경우 래퍼 요소를 사용할 수 있습니다.

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>

스 니펫 확장

— 비 동기화
소스

3

깨끗한 용액. 여러 플렉스 자식 요소에 적용됩니다.

— Konrad Gałęzowski

1

이것은 내가 찾던 것이었고 나를 위해 훌륭하게 일했습니다.

— Paul Odeon

그러나 주목할 점은 *운영자가 예상 한대로 특이성을 증가시키지 않는다는 것입니다. 따라서 기존 CSS에 따라 .flex > *선택기에 특정 성을 높이 거나 !important해당 요소에 여백을 적용하는 다른 선택기가있는 경우 규칙에 추가 해야 할 수 있습니다 .

— Paul Odeon

최고의 솔루션 👍

— o01

26

10px항목 사이에 공간 을 설정 하려면 모든 항목 을 설정 .item {margin-right:10px;}하고 마지막 항목에서 재설정 할 수 있다고 가정 해 봅시다..item:last-child {margin-right:0;}

일반 형제 ~또는 다음 +형제 선택기를 사용하여 첫 번째 항목을 제외한 항목에 왼쪽 여백을 설정할 수 있습니다.item ~ .item {margin-left:10px;} 사용 하거나.item:not(:last-child) {margin-right: 10px;}

Flexbox는 매우 영리하여 그리드를 자동으로 다시 계산하고 균등하게 분배합니다.

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}

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

스 니펫 확장

flex wrap 을 허용 하려면 다음 예제를 참조하십시오.

body {
  margin: 0;
}

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

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}

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

스 니펫 확장

— 스티커
소스

6

:last-child줄 끝의 모든 마지막 자식에 영향을 미치지 않기 때문에 항목이 줄 바꿈되면 작동하지 않습니다.

— Flimm

2

@Flimm Flex wrap으로 작업하는 방법을 추가했습니다. 위의 두 번째 부분을 참조하십시오.

— 스티커

가장 좋은 대답은 ... 단순하고 깨끗하며 효율적입니다! 플렉스 랩으로 완벽하게 작업했습니다. 감사합니다

— Matthieu Marcé

16

일반 형제 선택기를 기반으로하고 ~무한 중첩을 허용 하는 솔루션을 찾았습니다 .

실제 예제는이 코드 펜을 참조하십시오

기본적으로 열 컨테이너 내부에서 다른 자식이 앞에 오는 모든 자식은 최상위 여백을 갖습니다. 마찬가지로 모든 행 컨테이너 내에서 다른 행이 앞에 오는 모든 자식은 왼쪽 여백을 얻습니다.

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}

<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>

스 니펫 확장

— 사이먼 엡 캄프
소스

여백이 전체적으로 적용되지 않기 때문에 크기가 다른 항목이 생성됩니다.

— Steven Vachon

작은 화면은 모바일에서 약간 이상하게 보이기 때문에 작은 화면을 처리하기 위해 CSS를 추가해야합니다. 큰 화면에는 .box ~ .box 규칙을 적용하고 작은 화면에서는 .box 클래스를 최대 너비로 설정하십시오. 100 % 및 마진 바닥.

— rhysclay 2016 년

14

사와의 대답에서 시작하여 주변 여백없이 항목 사이에 고정 간격을 설정할 수있는 약간 개선 된 버전이 있습니다.

http://jsfiddle.net/chris00/s52wmgtq/49/

Safari "-webkit-flex"버전도 포함되어 있습니다.

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

— 크리스
소스

2

이것은 본질적으로 질문에 주어진 예와 같지 않습니까?

— ford

10

#ChromDevSummit 에 따르면 Flexbox 의 gap속성 구현 이 있지만 현재 (2019 년 11 월 14 일) Firefox에서만 지원 되지만 곧 Chrome에서 구현해야합니다.

라이브 데모

Chrome에 도착하면 답변을 업데이트하겠습니다.

— 엘리야 코헨
소스

9

래핑 및 고정 너비 열에 이것을 사용했습니다. 여기서 핵심은calc()

SCSS 샘플

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

전체 코드 펜 샘플

— 베이 코 예거
소스

2

이렇게하면 첫 번째 항목과 마지막 항목 사이에 여백이 추가되어 OP에서 음수 여백을 사용할 수 없습니다.

— herman

2

Flexbox는 IE 11의 "flex"항목 내부에서 calc ()를 지원하지 않습니다.

— Adam Šipický

항상 사용하십시오. 직접적인 자녀들에게도 국경이 필요한지 상상해보십시오

— Andris

9

가요 성 용기 와 -x (네거티브) 여백 과 플렉스 항목 과 X (양극) 마진 또는 패딩 원하는 시각적 결과에 모두 우위 : 플렉스 항목은이 배의 고정 간격 만 사이를 서로.

플렉스 아이템에 여백을 사용하든 패딩을 사용하든간에 그것은 단순히 선호의 문제 인 것처럼 보입니다.

이 예에서는 고정 간격을 유지하기 위해 플렉스 항목의 크기를 동적으로 조정합니다.

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

— 팀
소스

3

미안, 이해 못했어요 질문에 직접 언급되지 않은 새로운 답변은 무엇입니까?

— 사용자

첫째, 기존 답변이 하나만 언급하기 때문에 flex-item의 여백과 패딩이 원하는 결과로 이어진다는 것을 요약하고 싶습니다. 두 번째로, 나는 플렉스 아이템 자체를 스케일링하여 갭이 유지되는 예를 제시하고 싶었습니다.

— Tim

이 효과를 보여주는 코드 펜 예제가 있습니다. codepen.io/dalgard/pen/Dbnus

— pedalpete

8

결국 그들은 gap속성을 flexbox에 추가 할 것 입니다. 그때까지는 이미 gap속성이 있고 단일 행이있는 CSS 그리드를 사용할 수 있습니다 . 여백을 다루는 것보다 좋습니다.

— 올리 윌리엄스
소스

여기에서 토론하십시오 : github.com/w3c/csswg-drafts/issues/1696-CSS 그리드, Flexbox 및 CSS 열에서 이름 지정을 간소화합니다.

— Frank Lämmer

6

CSS `gap`속성 :

현재 일부 브라우저에서 작동하는 다중 열, flexbox 및 그리드 레이아웃을위한 새로운 gapCSS 속성 이 있습니다! ( 링크 1을 사용할 수 있습니까 , 링크 2를 참조하십시오 ).

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

스 니펫 확장

현재로서는 Firefox에서만 슬프게 작동합니다. 에서 '실험용 웹 플랫폼 기능 사용'을 사용 설정하면 현재 Chrome에서 작동합니다about:flags .

— 플림
소스

5

내 솔루션에서 Flexbox를 사용 justify-content하여 부모 요소 (컨테이너)의 flex-basis속성을 사용했으며 항목 속성 내부에 여백을 지정했습니다 . 아래 코드 스 니펫을 확인하십시오.

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}

<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>

스 니펫 확장

— iClusterDev
소스

5

flexbox를 사용하면 거터를 만드는 것은 특히 포장이 관련된 경우에 어려움이 있습니다.

질문에 표시된 것처럼 음수 여백을 사용해야합니다 .

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... 또는 다른 답변에 표시된 것처럼 HTML을 변경하십시오 .

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... 또는 다른 것.

어쨌든 flexbox는 적어도 " flex-gap"기능을 제공하지 않기 때문에 작동하기 위해서는 추악한 해킹이 필요합니다 .

그러나 거터 문제는 CSS 그리드 레이아웃으로 간단하고 쉽습니다.

그리드 사양은 항목과 컨테이너 사이의 공간을 무시하면서 그리드 항목 사이에 공간을 만드는 속성을 제공합니다. 이러한 속성은 다음과 같습니다.

grid-column-gap
grid-row-gap
grid-gap (위의 두 속성에 대한 속기)

최근이 사양은 CSS Box Alignment Module 을 준수하도록 업데이트되어 모든 Box 모델에서 사용할 수있는 일련의 정렬 속성을 제공합니다. 따라서 속성은 다음과 같습니다.

column-gap
row-gap
gap (속기)

그러나 모든 그리드 지원 브라우저 가 새로운 속성을 지원하는 것은 아니므로 아래 데모에서 원래 버전을 사용합니다.

또한 항목과 컨테이너 사이에 간격이 필요한 경우 컨테이너 padding에서 제대로 작동합니다 (아래 데모의 세 번째 예 참조).

사양에서 :

10.1. 하수구 다음 row-gap, column-gap및 gap 특성

row-gap및 column-gap속성 (및 gap그리드 컨테이너 지정된 때 약칭)은, 격자의 행 및 열 사이 그리드 제본 정의한다. 이 구문은 CSS Box Alignment 3 §8 Gaps Between Boxs에 정의되어 있습니다.

이러한 특성의 영향은 영향을받는 그리드 선이 두께를 얻은 것처럼 나타납니다. 두 그리드 선 사이의 그리드 트랙은이를 나타내는 거터 사이의 공간입니다.

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}

<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

스 니펫 확장

추가 정보:

— 마이클 벤자민
소스

4

왜 이렇게하지 않습니까?

.item + .item {
    margin-left: 5px;
}

인접 형제 선택기를 사용하여 .item첫 번째 요소 a를 제외한 모든 요소 를 제공합니다 margin-left. flexbox 덕분에 동일한 너비의 요소까지 만들 수 있습니다. 이것은 수직으로 배치 된 요소와 margin-top물론 가능합니다.

— 틸 더스
소스

8

플렉스 항목이 항상 단일 행에있는 한 작동합니다. 줄 바꿈이 허용되면 충분하지 않을 수 있습니다.

— Nick F

4

자식 요소에 클래스를 설정하지 않아도되는 해결책은 다음과 같습니다.

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

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

용법:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

위에 주어진 인라인 예제 외에도 일반 플렉스 행과 열에 동일한 기술을 사용할 수 있으며 간격이 4px가 아닌 클래스로 확장 될 수 있습니다.

— MK10
소스

4

그런 경우에는 종종 + 연산자를 사용합니다

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

스 니펫 확장

— Wutzebaer
소스

3

가장 쉬운 방법은 백분율을 사용하고 여백이 너비를 계산하는 것입니다.

이것은 당신이 당신의 예제를 사용하는 곳에서 이런 식으로 끝나는 것을 의미합니다.

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

그것은 당신의 가치가 모든 사람에게 좋지 않을 수도있는 너비를 기반으로한다는 것을 의미합니다.

— lukefrake
소스

방금이 솔루션을 발견 했으므로 매우 좋습니다. 적어도 내 경우에는 효과가 있습니다 ( codepen.io/rishatmuhametshin/pen/XXjpaV ).

— rishat

2

다음은 유연한 상자를 사용하여 간격이 완료된 카드 UI 요소 그리드입니다.

나는 iffy 결과로 패딩과 여백을 조작하여 수동으로 카드 간격을 두는 것에 좌절했습니다. 그래서 내가 찾은 CSS 속성의 조합은 다음과 같습니다.

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}

<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

스 니펫 확장

이것이 현재, 미래의 사람들에게 도움이되기를 바랍니다.

— 빌드 팩스
소스

업데이트 :이 간격은 특정 정렬 (예 : 가운데, 왼쪽 등)이 필요한 모바일 렌더링 HTML 요소에 효과적입니다. 모바일 개발에 플렉스 박스를 사용하고 있다면 순전히 마진 기반 정렬로 전환하는 것이 불편하다는 것을 알았습니다.

— buildpax

2

Columnify-N 개의 열에 대한 솔로 클래스

Flexbox 및 SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox와 CSS

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}

<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

스 니펫 확장

JSFiddle 에서 재생하십시오 .

— zurfyx
소스

1

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}

<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

스 니펫 확장

— 아모 우
소스

1

.item + .item선택기에서 두 번째와 일치하도록 사용하십시오 ..item

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

스 니펫 확장

— 앤드류 루카
소스

1

가정 :

줄 바꿈으로 4 열 그리드 레이아웃을 원합니다.
항목 수는 반드시 4의 배수 일 필요는 없습니다

1 번째, 5 번째, 9 번째 항목을 제외한 모든 항목에 왼쪽 여백을 설정하십시오. 각 항목에 고정 너비를 설정하십시오. 왼쪽 여백이 10px 인 경우 각 행은 4 개 항목 사이에 30px 여백을 가지며 항목의 백분율 너비는 다음과 같이 계산할 수 있습니다.

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

이것은 flexbox의 마지막 행과 관련된 문제에 대한 적절한 해결책입니다.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

스 니펫 확장

— 살만 A
소스

1

이 작업을 수행 할 수있는 멋지고 깔끔한 CSS 전용 방법이 있습니다 ( "더 나은"것으로 간주 될 수 있음).

여기에 게시 된 모든 답변 중에서 calc ()를 성공적으로 사용하는 답변 만 발견했습니다 (Dariusz Sikorski). 그러나 "마지막 행에 2 개의 항목 만 있으면 실패합니다"라는 문제가 해결 된 솔루션은 없었습니다.

이 솔루션은 마이너스 마진에 대한 대안으로 OP의 문제를 해결하고 다리우스에게 제기 된 문제를 해결합니다.

노트:

이 예제는 3 열 레이아웃 만 보여줍니다.
그것은 사용 calc()- 브라우저가 수학 그것을 원하는 방식으로 할 수 있도록 100%/3 (33.3333 % 그냥 잘 작동해야하지만)을 , 그리고 (1em/3)*2 (.66em도 잘 작동해야하지만) .
::after열보다 적은 요소가있는 경우 마지막 행을 채우는 데 사용 합니다.

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}

<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

스 니펫 확장

또한 https://codepen.io/anon/pen/rqWagE에서

— 이퀄 스
소스

1

새 속성을 사용할 수 있습니다 gap. 이 기사 에서 찾은 설명 과 추가 정보를 붙여 넣습니다.

CSS 그리드 레이아웃에는 얼마 동안 간격 (이전에는 그리드 간격)이있었습니다. 하위 요소 주위의 간격 대신 포함 요소의 내부 간격을 지정하면 간격이 많은 일반적인 레이아웃 문제를 해결합니다. 예를 들어 간격이 있으면 하위 요소의 여백에 대해 걱정할 필요가 없으며 포함 요소의 가장자리 주위에 불필요한 공백이 생깁니다.

불행히도 현재 FireFox만이 플렉스 레이아웃의 간격을 지원합니다.

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

section {
  width: 30vw;
  
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  
  &[flex] {
    display: flex;
    flex-wrap: wrap;
  }
  
  margin-bottom: 3rem;
}

.tag {
  color: white;
  background: hsl(265 100% 47%);
  padding: .5rem 1rem;
  border-radius: 1rem;
}

button {
  display: inline-flex;
  place-items: center;
  gap: .5rem;
  background: hsl(265 100% 47%);
  border: 1px solid hsl(265 100% 67%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.25rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<section>
  <h1>Grid</h1> 
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>
<br>
<section flex>
  <h1>Flex</h1>
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>

스 니펫 확장

— 안드레스 폴
소스

gap답변에 이미 추천되었습니다 stackoverflow.com/a/58041749/2756409 또한, 이것은 CSS가 아닙니다.

— TylerH

0

모든 경우에 작동하지는 않지만 유연한 자식 너비 (%)가 있고 행 당 항목 수를 알고 있으면 다음을 사용하여 필요한 요소의 여백을 매우 명확하게 지정할 수 있습니다 nth-child 선택기 .

그것은 "더 나은"의 의미에 크게 좌우됩니다. 이 방법은 하위 요소 또는 음수 요소에 대한 추가 래퍼 마크 업이 필요하지 않지만 둘 다 대신 사용할 수 있습니다.

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}

<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>

스 니펫 확장

— jnmrobinson
소스

응답하지 않습니다. 고정 폭 부모에만 작동합니다.

— Green

1

OP는 반응 형 솔루션을 요구 하지 않으며 해당 예제는 고정 너비를 사용합니다. % 값을 사용한다고 가정하면 항목이 백분율로 설정되는 부모의 크기에 적응하기 때문에 반응이 쉽다고 주장하기 쉽습니다.

— jnmrobinson 1

0

나는 이전에 같은 문제를 겪었고 이에 대한 답을 발견했습니다. 나중에 참조 할 수 있도록 다른 사람들을 도울 수 있기를 바랍니다.

답이 짧으면 자녀의 플렉스 항목에 테두리를 추가하십시오. 그런 다음 원하는대로 flex-item 사이의 여백을 지정할 수 있습니다. 스 니펫에서는 설명을 위해 검은 색을 사용하며 원하는 경우 '투명'을 사용할 수 있습니다.

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>

스 니펫 확장

— 조정
소스

0

박스 컨테이너의 네거티브 마진 트릭은 훌륭하게 작동합니다. 다음은 주문, 줄 바꿈 및 그렇지 않은 작업에 잘 작동하는 또 다른 예입니다.

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}

<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>

스 니펫 확장

— 치즐 라이
소스

flexbox 항목 사이의 거리를 설정하는 더 좋은 방법

여러 행을 지원하는 Flexbox 및 CSS 계산

오래된 답변

CSS gap속성 :

Columnify-N 개의 열에 대한 솔로 클래스

Flexbox 및 SCSS

Flexbox와 CSS

CSS `gap`속성 :