CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Anthony Russo
Anthony Russo

Reputation: 931

Margin effecting center aligned items in flexbox row

I'm pretty new when it comes to flexbox but it seems a lot of properties work the same way.

However, when it comes to align items center I'm used to the way inline-block handles margins where it creates a space within the whole row even if it's on a specific element.

With flexbox it seems to only move that element off the axis. Fiddle attached, let me know if I am doing something wrong here. Using bootstrap css with only a few other styles to show what's going on.

enter image description here

https://jsfiddle.net/fv1gm67f/3/

<div id="header-top">
<div class="container">
    <div class="row flex-wrap align-items-center">
        <div class="header-top-social-media-icons-outer col col-auto">
          <nav class="header-top-social-media-icons text-center icons-circle icons-sm">
            <ul class="social-media-icons">
              <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
              <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
              <li><a href="#" target="_blank"><i class="fa fa-envelope"></i></a></li>
            </ul>
          </nav>
        </div>
        <div class="header-top-menu-outer col col-auto">
          <nav class="header-top-menu">
            <ul id="menu-header-top-menu" class="menu">
              <li><a href="#">My Account</a></li>
              <li><a href="#">Sample Page</a></li>
              <li><a href="#">Blog Posts</a></li>
            </ul>
          </nav>
        </div>
    </div>
</div>

Upvotes: 0

Views: 2040

Answers (4)

Nasir T
Nasir T

Reputation: 2643

If i understood you correctly. You want to keep the 2 columns aligned vertically automatically. I think you can achieve this with the property align-self:baseline. Please add the following css class to your fiddle and you will see that whether you give margin bottom or top to the icons col, the right column will align itself based on that margin and keep in line.

.col-auto{
    align-self:baseline;
 }

Hope this answers your question.

[EDIT For More Explaination]

As per your comment you are correct that align-self is for items within flexbox. If you notice then your .flex-wrap class is putting display:flex on main container with has 2 columns child as flex items. And then you have display:flex on the inner nav ul as well which is nested. You needed to set the align-self to baseline for the parent flexbox in order for the 2 col items to align to each other.

Here is a very good article with complete guide to flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope this explanation gives more info to others as well. Happy Coding :)

Upvotes: 3

McHat
McHat

Reputation: 860

display: inline-block; margin-bottom: Npx does not affect the centering of other display: inline-block elements within a common parent element.

https://jsfiddle.net/dkoadaya/

I modified your fiddle above to center some inline-block elements and show that the behavior is the same.

Upvotes: 0

Alexander Dixon
Alexander Dixon

Reputation: 874

As Russell Alan alluded to, it is a box model issue. The padding-top and padding-bottom on the ul.social-media-icons element is throwing the y axis off. The li elements also have a margin-bottom that adds to the issue. The following CSS should fix the issue:

CSS

/*This is so you can get a visual on exactly what the boxes are doing*/
.col-auto {
    background-color: #CCC;
    border: solid 1px #000;
}

ul.social-media-icons {
    padding-top: 0;
    padding-bottom: 0;
}

.social-media-icons li {
    margin-bottom: 0;
}

jsFiddle

Ultimately, however, I think it might be best to set a min-height on the .row.flex-wrap children.

Upvotes: 0

Russell Alan
Russell Alan

Reputation: 116

Give your social media icons a margin of 0.

 .social-media-icons li {
   margin-bottom:0px;
 }

Upvotes: 0

Related Questions