CODEWITHSUNDEEP
htmlcssflexbox
mv_05
mv_05

Reputation: 119

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

Have couple of questions related to Flex container items space and aligning to baseline.

  1. How to have space between elements within flex container items without using padding or margin? Is there any other way with flex props? For e.g.: Between "Main text content here" and "ClickMeHere", as well as between "ClickMeHere" and icon next to it in the below screenshot from codepen output.

enter image description here

  1. Seems using display:-webkit-inline-box is better aligned to the baseline than display:inline-flex. Observed this in chrome/edge for 11X11 icon size (but not seeing any difference in codepen for 14X14 size though). So is it good to use -webkit-inline-box instead of 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>

Here is my CodePen: https://codepen.io/madhu_s05/pen/rNOqBXG

Upvotes: 0

Views: 1435

Answers (2)

Shraddha
Shraddha

Reputation: 884

You have to do few changes as below:

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

Please, give a width in percentage to .inlineflexcontent. Since .inlineflexcontent itself is a flex item of .container, it squeezes itself to the minimum possible width just enough to display its content. So, without giving it a width in percentage, we cannot see any of the justify-content property's values to work on it. Once you have given the width, then go ahead to apply justify-content: space-between; on .inlineflexcontent.

Upvotes: 0

DannyXCII
DannyXCII

Reputation: 928

Space between relies on the flex element having a defined width - if you use the following, you will see that the space-between is working correctly:

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

Obviously this isn't what you want to achieve. In this instance, I would change the above to use CSS Grid instead of Flex, which will allow you to define space between elements without using padding or margins:

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

Upvotes: 0

Related Questions