Spatial alignment of Div elements

My flexbox layout is causing some undesired behavior. Is there a way to center box 4 and box 5, or place box 5 in the middle of the second row?

If you need a visual reference, you can check out this example: https://jsfiddle.net/1sgrqu25/

.parent {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.child {
  border: 1px solid grey;
  margin-bottom: 10px;
  width: 30%;
}
<div class="parent">
  <div class="child">Box 1</div>
  <div class="child">Box 2</div>
  <div class="child">Box 3</div>
  <div class="child">Box 4</div>
  <div class="child">Box 5</div>
</div>

htmlcssflexbox

Answer №1

If you set the width of these divs to 30%, consider using justify-content: flex-start; or justify-content: center; for alignment. Additionally, I updated margin-bottom: 10px to margin: 10px for consistent spacing.

Check out this JSFiddle link for reference!

Answer №2

If you're searching for a simple solution, consider using justify-content: space-around:

.parent {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.child {
  border: 1px solid grey;
  margin-bottom: 10px;
  width: 30%;
}
<div class="parent">
  <div class="child">Box 1</div>
  <div class="child">Box 2</div>
  <div class="child">Box 3</div>
  <div class="child">Box 4</div>
  <div class="child">Box 5</div>
</div>

Another technique is to apply margins to the fourth and fifth items:

.parent {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.child {
  border: 1px solid grey;
  margin-bottom: 10px;
  width: 30%;
}

.child:nth-child(4){
   margin-left: auto;
   margin-right:10px;
}

.child:nth-child(5){
   margin-right: auto;
   margin-left:10px;
}
<div class="parent">
  <div class="child">Box 1</div>
  <div class="child">Box 2</div>
  <div class="child">Box 3</div>
  <div class="child">Box 4</div>
  <div class="child">Box 5</div>
</div>

Answer №3

To create a layout where the width of elements and gaps are fixed, consider utilizing CSS Grid:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px 3.3%;
}

.child {
  border: 1px solid grey;
}
<div class="parent">
  <div class="child">Box 1</div>
  <div class="child">Box 2</div>
  <div class="child">Box 3</div>
  <div class="child">Box 4</div>
  <div class="child">Box 5</div>
</div>

Answer №4

Modify the justify-content property of .parent to align items in the center.

To adjust the spacing between each item with the class .child, utilize the margin-right attribute.

Clean up the layout by removing the right margin of the 3rd item in each row of .child.

.parent {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.child {
  border: 1px solid grey;
  margin-bottom: 10px;
  width: 30%;
  margin-right:calc(10% / 3); /*Add gap between each child*/
}

.parent>.child:nth-child(3n){
  margin-right:0px; /*remove gap last child of each row*/
}

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

What is the best way to create child elements that are each 50% wide and positioned next to each other in a flex-direction column

I'm utilizing bootstrap 4 with .navbar-nav. For a complete live demo, check out the codeply link here: When the .navbar-nav switches to mobile collapsed mode at the designated breakpoint, The following styles are applied, resulting in a nicely stac ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Issue with bootstrap-selectpicker not updating the width of the selection box

I've been attempting to adjust the width of the selectpicker box that displays selected options, but so far all my efforts have been fruitless. I can't seem to change the width or color of the box. If anyone has any ideas or suggestions, they wo ...

jqueryhtmlcssbootstrap-4bootstrap-selectpicker

Creating your own personalized menu in PHP

Although I am relatively new to PHP, I have successfully developed a membership framework for my website that is fully functional. However, before diving into the design phase, there is one particular thing I am keen on achieving but unsure of how to go ab ...

phphtmlmenuhyperlink

Effective ways of making mat-toolbar react to Angular modifications

For a while now, I've been struggling to create a simple header for the homepage of my web app using mat-toolbar. However, no matter what I try, I just can't seem to get it to display the way I want. Here's the code I've been working wi ...

htmlcssangular

Sending users to the wrong PHP page following form submission

Hello everyone, I have a question that I believe has a simple solution, but I seem to be missing it. Maybe someone can point me in the right direction... On my PHP page ("index.php"), I have a basic login form with fields for username and password. When ...

phphtmlforms

Is it possible to render the distorted images onto the canvas?

Trying to draw an image on the canvas using a base64 string obtained from the server. During testing, saved the image on both client and server for debugging which worked fine. However, when trying to render the image on the canvas, it does not display on ...

javascripthtmlhtml5-canvas

Having no capability to manipulate CSS using jquery

In one of my divs, the CSS is set to have display: none .cookie_policy { color: white; text-align: justify; width: 50%; margin: 2% 25%; line-height: 20px; display: block; font-family: Arial,Helvetica,sans-serif; font-style: italic; display:none; } <div ...

jquerycss

"Slice" the text in HTML

In my HTML code, I utilize a smarty variable; <div class="ty-blog__date">{$subpage.timestamp|date_format:"`$settings.Appearance.date_format`"}</div> {$subpage.timestamp|date_format:"$settings.Appearance.date_format"} When compiled, the dat ...

htmlsmarty

Fixed height Iframe with an aspect ratio of 16:9

I am having trouble achieving a 16:9 aspect ratio on my iframe while including a YouTube video on my website. My challenge lies in working with a fixed height but flexible width. This unique scenario has proved difficult to find solutions for in existing d ...

htmliframebootstrap-4

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

htmlcss

Looking to implement a collapsible feature on a webpage using PHP, JavaScript, and HTML

I am looking to enhance the appearance of a section in a table by making it collapsible. The code snippets below are from editor_transdata.php <script language="javascript> function toggle_message(type) { document.getElementById("div_message").s ...

javascriptphphtmlcss

Foundation 4 Framework: Mastering the Art of Clearing CSS Floats

I'm currently in the process of developing a website, but I am facing difficulties with clearing the floats. My website is built using the foundation 4 framework. Whenever I apply the .columns class to an element, it causes the elements to float left. ...

csscss-floatzurb-foundation

To enhance user experience, it is recommended to reload the page once

Hello, I'm looking for a way to automatically refresh the page after submitting an AJAX form. Currently, I have an onClick function that seems to refresh the page, but I still need to press F5 to see the changes I've made. Here's the JavaSc ...

phpjavascriptjqueryhtml

Utilizing jQuery to attach events to dynamically inserted elements in the DOM

I am having an issue with dynamically adding elements to the DOM and then trying to manipulate their behavior using jQuery's .on() function. However, for some reason, the DOM is not triggering the .on() event for these dynamically added elements. You ...

htmldomjquery

What steps can be taken to ensure that the design of this page flows seamlessly?

Interested in a design similar to this https://i.sstatic.net/wbXo2.jpg <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Title</title> <style> html, body { height: 100%; margin: 0; ...

htmlcss

Flipboard-inspired CSS Animation

I have been following a tutorial regarding CSS flip effects and encountered some challenges. The tutorial can be found here. .flip-container { perspective: 1000px; } /* add more code here... */ <div class="flip-container" ontouchstart="th ...

htmlcss

Styling with CSS will keep your content centered on the page, while the background

I'm looking to create a layout with the following specifications: The content wrapper will have a fixed size and be centered: .content { width:960px; margin:0px auto; } My issue is how to implement the left-aligned background bar for the su ...

htmlcss

Modifying button text with jQuery is not feasible

I'm facing a challenge with jQuery and I need the help of experienced wizards. I have a Squarespace page here: . However, changing the innerHTML of a button using jQuery seems to be escaping my grasp. My goal is to change the text in the "Add to car ...

javascriptjqueryhtmlsquarespace

The correct way to use the useState hook for implementing an icon in React

My attempt at implementing a feature in React allows users to see active feedback on the screen by changing its icon when clicked. How can I make it change to another icon (e.g. from Box to BoxChecked) once it is clicked? Note: I believe this code line i ...

htmlreactjsreact-hooksreact-icons

Alter the value of an input element using JavaScript

There are multiple hidden input fields on the page I'm currently working on: <input a1="2" a2="1" a3="3" name="Value" type="hidden" value="10"> <input a1="4" a2="2" a3="6" name="Value" type="hidden" value="12"> <input a1="6" a2="3" a3 ...

javascriptjqueryhtml