CSS flex item spacing & alignment - space without padding/margin & -webkit-inline-box vs inline-flex for baseline

Question

有幾個與 Flex 容器項目空間和對齊基線相關的問題。

1. 如何在不使用填充或邊距的情況下在彈性容器項目中的元素之間留出空間？ 彈性道具還有其他方法嗎？ 例如：在“這里的主要文本內容”和“ClickMeHere”之間，以及在“ClickMeHere”和它旁邊的圖標之間，來自 codepen output 的以下屏幕截圖。

2. 似乎使用 display:-webkit-inline-box 比 display:inline-flex 更符合基線。 在 chrome/edge 中觀察到 11X11 圖標大小（但在 codepen 中沒有看到 14X14 大小的任何差異）。 那么用-webkit-inline-box代替inline-flex好不好？

 .mybar { display: flex; font-size: 13px; z-index: 1; line-height: 18px; color: #323130; font-family: "Segoe UI"; }.mybar.border { border-bottom: 1px solid green; }.mybar:hidden { display: none; }.mybar.warning { background-color: red; }.mybar.mybar-content { margin: 7px 8px; display: flex; flex-direction: row; flex-grow: 1; }.mybar.icon { margin-left: 16px; margin-right: 8px; flex-shrink: 0; }.mybar.close-button { cursor: pointer; }.mybar.hyperlink { cursor: pointer; color: blue; }.mybar.my2-icon { display: inline-flex; }.mybar.mycontainer { display: flex; flex-direction: row; justify-content: space-between; flex-grow: 1; align-items: center; }.mybar.inlineflexcontent { display: inline-flex; }.mybar.svg-i-16x16-alert { background-image: url("https://i.postimg.cc/B67xSz8Y/73028-warning-icon.png"); background-repeat: no-repeat; background-position: center; width: 16px; height: 16px; }.mybar.svg-i-16x16-close { background-image: url("https://i.postimg.cc/MpPMjFb1/iconfinder-Delete-132746.png"); width: 16px; height: 16px; }.mybar.svg-i-14x14-link { background-image: url("https://i.postimg.cc/mD5NTrh1/11x11-icon.png'"); width: 14px; height: 14px; }

 <div class="mybar" > <div class="mybar-content"> <div class="svg-i-16x16-alert icon" [ngClass]="iconClass"></div> <div class="mycontainer"> <div class="inlineflexcontent"> <div>Main text content here</div> <div class="hyperlink"> <span>ClickMeHere</span> <span class="svg-i-14x14-link my2-icon"></span> </div> </div> <div>Another optional text here </div> <div> <div class="svg-i-16x16-close close-button" tabindex="0"> </div> </div> </div> </div> </div>

這是我的 CodePen： https://codepen.io/madhu_s05/pen/rNOqBXG

Answer 1

Space between 依賴於具有定義寬度的 flex 元素 - 如果您使用以下內容，您將看到 space-between 正常工作：

.inlineflexcontent {
    display: flex;
    width: 400px;
    justify-content: space-between;
}

顯然這不是你想要達到的。 在這種情況下，我會將上面的內容更改為使用CSS Grid而不是 Flex，這將允許您在不使用填充或邊距的情況下定義元素之間的空間：

.inlineflexcontent {
    display: grid;
    grid-template-columns: 1fr 1fr; // two equal columns
    grid-gap: 1rem; // spacing between columns
  }

Answer 2

你必須做一些改變如下：

    .mycontainer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-grow: 1;
        align-items: center;
    }

    .inlineflexcontent {
        display: inline-flex;
        width: 30%;
        justify-content: space-between;
    }

請給.inlineflexcontent一個百分比width 。 由於.inlineflexcontent本身是.container的彈性項目，它會將自己壓縮到剛好足以顯示其內容的最小可能寬度。 因此，如果不給它一個百分比寬度，我們就看不到任何justify-content屬性的值對其起作用。 一旦你給出了寬度，然后 go 提前應用justify-content: space-between; 在.inlineflexcontent上。