Align flex items closer together

Question

I have a Popular News section where I'm trying to display six news articles in a flex pattern. The problem I'm having is that I cannot get the flex items to be closer together. How do I do that?

EDIT: I've added the entire code for the bottom half.

This is how it currently looks:

This is how I want it to look:

.firstsection {
  width: 100%;
  height: 100;
}

.firstsection h1 {
  color: rgb(255, 255, 255);
  display: block;
  font-size: 36px;
  font-weight: 300;
  line-height: 42.0001px;
  padding-bottom: 14px;
  text-align: center;
}

.firstsection {
  display: block;
  width: 100%;
  height: 400px;
  background-color: #414141;
  float: left;
}

.bottomheader {
  margin-top: 40px;
  color: white;
  font-size: 40px;
  position: relative;
  top: -20px;
}

.READMORE {
  display: inline;
  position: relative;
  top: -40px;
  left: 642px;
  font-size: 16px;
  text-align: center;
  border: 1px solid white;
  height: 50px;
  padding: 20px;
}

.pop .READMORE a {
  color: white;
  text-decoration: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: black;
  width: 30%;
  border-top: 3px solid red;
  background-color: white;
  height: 80px;
}

.firstsection {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.pop {
  float: right;
  height: 100px;
  width: 100%;
  text-align: center;
}

<section style="background-color: #293352" class="pop">
  <h1 class="bottomheader">Popular News</h1>
  <h4 class="READMORE"><a href="#">READ MORE</a></h4>
</section>
<section style="background-color: #293352" class="firstsection">
  <h3 class="h1">content</h3>
  <h3 class="h2">content</h3>
  <h3 class="h3">content</h3>
  <h3 class="h4">content</h3>
  <h3 class="h5">content</h3>
  <h3 class="h6">content</h3>
</section>

use justify-content: center, and add some margins to the news cards. — Sato Takeru, Jan 15 '21 at 12:29
Does this answer your question? [Better way to set distance between flexbox items](https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items) — Gerard, Jan 15 '21 at 12:29
The problem is the height between the elements. I want them closer together. If I use justify-content and add margins, that's almost the same like space-around. The linked question also doesn't answer my question unfortunately :/ — JohnDoe95, Jan 15 '21 at 12:39
flex-direction is the default `row` here, so justify-content works on the horizontal axis. To manipulate how the elements arrange themselves on the vertical axis, you need to use the `align-` properties. — misorude, Jan 15 '21 at 12:58

score 0 · Answer 1 · answered Jan 15 '21 at 12:58

All you really need to do is add align-content: flex-start. This aligns wrapped lines to the start of the flex container and has similar options as align-items. See align-content

I created a fiddle

.firstsection {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}

In this example I changed the 'cards' to divs and used a card class, and added a little padding. This may or may not be what you want but maybe it helps.

score 0 · Answer 2 · answered Jan 15 '21 at 12:58

You can use the CSS GRID to align them properly.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.firstsection {
  display: block;
  width: 100%;
  background-color: #293352;
  padding: 50px 20px;
}

h3 {
  color: black;
  width: 100%;
  border-top: 3px solid red;
  background-color: white;
  height: 130px;
  margin: 0;
}

.firstsection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

<section class="firstsection">
  <h3>content</h3>
  <h3>content</h3>
  <h3>content</h3>
  <h3>content</h3>
  <h3>content</h3>
  <h3>content</h3>
</section>

Codepen: https://codepen.io/manaskhandelwal1/pen/XWjobLx

G-Cyrillus · Answer 3 · 2021-01-15T13:19:27.327

here is another approach with grid , using pseudo elements to shrink the visible rows to the center, and sizing a few elements via width and max-width:

example below to run in fullpage mode then resize the window to see if the behavior is what you expect.

body {
  margin: 0;
  background-color: #293352;
}
.grid {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
.pop {
  color: white;
  text-align: center;
  position: relative;
  padding: 1em 10em;
}
.pop h4 {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  border: solid 1px;
  padding: 1em;
}
section.firstsection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr repeat(auto-fill, max-content) 1fr;
  align-items: center;
  width: max-content;
  max-width:100%;
  margin: auto;
  gap: 1em;
}
.firstsection:before,
.firstsection:after {
  content: "";
  grid-column: span 3;
}
.firstsection > * {
  box-sizing: border-box;
  min-width: 26%;
  background: white;
  height: 100%;
  padding: 1em;
  border-top: solid red;
  max-width:30vw;
}

<div class="grid">
  <section class="pop">
    <h1 class="bottomheader">Popular News</h1>
    <h4 class="READMORE"><a href="#">READ MORE</a></h4>
  </section>
  <section class="firstsection">
    <h3 class="h1">content</h3>
    <h3 class="h2">content</h3>
    <h3 class="h3">content</h3>
    <h3 class="h4">content <br> and an extra line</h3>
    <h3 class="h5">content</h3>
    <h3 class="h6">content or grow the column to my width if there's enough room.</h3>
  </section>
</div>

here is a codepen with a grid of 9 boxes to play with : https://codepen.io/gc-nomade/pen/dypwYvY

Align flex items closer together

3 Answers3