Aligning Flexbox Rows to the Left

I'm having trouble creating a grid layout with flexbox. The issue arises when the last row of items doesn't align left because I'm using justify-content: space-between. Here's a link to my JS Fiddle for reference: https://jsfiddle.net/b5f4jmhu/

When there aren't enough boxes to fill a complete row, the boxes in the last row get spaced out evenly. Does anyone have any suggestions on how I can make the last row align to the left instead?

.boxes {
  max-width: 600px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 20px 0 20px;
  margin: 60px auto 60px auto;
}

.box {
  flex: 0 0 22%;
  height: 100px;
  background: #222;
  margin: 0 0 20px 0;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Thank you, Jamie

htmlcssflexbox

Answer №1

When working with flex, it can be challenging to select the last row. However, if you have a fixed number of elements in each row, you can calculate and adjust the right margin for the last item as needed.

In this case, we are positioning items 2 and 3 out of groups of 4. Using :last-chld:nth-child(xn) allows us to target these specific elements.

For example:

.boxes {
  max-width: 600px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 20px 0 20px;
  margin: 60px auto 60px auto;
}

.box {
  flex: 0 0 22%;
  height: 100px;
  background: #222;
  margin: 0 0 20px 0;
}
.box:last-of-type:nth-child(4n - 1) {
  margin-right:calc(22% + 24px);/* size of one element + its margin */
}
.box:last-of-type:nth-child(4n - 2) {
  margin-right:calc(44% + 48px);/* size of two elements + their margin */
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

If using grid would be a more effective solution, it is possible to implement grid within a flex layout.

Answer №2

For optimal results, utilizing Grids is highly recommended. Feel free to explore a demo on Codepen.

.boxes {
  max-width: 600px;
  background: #ccc;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding: 20px;
  margin: 60px auto 60px auto;
}

.box {
  height: 100px;
  background: #222;
}

With this approach, everything should fall into place perfectly =)

Answer №3

Check out the modifications I made to your code snippet:

https://jsfiddle.net/z1kLs492/

.boxes {
  max-width: 600px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px;
  margin: 60px auto 60px auto;
}

.box {
  width: 23%;
  height: 100px;
  background: #222;
  margin: 1%;
}

.boxes::after {
  content: "";
  flex: auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve JSON data from the website and use AJAX and jQuery to remove it

I am working on a local project with an app that contains a table of data. I need to download the data from a JSON file (todo.json) using jQuery and AJAX, display it in the table in HTML, and then be able to delete, update, and save individual objects or a ...

javascripthtmljsonajax

Slideshow box with images aligned perfectly

I have designed a container with images, but my goal is to: either show the images inline or stack them on top of each other, and then be able to navigate through them using jQuery. I attempted absolute positioning on both .box and .box img, as well as u ...

htmlcss

Struggling to align the heights of items based on their content within a CSS grid

Is it possible to create a CSS layout with grid where items only take up the height needed by their content, instead of the height of the tallest item? Check out this example on CodePen In the provided sample, I am aiming for the div2 element to have a h ...

htmlcsscss-grid

Establish a seamless UDP connection using JavaScript and HTML5

Is it feasible to establish a direct two-way connection with a UDP server using javascript/HTML5 (without node.js)? While WebRTC is an option, my understanding is that it does not support sending datagrams to a specific server. I am primarily focused on c ...

javascripthtmludpwebrtc

Determining the exact pixel height of a table row

Is there a way to use JavaScript to accurately determine the height of a table row in pixels? Specifically, I am looking for the measurement from the top of one green border to the top of the next green border. I have tried using jQuery's .height(), ...

javascriptjqueryhtmlcss

Arrange the buttons within the container

I'm struggling with the front-end development side of things (HTML, CSS, etc.) and need help aligning buttons within a container. The container will include a heading and multiple buttons. Any assistance would be greatly appreciated! Thank you in adv ...

htmlcss

Explore Site Configuration

When it comes to creating a responsive site with the given layouts: https://i.sstatic.net/esdpU.png https://i.sstatic.net/5Rdlr.png If you have a fixed header (4rem), how can you set up the main container (C & D) to have a maximum height of 100% and scr ...

htmlcssbootstrap-4

Executing Python output in HTML with Django

I am currently working on a Django project and in the views.py file of my app, I have some outputs stored in a dictionary. The code snippet from views.py is as follows: from django.shortcuts import render def allblogs(request): a = request.GET[' ...

pythonhtmldjangopython-3.x

Ways to incorporate bold, unbold, and italic styles into a single heading text within the same line using Bootstrap 4

Is there a way to format a single line of text with certain words bolded and the rest regular? I have a specific example pictured here: Picture of my Issue Specifically, I'm looking to bold "Honors:" and "Capstone:", while keeping the surrounding tex ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Organizing and Arranging List Elements (li)

Imagine having this list: <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> ...

htmlcss

Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters. While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devi ...

htmlcssbootstrap-4

Hold on submitting the form with jQuery until the checkbox has been ticked

Hey there, I've added some jQuery code to validate a checkbox on a specific form. You can see a simple example on my JSFiddle. However, even if the checkbox is not clicked, the form still submits, but the alert message shows up. I'm trying to pr ...

javascriptjqueryhtmlformsvalidation

Adjusting the front size while utilizing the SideNav feature in Materialize

While creating a website using Symfony and Materialize, my client requested to have the menu displayed on the side. I followed the guidelines from and successfully implemented the side menu on the left. However, I am encountering two issues: The first ...

javascriptcssmaterialize

Is there a way for me to execute a function multiple times in a continuous manner?

I am attempting to create a blinking box by calling a function within itself. The function I have is as follows: $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle("slow"); }); }); <script src="https://a ...

javascriptjqueryhtmlajax

The tableize-table R function functions effectively in .html format, but unfortunately does not appear correctly when displayed in Gmail using MIMEText

Hi there, I am a beginner working with HTML. I have the following settings in my .html file, and it displays correctly when opened in a browser like Chrome or Safari. (in browser) https://i.sstatic.net/O6YoC.png --> (failed in Gmail) https://i.sstatic. ...

pythonhtmlgmailhtml-emailmime

Leveraging React component methods with vanilla DOM elements

In my project, I am utilizing React along with Fluxxor to develop a visually appealing tree component. Each node in the tree should have basic functionalities like delete, edit, or add a new child. To achieve this, I incorporated dropdown menus for each no ...

javascripthtmlreactjsdomdom-events

Display the chosen HTML template in real-time

Recently, I started using Angular 2 and encountered an issue that I need help with. 1] I have created 2-3 templates for emails and SMS that will display predefined data. 2] I have also designed a screen with a dropdown menu containing options like email ...

angularjshtmltypescriptangular

When creating a fully clickable div, remember to close the <a> tag where it starts

I am trying to make the entire div clickable, but when I embed my div code within an anchor tag, it doesn't seem to be clickable at all. Even upon checking the console, it appears that the anchor tag is closing right after opening. Can someone please ...

javascriptjqueryhtmlcss

How to dynamically insert an <a> tag using JavaScript or jQuery

index.html <p class="feed-text" style="word-wrap:break-word;margin-top:10px;"><a href="/feeds/view/760">testing Ist part </a><a style="text-decoration:underline;color:blue" href="http://www.youtube.com/watch?v=aqveRU1eAmA" target="_bl ...

javascriptjqueryhtml

Ways to eliminate the extra space in a dropdown menu

Is there a way to eliminate padding on the "dropdown-menu" <ul> tag when the list is empty, so that no space is displayed in place of the padding? I want to avoid using .dropdown{padding: 0} because it will remove necessary padding when the list is ...

cssangularbootstrap-4