Nice programing

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

nicepro 2020. 10. 2. 23:17
반응형

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

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

안녕하세요, 아래는 flexbox를 지원하는 모든 브라우저에 대한 작업 솔루션입니다. 마이너스 마진, 해킹, 해결 방법, 순수한 CSS가 없습니다.

바이올린 데모

   
.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-bottom: 10px;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}
<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

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

이전 브라우저 용 테이블 + 테이블 셀 모델로 대체 할 수있는 플렉스 그리드 모델을 구축하는 동안이 문제를 고려했습니다. 그리고 기둥 거터의 테두리는 나에게 가장 적합한 선택으로 보였습니다. 즉, 테이블 셀에는 여백이 없습니다.

예 :

.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;배경을 사용할 때 설정 이 필요합니다. 그렇지 않으면 배경이 투명한 테두리 영역으로 흘러 들어갑니다.

이것은 여러 행 또는 요소 수가 있더라도 모든 경우에 작동합니다.

우리는 사용하고 있습니다 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>

플렉스 랩 을 허용 하려면 다음 예제를 참조하십시오.

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>

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

작동 예제는이 코드 펜을 참조하십시오.

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

.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>

sawa의 답변에서 넘어 가면 주변 여백없이 항목 사이에 고정 간격을 설정할 수있는 약간 개선 된 버전이 있습니다.

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>

랩핑 및 고정 너비 열에 이것을 사용했습니다. 여기서 핵심은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});}

}

전체 Codepen 샘플

가요 성 용기 와 -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;
}

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

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

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

최근에 모든 상자 모델에서 사용할 정렬 속성 집합을 제공하는 CSS 상자 정렬 모듈 을 준수하도록 사양이 업데이트되었습니다 . 따라서 속성은 다음과 같습니다.

  • column-gap
  • row-gap
  • gap (속기)

그러나 모든 Grid 지원 브라우저 가 최신 속성을 지원하는 것은 아니므로 아래 데모에서 원래 버전을 사용하겠습니다.

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

사양에서 :

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

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

이러한 속성의 효과는 영향을받는 그리드 선이 두께를 획득 한 것과 같습니다. 두 그리드 선 사이의 그리드 트랙은이를 나타내는 거터 사이의 공간입니다.

.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>

추가 정보:

이렇게하지 않는 이유 :

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

인접한 형제 선택자를 사용하여 .item첫 번째 요소를 제외한 모든 요소를 a margin-left. flexbox 덕분에 똑같이 넓은 요소가 생성됩니다. margin-top물론 수직으로 배치 된 요소 및을 사용하여 수행 할 수도 있습니다 .

다음은 자식 요소에 클래스를 설정할 필요가없는 내 솔루션입니다.

.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 이외의 간격을위한 클래스로 확장 할 수 있습니다.

내 솔루션에서 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>

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

#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>

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 에서 플레이 하세요 .

이 작업을 수행하는 가장 쉬운 방법은 백분율을 사용하고 여백이 너비를 집계하도록 허용하는 것입니다.

이것은 당신이 당신의 예를 사용하는 경우 이와 같은 결과를 낳는다는 것을 의미합니다.

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 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>

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

여기에 이미지 설명 입력

나는 패딩과 여백을 조작하여 카드 간격을 수동으로 조정하는 것에 실망했습니다. 그래서 다음은 제가 매우 효과적인 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>

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

.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>

가정 :

  • 줄 바꿈이있는 4 개의 기둥 그리드 레이아웃이 필요합니다.
  • 항목 수는 반드시 4의 배수가 아닙니다.

1st, 5th, 9th 항목 등을 제외한 모든 항목에 왼쪽 여백을 설정합니다. 각 항목에 고정 너비를 설정합니다. 왼쪽 여백이 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>

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

여기에 게시 된 모든 답변 중에서 calc ()를 성공적으로 사용하는 답변 만 찾았습니다 (Dariusz Sikorski 작성). 그러나 다음과 같이 포즈를 취했을 때 "그러나 마지막 행에 2 개 항목 만 있으면 실패합니다."확장 된 솔루션이 없습니다.

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

메모:

  • 이 예는 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

이제 일부 브라우저에서 작동하는 flexbox에 대한 새로운 gapCSS 속성 이 있습니다! ( 링크 1 , 링크 2 ).

#box {
  display: flex;
  width: 100px;
  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에서만 작동합니다.

모든 경우에 작동하지는 않지만 유연한 자식 너비 (%)가 있고 행당 항목 수를 알고 있다면 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>

나는 이전에 같은 문제를 만났고 이에 대한 답을 우연히 발견했습니다. 향후 참조를 위해 다른 사람들에게 도움이되기를 바랍니다.

긴 대답 짧게, 자녀의 플렉스 아이템에 테두리를 추가하십시오. 그런 다음 플렉스 아이템 사이의 여백을 원하는대로 지정할 수 있습니다. 스 니펫에서는 삽화 목적으로 검은 색을 사용하고, 원하는 경우 '투명'을 사용할 수 있습니다.

#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>

박스 컨테이너의 마이너스 마진 트릭은 잘 작동합니다. 다음은 주문, 포장 및 그렇지 않은 작업으로 잘 작동하는 또 다른 예입니다.

.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>

나는 이것이 내 자신이 정말로 필요하기 때문에 해킹을 발견했습니다.

/* grid */
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container::after, /* this makes sure odd element goes left and not space between */
.item {
  content:"";
  width: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

/* extra styling - not important */
.item {
  height: 100px;
  background: #787878;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

여기에 멋진 플렉스 성장 카테고리가있는 포스트 그리드도 있습니다. 나는 당신이 그것을 좋아할 것이라고 생각합니다. Codepen 참조

플렉스 아이템의 간격은 용기에 고정 된 방향으로 만 설정했습니다. 예를 들어 플렉스 컨테이너가 왼쪽에서 오른쪽으로 흐르도록 설정되어 있으면 ( flex-direction:row) 마지막을 제외하고 자식에 오른쪽 여백 만 설정합니다 .

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

.flex-lr > *:not(:last-child){
    margin-right:5px;
}

이것은 언뜻보기에 작동하는 것처럼 보일 수 있지만 기다려주십시오! justify-content다른 모든 값이 이미 자체적으로 공간을 배포하고 있기 때문에이 start또는 다른 값으로 설정된 경우에는이 작업을 수행해서는 안됩니다 end.

항목이 포장되면 어떻게됩니까? 그런 다음 적절한 교차 축 측면에도 공간을 추가해야합니다. 그러나 컨테이너가 자식을 감싸도록 허용하는지 어떻게 알 수 있습니까? 그리고 wrap-reverse어떨까요?

이 모든 고려 사항으로 인해 이것은 사소한 작업이 아니며 작은 단계를 넘어서는 것이 필요하다고 생각했습니다.

내 접근 방식은 flexbox의 래퍼 역할을하는 간단한 클래스 집합을 기반으로합니다. 다음과 같은 이점이 있습니다.

  1. 모든 공급 업체 접두사를 단일 지점에서 "중앙 집중화"하고 그 점을 잊어 버릴 수 있습니다.
  2. Flexbox 속성을 단일 클래스로 그룹화하거나 Flexbox에서 사용하는 일부 단어의 이름을 바꿀 수 있습니다. 때로는 그다지 직관적이지 않은 것처럼 보일 수 있습니다 (IMHO).
  3. 이러한 클래스를 사용하면 의존하는 플렉스 속성 값을 기반으로 다른 클래스를 작성할 수 있습니다. 예를 들어 흐름 방향, 교차 축 정렬, 래핑 등을 기반으로 간격을 설정할 수 있습니다.

나는이 모든 것을 가지고 놀면서 flexbox가 어떻게 작동하는지 이해하고 flexbox가 얼마나 멋진 지 깨닫기 위해 flexbox 디자이너를 구축했습니다. 아래 링크를 따라 자유롭게 사용하십시오.

http://algid.com/Flex-Designer

따라서 아래에서 내가 사용하는 클래스와 한 흐름 방향에 대한 간격 (여백) 유용성을 찾아 요약 할 것입니다. 다른 사람을 추론하거나 위에 제공된 링크에서 찾을 수 있습니다. 명확성을 위해 여기에서 공급 업체 접두어를 생략했습니다.

/* Flex container definition */
.flex-lr{display:flex; flex-direction:row;}
.flex-tb{display:flex; flex-direction:column;}
.flex-rl{display:flex; flex-direction:row-reverse;}
.flex-bt{display:flex; flex-direction:column-reverse;}

/* Wrapping */
.wrap{flex-wrap:wrap;}
.nowrap{flex-wrap:nowrap;}
.wrap-rev{flex-wrap:wrap-reverse;}

/* Main axis alignment */
.align-start{justify-content:flex-start;}
.align-end{justify-content:flex-end;}
.align-center{justify-content:center;}
.align-between{justify-content:space-between;}
.align-around{justify-content:space-around;}
.align-evenly{justify-content:space-evenly;}

/* Cross axis alignment */
.cross-align-start{align-items:flex-start;}
.cross-align-end{align-items:flex-end;}
.cross-align-center{align-items:center;}
.cross-align-stretch{align-items:stretch;}
.cross-align-baseline{align-items:baseline;}

/* Cross axis alignment when content is wrapped */
.wrap-align-start{align-content:flex-start;}
.wrap-align-end{align-content:flex-end;}
.wrap-align-center{align-content:center;}
.wrap-align-stretch{align-content:stretch;}
.wrap-align-between{align-content:space-between;}
.wrap-align-around{align-content:space-around;}

/* Item alignment */
.item-cross-align-start{align-self:flex-start;}
.item-cross-align-end{align-self:flex-end;}
.item-cross-align-center{align-self:center;}
.item-cross-align-stretch{align-self:stretch;}
.item-cross-align-baseline{align-self:baseline;}
.item-cross-align-auto{align-self:auto;}

그리고 이제 우리를 여기에 가져온 것 : 항목 사이의 공간 :

/* Flow margin (left to right) */
.flex-lr.fm-0 > *:not(:last-child){margin-right:0;}
.flex-lr.fm-1 > *:not(:last-child){margin-right:3px;}
.flex-lr.fm-2 > *:not(:last-child){margin-right:7px;}
.flex-lr.fm-3 > *:not(:last-child){margin-right:15px;}
.flex-lr.fm-4 > *:not(:last-child){margin-right:32px;}

/* Cross axis */
.flex-lr.wrap.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-bottom:0;}
.flex-lr.wrap.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-bottom:3px;}
.flex-lr.wrap.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-bottom:7px;}
.flex-lr.wrap.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-bottom:15px;}
.flex-lr.wrap.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-bottom:32px;}

/* wrap reverse */
.flex-lr.wrap-rev.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-top:0;}
.flex-lr.wrap-rev.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-top:3px;}
.flex-lr.wrap-rev.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-top:7px;}
.flex-lr.wrap-rev.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-top:15px;}
.flex-lr.wrap-rev.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-top:32px;}

마지막으로 마크 업은 다음과 같습니다.

<div class="flex-lr cross-align-center fm-3">
    <div>
        Some content here...
    </div>
    <div>
        A bit more stuff here...
    </div>
    <div class="flex-tb fm-3">
        <div>
            Now vertical content
        </div>
        <div>
            etc.
        </div>
    </div>
</div>

이것이 제가 코드라고 부르는 것입니다.

참고 URL : https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items

반응형

'Nice programing' 카테고리의 다른 글

iOS 8에서 작동하지 않는 위치 서비스  (0) 2020.10.02
Cache-Control : max-age = 0과 no-cache의 차이점은 무엇입니까?  (0) 2020.10.02
해시없이 새 URL로 주소 표시 줄 업데이트 또는 페이지 다시로드  (0) 2020.10.02
기존 소스 코드를 GitHub로 가져 오기  (0) 2020.10.02
줄 번호를 적게 (GNU)로 표시하는 방법은 무엇입니까?  (0) 2020.10.02

'Nice programing'의 다른글

  • 현재글Flexbox 항목 사이의 거리를 설정하는 더 나은 방법

관련글

댓글

티스토리툴바