Расстояние между элементами гибкости CSS и выравнивание - пространство без отступов / полей и -webkit-inline-box vs inline-flex для базовой линии

Question

Есть пара вопросов, связанных с пространством элементов контейнера Flex и выравниванием по базовой линии. Кодовая ссылка PFB.

1. Как иметь пространство между элементами в элементах гибкого контейнера без использования отступов или полей? Есть ли другой способ использования гибких опор? Например: между "Основное текстовое содержимое здесь" и "ClickMeHere", а также между "ClickMeHere" и значком рядом с ним на приведенном ниже снимке экрана из вывода кода.

2. Кажется, что использование display:-webkit-inline-box лучше выравнивается по базовой линии, чем display:inline-flex. Наблюдал это в chrome/edge для размера значка 11X11 (но не видел никакой разницы в коде для размера 14X14). Так хорошо ли использовать -webkit-inline-box вместо inline-flex?

Вот мой код: https://codepen.io/madhu_s05/pen/rNOqBXG

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

//SCSS
.mybar {
    &.border {
        border-bottom: 1px solid green;
    }
    display: flex;
    font-size: 13px;
    z-index: 1;
    line-height: 18px;
    color: #323130;
    font-family: 'Segoe UI';
    :hidden {
        display: none;
    }

    &.warning {
        background-color: red;
    }

    .mybar-content {
        margin: 7px 8px;
        display: flex;
        flex-direction: row;
        flex-grow: 1;
    }

    .icon {
        margin-left: 16px;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .close-button {     
        cursor: pointer; 
    }

    .hyperlink {
        cursor: pointer;
        color: blue;
        //padding-left: 6px; // dont want to use padding or margin any other way?
    }

    .my2-icon {
       // vertical-align: baseline;
      display:inline-flex;
      //display: -webkit-inline-box; //this is better than to inline-flex wrt aligning to the baseline(in edge&chrome for 11x11 icon though) but not seeing any difference here in codepen;
    }

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

    .inlineflexcontent {
        display: inline-flex
    }

  .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;
}
  //<span class="svg-i-11x11-link my2-icon"></span>
    .svg-i-16x16-close {
    background-image: url("https://i.postimg.cc/MpPMjFb1/iconfinder-Delete-132746.png");
    //background-repeat: no-repeat;
    //background-position: center;
    width: 16px;
    height: 16px;
}
   .svg-i-14x14-link {
    background-image: url("https://i.postimg.cc/mD5NTrh1/11x11-icon.png'");
    //background-repeat: no-repeat;
    //background-position: center;
    width: 14px;
height: 14px;
}
}

Answer 1

Пространство между ними зависит от гибкого элемента, имеющего определенную ширину - если вы используете следующее, вы увидите, что пространство между ними работает правильно:

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

Пожалуйста, дайте width в процентах к .inlineflexcontent. поскольку .inlineflexcontent сам по себе является гибким элементом .container, он сжимается до минимально возможной ширины, достаточной для отображения его содержимого. Итак, не указав ширину в процентах, мы не сможем увидеть ни один изjustify-contentценности собственности, чтобы работать над ней. После того, как вы указали ширину, применитеjustify-content: space-between; на .inlineflexcontent.