- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi,
I have a problem with styling my bar, which works on flexbox.
It has three divs inside: one sticked to the left border and another sticked to right border; there is also a small div in the middle and I want it to go left and stick to the div on left. Is it a chance to manage this with flexbox, without changing for display: inline-block?
The bar has a class .article__metas.
The div in the middle is .social_item.
.article__metas {
color: #888888;
font-size: 12px;
display: flex;
border-bottom: 1px solid #e5e5e5;
justify-content: space-between;
@include link-color('a', '#888');
a:hover {
text-decoration: underline;
}
.item {
padding: 20px;
&:first-child {
padding-left: $cards_left;
}
}
.seperator {
display: block;
align-self: stretch;
width: 1px;
background-color: #e5e5e5;
}
.social_item {
display: flex;
align-items: center;
justify-content: space-between;
span + span {
margin-left: 20px;
}
& > span {
display: block;
white-space: nowrap;
img {
width: 16px;
display: inline-block;
}
}
img {
margin-top: 2px;
margin-right: 9px;
}
}
}
Thank you in advance!
Can you make a Codepen.io demo?
However, just by using display:flex
will override any inline-block
property.