css Question posted in
Some basic documentation can be found here.

Css – How to fix flexbox centering?

In the code below the .rows are not placed in the center despite placed in a .wrapper {display:flex; align-items:center; justify-content:center}. Also, the third row is not wrapping to the next line. The gap:20px; is not working either. I am trying to make a centered 2column 2row layout for the first 4 images and 1 row for 1ast image.

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 940px;
  gap: 20px;
}

.column {
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  gap: 20px;
}
<div class="wrapper">
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/26a76fb4-c0c9-1296-36dd-a0adcfd0da11.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/2bdc1eb0-300a-9f18-273a-1939c3a1a20a.jpg" width="452px" height="300px"></div>
  </div>

  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/db72e41d-c338-08d3-d0ee-782dd31791d6.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/74b818c5-f67c-540f-c724-b6a71fcad0db.jpg" width="452px" height="300px"></div>
  </div>
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ce6173d9-ed33-0d23-bed7-ce1fa03db6b6.jpg" width="923px" height="518px">
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Basically I moved the flex-wrap: wrap; and gap to the .wrapper because you do want it to wrap.

    I also added width: 100% to img to make it responsive.

    .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;

}

.row {
  display: flex;
  flex-direction: row;
  width: 940px;
  gap: 20px;
}

.column {
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  gap: 20px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}
    <div class="wrapper">
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/26a76fb4-c0c9-1296-36dd-a0adcfd0da11.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/2bdc1eb0-300a-9f18-273a-1939c3a1a20a.jpg" width="452px" height="300px"></div>
  </div>

  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/db72e41d-c338-08d3-d0ee-782dd31791d6.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/74b818c5-f67c-540f-c724-b6a71fcad0db.jpg" width="452px" height="300px"></div>
  </div>
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ce6173d9-ed33-0d23-bed7-ce1fa03db6b6.jpg" width="923px" height="518px">
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Create a layout with two columns and two rows to display the first four images. For the last image, display it in a single row. Keep the CSS simple. Here’s a straightforward example:

    .wrapper {
  display: flex;
  flex-direction: column;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  gap: 10px;

}

.row {
  display: flex;
  gap: 10px;
}

img {
  max-width: 100%;
}
    <div class="wrapper">
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/26a76fb4-c0c9-1296-36dd-a0adcfd0da11.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/2bdc1eb0-300a-9f18-273a-1939c3a1a20a.jpg" width="452px" height="300px"></div>
  </div>

  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/db72e41d-c338-08d3-d0ee-782dd31791d6.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/74b818c5-f67c-540f-c724-b6a71fcad0db.jpg" width="452px" height="300px"></div>
  </div>
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ce6173d9-ed33-0d23-bed7-ce1fa03db6b6.jpg" width="923px" height="518px">
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search