[英]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.有几个与 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这是我的 CodePen: https://codepen.io/madhu_s05/pen/rNOqBXG
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: Space between 依赖于具有定义宽度的 flex 元素 - 如果您使用以下内容,您将看到 space-between 正常工作:
.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:
在这种情况下,我会将上面的内容更改为使用CSS Grid而不是 Flex,这将允许您在不使用填充或边距的情况下定义元素之间的空间:
.inlineflexcontent {
display: grid;
grid-template-columns: 1fr 1fr; // two equal columns
grid-gap: 1rem; // spacing between columns
}
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
.请给
.inlineflexcontent
一个百分比width
。 Since .inlineflexcontent
itself is a flex item of .container
, it squeezes itself to the minimum possible width just enough to display its content.由于
.inlineflexcontent
本身是.container
的弹性项目,它会将自己压缩到刚好足以显示其内容的最小可能宽度。 So, without giving it a width in percentage, we cannot see any of the justify-content
property's values to work on it.因此,如果不给它一个百分比宽度,我们就看不到任何
justify-content
属性的值对其起作用。 Once you have given the width, then go ahead to apply justify-content: space-between;
一旦你给出了宽度,然后 go 提前应用
justify-content: space-between;
on .inlineflexcontent
.在
.inlineflexcontent
上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.