I have a table where a cell can contain a number of icons, as well as text. If icons are present, they appear to the left of the text. There are a couple of possible alignment cases:
I thought that I could accomplish this and other more complicated alignments by wrapping everything within the table-cell with a flexbox, using justify-content: center;
, and then applying margin-right: auto;
to the text div.
If there is text, the auto margin will push everything over to the left.
If not, the justify-content
style will center the icons.
Here is a codepen containing my approach.
.flexbox {
display: flex;
flex-direction: row;
justify-content: center;
border: 2px solid black;
width: 300px;
height: 17px;
}
.icon {
height: 17px;
width: 17px;
background-color: red;
}
.text {
margin-right: auto;
}
<div class="flexbox">
<div class="icon"></div>
<div class="text">asdf</div>
</div>
This approach works in Chrome, but the right auto margin is not applied correctly in IE 11. I'm wondering why, and how I can get around it.
Extra Information
It almost seems as if IE 11 first calculates the auto margins, then aligns the flex items with no regard for those margins whatsoever, and finally applies the margins as best as it can.
I believe this because, when justify-content: flex-end;
is set on the flexbox and the text div has margin-left: auto;
, the icon is right aligned within the flexbox while the text is pushed outside of the bounds of the flexbox by almost the entire width of the flexbox (about what the auto margin should be).
If the main axis is in the block direction because flex-direction is set to column , then justify-content will distribute space between items in that dimension as long as there is space in the flex container to distribute.
Note also that Internet Explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation.
If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied.
As stated in the flexbox specification:
Prior to alignment via
justify-content
andalign-self
, any positive free space is distributed toauto
margins in that dimension.
In other words, auto
margins have precedence over justify-content
.
In your example, Chrome appears to be in compliance with the spec. (Firefox, as well.)
But IE11 – in cases where the parent has justify-content
– is ignoring margin-right: auto
on the flex item. This appears to be a bug.
When justify-content
is removed, auto
margins work.
One workaround would be to remove justify-content
entirely and rely solely on auto
margins:
- Only an icon is present: The icon should be centered
.icon { margin: 0 auto; }
.flexbox {
display: flex;
flex-direction: row;
border: 2px solid black;
width: 300px;
height: 17px;
}
.icon {
height: 17px;
width: 17px;
background-color: red;
}
.icon {
margin: 0 auto;
}
<div class="flexbox">
<div class="icon"></div>
</div>
- Only text is present: The text should be aligned left
.text { margin-right: auto; }
.flexbox {
display: flex;
flex-direction: row;
border: 2px solid black;
width: 300px;
height: 17px;
}
.icon {
height: 17px;
width: 17px;
background-color: red;
}
.text {
margin-right: auto;
}
<div class="flexbox">
<div class="text">asdf</div>
</div>
- Both icons and text are present: Both the icon and text should be aligned left
.text { margin-right: auto; }
.flexbox {
display: flex;
flex-direction: row;
border: 2px solid black;
width: 300px;
height: 17px;
}
.icon {
height: 17px;
width: 17px;
background-color: red;
}
.text {
margin-right: auto;
}
<div class="flexbox">
<div class="icon"></div>
<div class="text">asdf</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With