Mathias Mathias - 2 months ago 24
CSS Question

Understanding how Flexbox works with Bootstrap

I have the following HTML and CSS layout:



html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 100px;
}
.col-md-6 {
display: flex;
justify-content: center;
}
.container_flex {
display: flex;
align-items: center;
justify-content: center;
/* vh refers to viewport height. Very useful! */
height: 100vh;
width: 100%;
}

<div class="container-fluid">
<div class="container_flex">
<div class="row">
<div class="col-md-6 col-xs-12" style="border:solid">
<h1>Column 1</h1>
</div>
<div class="col-md-6 col-xs-12" style="border:solid">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>





Which provides the following result:

Bootply

My aim of using Flexbox is to vertically center the contents of "row" inside the container-fluid. However, this results in the columns adopting a compressed look when in desktop mode. When in mobile view, the columns do stack as expected. I would be grateful if someone could explain why this compressed/stubby look comes about?

In contrast, if I remove the row class, this stubby compressed look no longer is brought about as shown:

Bootply

However, the columns no longer stack when in mobile view. Is there any way that I can rectify this?

If anyone has any tips/pointers on how to effectively use FlexBox with Bootstrap to vertically and horizontally center in a more effective way than what I have attempted here, I would be very grateful.

Answer

When you remove the row element the .col elements become your flex-items. In order to get flex-items to wrap in a flex container you need to use the flex-wrap property. However, I don't think removing the row element and using flex-wrap is what you really want.

With regards to your question. The reason it looks stubby in your first example is because you are making the row element your 'flex-item'. The width of the row item then sizes to its contents because you have not set the flex property which controls its size. Once you set the flex property properly then you will see the desired results:

.container_flex {        
    display: flex;       
    align-items: center;
    justify-content:center; 
    
    /* vh refers to viewport height. Very useful! */ 
    height: 100vh;
    width: 100%;       	
}

.row {
    flex: 1;
}
<div class="container-fluid">
  <div class="container_flex">
    <!-- Note that if using Flexbox, then do not need to wrap col- in row class but then does not stack columns on mobile... use @media? -->	
    <div class="row">
      <div class="col-md-6 col-xs-12" style="border:solid">
        <h1>Column 1</h1>
      </div>
      <div class="col-md-6 col-xs-12" style="border:solid">
        <h1>Column 2</h1>
      </div>
    </div>
  </div>
</div>

Here is a brief explanation why: flex:1 is a shortcut property that sets three separate the flex-item properties to:

  • flex-grow: 1; If the size of the flex-item is smaller than available space within the flex container then setting this to a value greater than 0 makes the item stretch to fill the available space. If there are multiple flex-items in the same container they grow to share the available space in proportion to the value of their flex-grow property.
  • flex-shrink: 1; If the size of the flex-item is smaller than the available space within the flex container then setting this to a value greater than 0 makes the item shrink to fit the available space. If there are multiple flex-items in the same container they will shrink to share the available space in proportion to the value of their flex-grow property.
  • flex-basis: 0%; Defines the starting size of the element before being flexed.

For general informanton on using flex-box take a look at this article over at css tricks by Chris Coyier; he does a great job explaining how flex-box works.

If you are looking for information on using bootstrap and flex-box together I recommend reading this article as well!

I hope this helps.

Comments