내가 사용 인 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>

스 니펫 확장

답변

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>

스 니펫 확장

답변

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

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

답변

여러 행을 지원하는 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 업데이트 마지막 행에서 여백 하단 제거

답변

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

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

예 :

.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;배경을 사용할 때는 배경이 투명 테두리 영역으로 흐르기 때문에 설정 이 필요합니다.

답변

이 솔루션은 여러 행이나 여러 요소가 있더라도 모든 경우에 작동합니다. 그러나 섹션의 수는 첫 번째 행에서 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>

스 니펫 확장

답변

& > * + *선택기로 사용 하여 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>

스 니펫 확장

답변

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>

스 니펫 확장