flex-wrap causing next line to have too big of a gap

Question

I have this flexbox that is used to vertically centre two lines of text. The two lines of text are too far apart. Here is an image of what I'm talking about:

Here is my code:

CSS

.vertical-center {
  min-height: 100%;  /* Fallback for vh unit */
  min-height: 100vh; /* You might also want to use
                        'height' property instead.

                        Note that for percentage values of
                        'height' or 'min-height' properties,
                        the 'height' of the parent element
                        should be specified explicitly.

                        In this case the parent of '.vertical-center'
                        is the <body> element */

  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 

  /* Align the bootstrap's container vertically */
    -webkit-box-align : center;
  -webkit-align-items : center;
       -moz-box-align : center;
       -ms-flex-align : center;
          align-items : center;

  /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
  width: 100%;

  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.

     Therefore, we should use the following declarations to get it centered again */
         -webkit-box-pack : center;
            -moz-box-pack : center;
            -ms-flex-pack : center;
  -webkit-justify-content : center;
          justify-content : center;

          flex-wrap: wrap;

}

p.white, h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
    color: white;
}

.flexbox-text {
    margin: -50px, 0px, -50px, 0px;
}

html

<div class="vertical-center">
      <h1 class="text-center white flexbox-text">{{mottoText}}</h1>
      <h3 class="text-center white flexbox-text">{{mottoSubText}}</h3>
    </div>

Ignore the angular two syntax. How do I get the two lines of text to be closer to each other?

Ahhhhhhhh close some tabs! `:-)` – user56reinstatemonica8 Jul 15 '16 at 19:56 — user56reinstatemonica8, Jul 15 '16 at 19:56

Nenad Vracar · Accepted Answer · 2016-01-10T01:17:09.727

Use flex-direction: column and remove margins from h1 and h3

.vertical-center {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

p.white, h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
    color: black;
    margin: 0;
}

<div class="vertical-center">
   <h1 class="text-center white flexbox-text">THIS IS TITLE</h1>
   <h3 class="text-center white flexbox-text">SUBTITLE</h3>
</div>

Michael Benjamin · Answer 2 · 2018-02-05T18:00:10.243

When positioning a single line in the cross axis of a flex container, you can use align-items.

But when the container has multiple lines – such as when flex items wrap – the align-content property becomes necessary to shift lines.

8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

The reason why "the two lines of text are too far apart" on your web page is because the initial value of align-content is stretch, which causes the lines to spread across evenly in the flex container.

Try different values on align-content for different alignments. For example, align-content: center brings both lines together in the center of the container.

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center; /* NEW */
}

p.white,
h1.white,
h2.white,
h3.white,
h4.white,
h5.white,
h6.white {
    color: black;
}

.flexbox-text {
    margin: -50px, 0px, -50px, 0px;
}

<div class="vertical-center">
    <h1 class="text-center white flexbox-text">MINIMISE WASTE. SUSTAINABLE LIVING. SUPPORT COMMUNITY</h1>
    <h3 class="text-center white flexbox-text">SHARE FOOD WITH OTHERS IN YOUR AREA</h3>
</div>

score 2 · Answer 3 · edited Mar 03 '23 at 08:47

2

Seems simple to me... https://jsfiddle.net/krL755h8/ Probably line-height, padding or margin or incorrect use of flexbox causing the issue.

html {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

<h1>Title</h1>
<h2>Subtitle</h2>

edited Mar 03 '23 at 08:47

Ryan M

18,333
31
67
74

answered Jan 10 '16 at 01:18

seahorsepip

4,519
1
19
30

flex-wrap causing next line to have too big of a gap

3 Answers3