The flexibility factor maximizes the expansion or contraction of spacing between elements

Question

The flexibility factor maximizes the expansion or contraction of spacing between elements

I am currently working on creating a navigation menu that consists of two lists aligned on the same line. It is essential for all items within the lists to have spacing between them, with a maximum of 25px.

An issue with flex-grow: When utilizing flex-grow, the elements tend to expand beyond their width + 25px because there is adequate space available.

An issue with margin-right: In scenarios where the container is smaller in size, the margin-right of 25px remains unchanged, leading to items breaking lines instead of adjusting their margins accordingly.

Potential Solution: Introducing a div element between each item and assigning it properties like flex-grow:1 and max-width:25px.

Is there an alternative approach without having to introduce additional HTML elements?

Feel free to explore the issue further through the provided codepen:

html css flexbox

Answer 1

Answer №1

One interesting approach is to utilize pseudo elements along with the display:contents property.

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul{
  display: inline-flex;
  max-width:100%;
}

.container {
  border: 1px solid red;
  margin-bottom: 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

h2 {
  margin-bottom: 5px;
}

p {
  margin: 0 0 5px 0;
}


.container ul.first{
  margin-right: 30px;
  max-width:calc(100% - 30px);
}

ul li:not(:last-child) {
  display:contents;
}
ul li:not(:last-child)::after {
   content:"";
   width:25px;
}

<div class=container>
  <ul class=first>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
  <ul class=second>
    <li>first</li>
    <li>second</li>
  </ul>
</div>

Answer 2

One interesting approach is to utilize pseudo elements along with the display:contents property.

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul{
  display: inline-flex;
  max-width:100%;
}

.container {
  border: 1px solid red;
  margin-bottom: 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

h2 {
  margin-bottom: 5px;
}

p {
  margin: 0 0 5px 0;
}


.container ul.first{
  margin-right: 30px;
  max-width:calc(100% - 30px);
}

ul li:not(:last-child) {
  display:contents;
}
ul li:not(:last-child)::after {
   content:"";
   width:25px;
}

<div class=container>
  <ul class=first>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
  <ul class=second>
    <li>first</li>
    <li>second</li>
  </ul>
</div>

The flexibility factor maximizes the expansion or contraction of spacing between elements

Answer №1

Similar questions

Is there a way to assign a numerical value to the data attribute of the "p" tag?

issue with arranging content in a two-column layout with headers

Aligning a element at the center is not functioning properly when using margin: 0 auto;

Use CSS to apply hover effects to multiple sections of text at the same time

Tips on using CSS to hide elements on a webpage with display:none

Add a hyperlink alongside every row in the table

Utilize xdebug and NetBeans 8.2 to troubleshoot PHP code submitted through an HTML form

The CSS attribute selector is unable to target dynamically appended class names

Issues with React JS and JavaScript filtering functionality not working correctly

What is the best way to ensure my <h5> element fits perfectly inside its parent div vertically?

What's causing my button to line up horizontally within a flexbox that is positioned vertically?

Steps to directly reference a particular shape within an SVG illustration

Validating Empty Form Fields using Ajax in Codeigniter

The navigation menu displays a flickering effect while transitioning between pages, specifically noticeable on Chrome

Submitting a form in a JQuery dialog box

Android Gmail Application: Implementing 1px horizontal spacing between inline images placed within <td> tags

Is there a potential problem with unescaped characters in an HTML field within a JSON response?

The JSP file is not recognizing my CSS file

Utilizing CSS percentage height when the parent element is constrained by a defined minimum and

Interacting with a card in vuejs won't trigger any action