Ensuring Flexbox items are aligned vertically without creating any mysterious empty spaces between them

Question

Ensuring Flexbox items are aligned vertically without creating any mysterious empty spaces between them

I'm encountering an issue with Flexbox's flex-wrap: wrap that appears to be causing additional white space below the div.

This is how my setup looks (with class names for clarity):

<div class="viewheight-background">

    <div class="header"></div>
    <div class="vertically-centered-text"></div>

</div>

My CSS code is quite simple:

html, body{
    height: 100%;
}

.viewheight-background {
    min-height: 100%; /* Ensures a section of 100% screen height */
    background-size: cover;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.vertically-centered-text {
    align-self: center;
}

The reason why vertically-centered-text is within a div is because it contains a main heading and some subtext.

Removing "align-self: center" results in proper wrapping of flex-items. However, there seems to be invisible white-space causing "align-self: center" to sit below the center of its containing div.

Any suggestions on how to solve this?

(Let me know if more details are needed)

EDIT:

Here is a reference Fiddle. I forgot to include html, body {height: 100%;}

html css flexbox

Answer 1

Answer №1

Finally discovered a viable solution.

It seems that:

float, clear and vertical-align do not impact a flex item.

I identified the issue with your:

align-self: center;

on the second flex item.

Therefore, your css should be modified to:

.vertically-centered-text {
    /*align-self: center;*/
    background-color:blue;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}

Refer to this LIVE DEMO or execute this snippet (in full page view):

html,
body {
  height: 100%;
}
.viewheight-background {
  min-height: 100%;
  /* To ensure a section of 100% screen height, could be done with 'vh' */
  background-size: cover;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.vertically-centered-text {
  /*align-self: center;*/
  background-color: blue;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}
.header {
  background-color: red;
}

<div class="viewheight-background">
  <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  <div class="vertically-centered-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>

Answer 2

Finally discovered a viable solution.

It seems that:

float, clear and vertical-align do not impact a flex item.

I identified the issue with your:

align-self: center;

on the second flex item.

Therefore, your css should be modified to:

.vertically-centered-text {
    /*align-self: center;*/
    background-color:blue;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}

Refer to this LIVE DEMO or execute this snippet (in full page view):

html,
body {
  height: 100%;
}
.viewheight-background {
  min-height: 100%;
  /* To ensure a section of 100% screen height, could be done with 'vh' */
  background-size: cover;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.vertically-centered-text {
  /*align-self: center;*/
  background-color: blue;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}
.header {
  background-color: red;
}

<div class="viewheight-background">
  <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  <div class="vertically-centered-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>

Ensuring Flexbox items are aligned vertically without creating any mysterious empty spaces between them

Answer №1

Similar questions

The div swiftly clicks and moves beyond the screen with animated motion

Removing classes from multiple cached selectors can be achieved by using the .removeClass

Determining the optimal time to utilize the addClass function in jQuery and CSS

Retrieve the nearest attribute from a radio button when using JQuery on a click event

Why doesn't the float extend across my entire background?

Reposition the span element to the right of the div tag

Challenges in the functionality of PHP form submission utilizing GET parameters

Registering a change event for a table's value

Embedding content within various ng-template elements

The -moz-use-text-color property does not function properly in Chrome and IE versions 9 and above

The media does not need to be applied to the ".nav__btn" class

When a user clicks on buttons other than the submit button, the input field redirects to another page

Is there a more efficient way to optimize my coding for this Cellular Automata project?

aligning a trio of button pieces to seamlessly merge in CSS

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

Choosing multiple classes in CSS 3

Consider implementing a fixed position to the navigation bar

Strange problem with CSS - Unable to load a specific style based on the browser

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

"Enhance your website with a dynamic animated background using Bootstrap container