How do I remove space between flexbox vertically centred rows?

Question

I have two rows, with a heading in the top row, and 2 columns in the bottom row, all vertically centred within a fullscreen wrap. For some reason, I cannot get rid of the extra vertical space that the fullscreen wrap adds in between the two rows, despite adding:

align-content:centre

as well as display: flex to both parent divs (.wrap and .row)

What am I doing wrong?

jsfiddle: https://jsfiddle.net/ar4Ltoke/2/

.wrap {
  width: 1280px;
  min-height: 100vh;
  border-style: solid;
}

.row {
  width: 100%;
  align-items: flex-start;
  margin: auto;
  border: 1;
  border-style: solid;
}

.column_left {
  flex-basis: 60%;
  border: 1;
}

.column_right {
  flex-basis: 30%;
}

@media (min-width:640px) {
  .row {
    display: flex;
    justify-content: space-between;
  }
  .wrap {
    display: flex;
    align-content: center;
    flex-direction: column;
  }
}

<div class="wrap">
  <div class="row">
    <p class="blue">About me</p>
  </div>
  <div class="row">
    <div class="column_left">
      <p class="leadpara">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus
        commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi
        erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      </p>
    </div>
    <div class="column_right">
      <p class="leadpara">
        Email
        <br> Add me on Linkedin
        <br> Tweet at @fsd
      </p>
    </div>
  </div>
</div>

Well, they are vertically centred. What space are you referring to? — XCS, Jun 05 '17 at 11:42
@Cristy I dont want the vertical space between the rows (ive added borders for you to see), so that they should be butt up against each other. — user3358714, Jun 05 '17 at 12:06

Michael Benjamin · Accepted Answer · 2017-06-05T12:58:39.427

Two reasons:

You have margin: auto on .row. That causes both .row flex items to distribute space equally in the container, which forces them to separate.
The .wrap element is a column-direction flex container. That means that the main axis is vertical. As a result, you need justify-content to vertically center the rows.

revised demo

For a more detailed explanation see:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

score -2 · Answer 2 · edited Jun 05 '17 at 13:39

-2

Because you are using <br> to change the line due to which extra spaces are created using something else to change the line. You can use a list instead if you want to show them pointwise with list-style-type as none. Please let me know if my answer is not clear. I will send the code if required.

edited Jun 05 '17 at 13:39

Donald Duck

8,409
22
75
99

answered Jun 05 '17 at 11:45

korku02

7
1
2

1

*you are using br – korku02 Jun 05 '17 at 11:46

How do I remove space between flexbox vertically centred rows?

2 Answers2