programing

Flexbox 항목 간의 거리를 설정하려면 어떻게 해야 합니까?

goodsources 2023. 5. 31. 15:52
반응형

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>

gap속성:

이제 새로운 브라우저에서 작동하는 다중 열, 플렉스박스 및 그리드 레이아웃을 위한 새로운 CSS 속성이 있습니다! (링크 1; 링크 2 참조).의 줄임말입니다.row-gap그리고.column-gap.

#box {
  display: flex;
  gap: 10px;
}

row-gap속성:

플렉스박스 및 그리드 레이아웃 모두에 대한 CSS 속성을 사용하여 행 사이에 간격을 만들 수 있습니다.

#box {
   display: flex;
   row-gap: 10px;
}

column-gap속성:

다중 열, 플렉스박스 및 그리드 레이아웃에 대한 CSS 속성을 사용하여 열 사이에 간격을 만들 수 있습니다.

#box {
  display: flex;
  column-gap: 10px;
}

예:

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

2020년2 이전에는 Flexbox와 유사한 기능이 없었습니다.border-spacing 아래의 입니다.아래의 답변은 그때의 답변입니다. 이, 제.gap속성이 이 역할을 수행하며 이 응용 프로그램에 권장됩니다.

Flexbox에는 접히는1 마진이 없습니다.그러므로, 당신이 요구하는 것을 성취하는 것은 조금 더 어렵습니다.

제경상험, 지가않는하 "장깨한끗"를사용하지 " 입니다.:first-child/:last-child그리고 수정 없이 작동합니다.flex-wrap:wrap설정합니다.padding:5px에 그리고 너위에이컨테위에▁the.margin:5px아이들에게그것은 생산할 것입니다.10px각 자녀와 부모 사이의 간격.

JS Fidle 데모

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

부트스트랩과 그 그리드 레이아웃 시스템에서도 이와 동일한 기술이 사용됩니다.하만지 에 에신대.margin은 부스랩사를 사용합니다.padding그것의 기둥들을 위하여.

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

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

사용할 수 있습니다.& > * + * 로서.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>

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

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

예.

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

은 또한필니다합이 하다는 것에 하세요.min-width: 50px;플렉스 박스용. flex: none;됩니다."flexi"http://jsfiddle.net/GLpUp/4/ 하지만 모든 열은 함께flex:none;더 이상 Flex 모델이 아닙니다.다음은 Flex 모델에 더 가까운 내용입니다. http://jsfiddle.net/GLpUp/5/

따라서 이전 브라우저의 테이블 셀 폴백이 필요하지 않은 경우에는 일반적으로 마진을 사용할 수 있습니다.http://jsfiddle.net/GLpUp/3/

정background-clip: padding-box;배경을 사용할 때 필요합니다. 그렇지 않으면 배경이 투명 테두리 영역으로 흐르기 때문입니다.

이 솔루션은 행이 여러 개이거나 요소 수가 여러 개인 경우에도 모든 경우에 사용할 수 있습니다.그러나 섹션의 개수는 첫 번째 줄에 4개, 두 번째 줄에 3개를 원하는 것과 같아야 합니다. 그러면 4번째 콘텐츠의 공간이 비어 컨테이너가 채워지지 않습니다.

우리는 및 그 속성을 사용하고 있습니다.

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: repeat(4,1fr);
  /* Decide the number of columns(4) and size(1fr | 1 Fraction | you can use pixels and other values also) */
}

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

이 방법의 단점은 모바일 Opera Mini가 지원되지 않는다는 것이며 PC에서는 IE10 이후에만 작동합니다.

IE11을 포함한 전체 브라우저 호환성에 대한 참고 사항은 자동 수정기를 사용하십시오.

오래된 답변 오래된 솔루션이라고 생각하지 마십시오. 한 줄의 요소만 원하는 경우에도 여전히 최고 중 하나이며 모든 브라우저에서 작동합니다.

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

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

아래의 코드가 효과를 발휘할 것입니다.이 방법에서는 포장지에 줄 필요가 없습니다.

사용자를 위한 작업 샘플:

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

예들어다니, 합정설를다니를 하고 싶다면,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>

gap 모든 브라우저Chrome Internet에서 flexbox용으로 됩니다.

은 결국그다것추입다니가할음을을 할 것입니다.gap속성을 flexbox에 입력합니다. CSS를 할 수 .gap하나의 행만 있으면 됩니다.마진을 처리하는 것보다 더 좋습니다.

저는 일반적인 형제자매 선택기에 기반한 해결책을 찾았습니다.~무한 중첩을 허용합니다.

작업 예제는 이 코드 펜을 참조

기본적으로 열 컨테이너 안에서는 다른 자식이 앞에 오는 모든 자식이 맨 위 여백을 갖습니다.마찬가지로, 모든 행 컨테이너 안에는 다른 행 컨테이너 앞에 있는 모든 자식이 왼쪽 여백을 가집니다.

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

#ChromeDevSummit에 따르면 다음의 구현이 있습니다.gapFirefox 및 Cromium 기반 브라우저의 Flexbox 속성입니다.

라이브 데모입니다.

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});}

}

전체 코데펜 샘플

-x(음) 여유가 있는 플렉스 용기와 x(양) 여유 또는 패딩이 있는 플렉스 항목은 모두 원하는 시각적 결과로 이어집니다.플렉스 항목은 서로 간에만 2배의 고정 간격이 있습니다.

플렉스 아이템에 마진을 사용할지 패딩을 사용할지는 단순히 선호도의 문제로 보입니다.

이 예에서는 고정 간격을 유지하기 위해 유연 항목의 크기가 동적으로 조정됩니다.

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

하여 Flexbox를 justify-contentelement(이며, 저는 위요컨소에(컨테이너) 했습니다.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;
  margin: 0 -5px;
}

또는 HTML을 변경합니다(다른 답변 참조).

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

아니면 다른 것.

"flexbox flexbox"를 때문에 합니다.flex-gap기능(적어도 지금은).

그러나 CSS 그리드 레이아웃을 사용하면 거터 문제가 간단하고 쉽습니다.

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

  • grid-column-gap
  • grid-row-gap
  • grid-gap의 두 (위의두속성약의자약)자▁(()

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

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

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

과 용기 이 필요한 또물용사간필격요면다하이이의기품한과,,▁also,padding용기에서 올바르게 작동합니다(아래 데모의 세 번째 예 참조).

사양에서:

거터:.1. 거터: 더row-gap,column-gap,그리고.gap

그row-gap그리고.column-gap 그 속및성)gap단축), 그리드 컨테이너에 지정된 경우 그리드 행과 그리드 열 사이의 홈통을 정의합니다.이 구문은 CSS Box Alignment 3 §8 Gaps Between Box에 정의되어 있습니다.

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

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

추가 정보:

숙박업소인 새부산사수있다습니를 할 수 .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>

이렇게 하는 게 어때요?

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

이것은 인접 형제 선택기를 사용하여 모두 제공합니다..itema 요소를 제외한 요소들, 번첫요제외요한소를amargin-leftFlexbox 덕분에 동일한 폭의 요소가 생성됩니다.이것은 수직으로 위치한 요소와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 이외의 간격에 대한 클래스로 확장할 수 있습니다.

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

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

이를 위한 가장 쉬운 방법은 백분율을 사용하여 마진이 당신의 폭을 집계하도록 허용하는 것입니다.

이것은 만약 당신이 당신의 예를 사용한다면 당신은 결국 이런 것을 갖게 된다는 것을 의미합니다.

#box {
   display: flex;
}

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

즉, 모든 사람에게 좋지는 않지만 너비를 기준으로 값이 지정됩니다.

다음은 유연한 상자를 사용하여 공백이 완성된 카드 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>

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

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

그냥 사용하기.item + .item second 번두터록선택에서기도하일치부째▁to▁second▁in..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>

제가 해킹을 발견한 이유는 제 자신이 정말 필요하기 때문입니다.

/* 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>

여기 포스트 그리드가 있습니다. 유연한 성장 범주도 있습니다.마음에 드실 겁니다.코데펜 참조

가정:

  • 래핑이 있는 4열 그리드 레이아웃을 원합니다.
  • 품목 수가 반드시 4의 배수일 필요는 없습니다.

첫 번째, 다섯 번째, 아홉 번째 등을 제외한 모든 항목에 왼쪽 여백을 설정하고 각 항목에 고정 너비를 설정합니다.왼쪽 여백이 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()를 성공적으로 사용한 답변을 하나만 찾았습니다.그러나 "마지막 행에 항목이 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 에서도 확인할 수 있습니다.

다음 방정식을 사용할 수 있습니다.

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 0;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex:after {
  content: "";
  max-width: calc(100% * var(--col) / 12 - var(--gap));
  width: 100%;
}
@media (max-width: 960px) {
  .flex:after {
    max-width: calc(100% * var(--colTablet) / 12 - var(--gap));
  }
}
@media (max-width: 680px) {
  .flex:after {
    max-width: calc(100% * var(--colMobile) / 12 - var(--gap));
  }
}
.flex .item {
  max-width: calc(100% * var(--col) / 12 - var(--gap));
  width: 100%;
}
@media (max-width: 960px) {
  .flex .item {
    max-width: calc(100% * var(--colTablet) / 12 - var(--gap));
    margin-bottom: 1rem;
  }
  .flex .item:last-child {
    margin-bottom: unset;
  }
}
@media (max-width: 680px) {
  .flex .item {
    max-width: calc(100% * var(--colMobile) / 12);
  }
}
.flex .item .card {
  background: #eee;
  text-align: center;
  padding: 2rem;
}
<div class="flex container" style="--col: 3; --colTablet: 6; --colMobile: 12; --gap: 2%">
  <div class="item" style="--col: 3; --colTablet: 6; --colMobile: 12; --gap: 2%">
    <div class="card">
      <h2>Hello world</h2>
    </div>
  </div>
  <div class="item" style="--col: 3; --colTablet: 6; --colMobile: 12; --gap: 2%">
    <div class="card">
      <h2>Hello world</h2>
    </div>
  </div>
  <div class="item" style="--col: 3; --colTablet: 6; --colMobile: 12; --gap: 2%">
    <div class="card">
      <h2>Hello world</h2>
    </div>
  </div>
</div>

저는 앞서 같은 문제를 발견했고, 이에 대한 답을 우연히 발견했습니다.나중에 참조할 수 있도록 다른 사람들에게 도움이 되기를 바랍니다.

긴 대답은 짧게 하고, 아이의 유연성에 테두리를 추가합니다.그런 다음 원하는 항목에 대한 플렉스 간격 사이의 여백을 지정할 수 있습니다.스니펫에서 설명 목적으로 검은색을 사용하는데, 원한다면 '투명'을 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/20626685/how-do-i-set-distance-between-flexbox-items

반응형

'programing' 카테고리의 다른 글

워크시트 기반 확인란 선택 여부 확인  (0) 2023.05.31
equal?, eql?, === 및 ==의 차이점은 무엇입니까?  (0) 2023.05.31
Eclipse 오류: 필요한 .class 파일에서 간접적으로 참조됩니까?  (0) 2023.05.31
Ruby에서 파일 경로에서 확장자 없이 파일 이름을 가져오는 방법  (0) 2023.05.31
Ruby로 스위치 문을 작성하는 방법  (0) 2023.05.31

'programing'의 다른글

  • 현재글Flexbox 항목 간의 거리를 설정하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바