Achieve a uniform display of flex items with equal spacing between them, regardless of their

I am faced with a situation where I have two identical row-components with the CSS properties display: flex and justify-content: space-between:

<div class="component-row">
  <div>looooooooooong</div>
  <div>short</div>
  <div>mediummm</div>
</div>

<div class="component-row">
  <div>looooooooooong</div>
  <div>short</div>
  <div>mediummm</div>
</div>

The issue is that due to the varying widths of the children within each component, the spacing between them appears different. My goal is to maintain the same amount of space between each child in both component instances. While the internal spacing can vary, what I am aiming for is consistency in the space between the 1st and 2nd child of both instances, as well as the 2nd and 3rd child.

htmlcssflexbox

Answer №1

Implementing a simple solution may seem easy, but in reality, it is quite effective. By assigning a fixed width to a specific class and then applying it to the children of the .component-row, you can achieve the desired layout effortlessly.

.component-row {
  display: flex;
  justify-content: space-between;
}

.eq1 {
  width: 30%;
}
.eq2 {
  width: 20%;
}
.eq3 {
  width: 35%;
}
<div class="component-row">
  <div class="eq1" style="background-color: red;">looooooooooong</div>
  <div class="eq2" style="background-color: purple;">short</div>
  <div class="eq3" style="background-color: pink;">awdasdsdasad</div>
</div>

<div class="component-row">
  <div class="eq1" style="background-color: green;">looooooooooong</div>
  <div class="eq2" style="background-color: yellow;">srt</div>
  <div class="eq3" style="background-color: blue;">mediummm</div>
</div>

Answer №2

One solution is to assign a width to each item, but if that's not possible or desired, using flexbox may not be the most suitable choice; instead, consider utilizing a grid.

While CSS Grid has limited browser support, CSS Table offers better compatibility and is an ideal option for achieving this objective.

.item-container {
  display: table;
  width: calc(100% - 40px);
}
.item-row {
  display: table-row;
}
.item-row div {
  position: relative;
  display: table-cell;
  border: 1px solid gray;
}
.item-row div:nth-child(2) {
  left: 20px;
}
.item-row div:nth-child(3) {
  left: 40px;
}
<div class="item-container">
  <div class="item-row">
    <div>looooooooooong</div>
    <div>mediummm</div>
    <div>short</div>
  </div>

  <div class="item-row">
    <div>short</div>
    <div>looooooooooong</div>
    <div>mediummm</div>
  </div>
</div>

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

Discover automatically generated titles for dynamic hyperlinks

I am looking to generate dynamic links for a collection of documents with varying names, such as Test, Test2, and so on. I want the link text to display as "Document TestN," where N is the specific document number. Currently, I am able to create the links ...

javascriptjqueryhtml

Javascript - accessing a local file (located in the same directory as the HTML file, not an uploaded file)

I have been attempting to find a solution, but have had no success. Is there a way to read a file using JavaScript or HTML? I have a text file named "sample.txt" with some information in it. This file is located in the same folder as the HTML file that con ...

javascripthtml

Creating adaptable HTML images by specifying width and height attributes within the image tag

My current website setup involves loading a full image and automatically adjusting its size to fit the screen by setting the image width to 100% in CSS. While this method works smoothly, it may not be following standards as I am not specifying width and he ...

javascripthtmlsizescreen-resolutionresponsive-images

How can I center align my loader inside app-root in Angular2+?

I've successfully added a basic spinner to my <app-root> in the index.html file. This gives the appearance that something is happening behind the scenes while waiting for my app to fully load, rather than showing a blank white page. However, I& ...

javascripthtmlcssangulartypescript

If you want to retrieve the calculated value of a div using jQuery

I have a scenario where I have 3 list items (li) under an unordered list (ul). I am interested in finding the height of these list items, but without explicitly defining their height. So far, when inspecting with Firebug, I noticed that the computed height ...

javascriptjqueryhtmlheight

The symbols ♥ and ♦ in HTML are displaying as black on Android devices, despite being styled as red in the CSS

In the midst of my card game development using HTML, JS, and CSS on the Meteor platform. To represent the hearts suit, I utilize &hearts; and for diamonds, it's &diams;. The color scheme is crimson with color: #FF0000; in the CSS code. The fon ...

androidhtmlcssfontsmeteor

Using an HTML and PHP form to store data in the database, it currently defaults to entering "0000-00-00" for the date instead of the date chosen

Recently, I encountered an issue with inserting date information from an HTML form into a database using a PHP file. The HTML form included a date field with an HTML5 datepicker that was supposed to simplify date selection. However, despite adjusting the P ...

phphtmlmysql

Switch between different content sections using a button in a Bootstrap tab-pane

Here is the code snippet I am currently working with: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-s ...

htmlcsstwitter-bootstrapmenu

PHP code for retrieving all combobox values from a form during submission

When I submit the form, I am only able to retrieve the value of the last combo box. Is there a way to capture all the combo boxes' values? Also, I need to know how to access the value of a label. Below is the code snippet used to generate the list of ...

phphtml

Unable to utilize jQuery to select and copy the value of an HTML element

Is it possible to transfer a value from one div to an input field? I attempted to show the selected value, but it keeps displaying undefined. Any ideas why? <div class="thumbnail" id="thumbnail2"> <div class="book author"> Author One < ...

jqueryhtml

The functionality of the tree-view feature in NodeJs is experiencing glitches

My attempt at creating a Tree-view has hit a snag. The collapse icon is not being displayed as expected. Here is the code snippet I tried: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootst ...

javascriptcssbootstrap-4treeview

A common occurrence is for jQuery/Javascript Ajax POST to generate 6 identical posts when used within a .each loop, happening approximately 20

Context: Building a jQuery mobile phonegap application with multipage-ajaxload and sisyphus enabled form that utilizes an AJAX POST loop to interact with a GUI database. The process involves posting 171 section entries, along with one summary entry to a se ...

javascriptjqueryhtmlajax

What causes a custom element to suddenly crumble?

I am attempting to create a custom field that can display either an SVG or a Canvas, but the rendering is not as expected. I anticipate two boxes that are 400 pixels wide and 300 pixels high, however, they appear to collapse in an unusual manner. How can I ...

htmlsvgecmascript-6html5-canvas

What is the best way to make an input text the focus when an item on a dropdown menu is clicked?

I have a website with a dropdown menu and an input box. I want the user experience to be more seamless by automatically focusing the mouse cursor inside the input box when they click on an option in the dropdown menu. This way, users can start typing right ...

javascriptjqueryhtmlcss

What is the best way to make sure that only one tab changes color when clicked?

I have been working on a function that changes the color of a tab to gold when clicked, which is working fine. However, I also want to toggle the active property of each tab so that it displays a nice white outline. The problem I'm facing is that the ...

javascripthtmlcssbootstrap-4

Troubleshooting Bootstrap Social Buttons: Background Color and Hovering Challenges

I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond th ...

htmlcssbootstrap-4

Tips for accessing your unique custom font

The website I'm currently on is using a unique font named zee family. I want to know how I can download or save this specific font style for my personal use. Any assistance with this would be greatly valued. ...

htmlcssfonts

Define a variable using an HTML selector and then verify the presence of elements inside it

One method I use involves creating a variable based on an HTML object. var li = $(this).closest('li'); After creating this variable, I often need to select inner HTML objects from it, such as spans. li.find('span'); However, sometim ...

jqueryhtml

$_POST is unable to read POST parameters when using AJAX

I've been facing an issue with sending data to my PHP script. Interestingly, everything works smoothly when using POSTMAN and the results are displayed correctly. However, when attempting to send the data through AJAX in my HTML project, the PHP scrip ...

phphtmlajax

Sending information to a dialog box

I'm facing a challenge with my button that triggers a modal. Although the button works fine, I now need to figure out how to pass data from the button to a specific field within the modal. Here is the HTML code: <input type=button value='Add ...

javascripthtml