色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

計算彈性基礎時考慮差距

CSS
張吉惟2年前7瀏覽0評論

我試圖使用gap來指定網格系統中彎曲項目之間的間隙，但是遇到了一個主要的缺點。好像你在用flex-grow的時候:0；/flex-shrink:0；結合填充整個可用寬度的gap和flex-basis值(即，具有flex的三列:0 0 33.3333%；)，列會溢出它們的父容器，因為間距不占flex: 0 0 33.3333%指定的固定寬度。

類似于框大小:邊框-框；，有什么方法可以指示渲染引擎在確定這些列的寬度時應該減去間隙？

演示:

.row {
    display: flex;
    gap: 30px;
    border: 2px solid red;
}

.col {
    flex: 0 0 33.3333%;
    background: teal;
    border: 2px solid #004D4D;
    color: white;
    font-weight: 700;
    padding: 50px;
    text-align: center;
}

:root {
    font-family: sans-serif;
}

* {
    box-sizing: border-box;
}

<h2>With gap:</h2>

<div class="row">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>

<h2>Without gap:</h2>

<div class="row" style="gap:0;">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>

你提到的公式有效...你可以使用CSS變量來創建一個可重用的網格系統。我和一個朋友想到了這個:

.flex {
  --cols: 3;
  --gap: 30px;
  display: flex;
  gap: var(--gap);
}

.flex-child {
  flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}

@media (max-width: 1000px) {
  .flex{
    --cols: 2;
  }
}

@media (max-width: 750px) {
  .flex{
    --cols:1;
  }
}

所以你需要改變的只是變量- cols和- gap https://codepen.io/pyledigital/pen/mdWmjQb

這是另一種不太優雅的快速破解方法。與UPinar的答案相似，它改變了外部flex容器。此處右邊為負邊距(這可能會導致其他布局問題！).這& quot解決方案& quot正在使用收縮0。此外，它還可以與纏繞帶一起工作。

我同意，這不應該是如此復雜和黑客。也許我們遺漏了什么？我還覺得這并不是我希望在gap屬性中找到的真正想要的框大小邊框行為。

flex和gap應該是免費的，比如:畫三個容器，每個占寬度的三分之一，并且在它們之間留有一些空間。AFAIK gap以這種方式處理CSS網格和CSS列。

.flex {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.flex.gap {
   gap: var(--space-s);
   margin-right: calc(-1 * var(--space-s));
}

.col {
    flex-basis: 33.3333%;
    background: teal;
    border: 2px solid #004D4D;
    color: white;
    font-weight: 700;
    padding: 50px;
    text-align: center;
}

.flex.gap .col {
    flex-basis: calc(33.3333% - var(--space-s));
    background: teal;
    border: 2px solid #004D4D;
    color: white;
    font-weight: 700;
    padding: 50px;
    text-align: center;
}

:root {
    font-family: sans-serif;
    --space-s: 1rem;
}

* {
    box-sizing: border-box;
}

<h2>With gap</h2>

<div class="flex gap">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
    <div class="col">
        4
    </div>
    <div class="col">
        5
    </div>
    <div class="col">
        6
    </div>
</div>

<h2>Without gap</h2>

<div class="flex">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
    <div class="col">
        4
    </div>
    <div class="col">
        5
    </div>
    <div class="col">
        6
    </div>
</div>

添加padding-right時:calc(var(-gap-space)* 2)；到父容器。在子容器使用100%父容器寬度之前，將計算父容器寬度。在子容器中使用其寬度之前，您需要更改父容器的寬度。

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  margin: 0;
  background-color: bisque;
  display: grid;
  place-content: center;
}


:root{
  --gap-space:30px;
  font-family: sans-serif;
}


.row-1 {
  display: flex;
  gap: var(--gap-space);
  border: 2px solid red;
  padding-right: calc(var(--gap-space) * 2);

}

.row-1 .col{
  background: teal;
  border: 2px solid #004D4D;
  color: white;
  font-weight: 700;
  padding: 50px;
  text-align: center;
  flex: 0 0 calc(100% / 3);
}

.row-2{
  display: flex;
  flex-direction: row;
  border: 2px solid red;
}

.row-2 .col{
  background: teal;
  border: 2px solid #004D4D;
  color: white;
  font-weight: 700;
  padding: 50px;
  text-align: center;
  flex: 0 0 calc(100% / 3);
}

<h2>With gap:</h2>

    <div class="row-1">
      <div class="col">1</div>
      <div class="col">2</div>
      <div class="col">3</div>
    </div>

    <h2>Without gap:</h2>

    <div class="row-2" style="gap: 0">
      <div class="col">1</div>
      <div class="col">2</div>
      <div class="col">3</div>
    </div>

只用寬度有什么問題？

.col {
    width: 33.3333%;
  ...
}

.row {
    display: flex;
    gap: 30px;
    border: 2px solid red;
}

.col {
    width: 33.3333%;
    background: teal;
    border: 2px solid #004D4D;
    color: white;
    font-weight: 700;
    padding: 50px;
    text-align: center;
}

:root {
    font-family: sans-serif;
}

* {
    box-sizing: border-box;
}

<h2>With gap:</h2>

<div class="row">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>

<h2>Without gap:</h2>

<div class="row" style="gap:0;">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>