Creating a gap between two elements without using the space-between property

Question

Creating a gap between two elements without using the space-between property

Currently working on creating a responsive menu,

      <div style={{ display: "flex", flexFlow: "row wrap" }}>
        {/* left side */}
        <div key="1">nav 1</div>
        <div key="2">nav 2</div>
        <div key="3">nav 3</div>
        {/* left side */}

        {/* right side */}
        <div key="4">nav 4</div>
        <div key="5">nav 5</div>
        <div key="6">nav 6</div>
        {/* right side */}
      </div>

My goal is to have equal spacing between the two sides while keeping each element wrapped individually.

Visual representation: https://i.sstatic.net/1SXgi.png

In need of some guidance, appreciate your support!

html css flexbox responsive

Answer 1

Answer №1

A clever solution is to introduce a pseudo element within the wrapper and adjust its order property to position it between the 3rd and 4th div elements, while also setting flex-grow: 1:

#wrapper {
  display: flex;
  flex-wrap: wrap;
}
#wrapper > div:nth-child(-n + 3) {
  order: 1;
  background-color: papayawhip;
}
#wrapper::after {
  content: "";
  order: 2;
  flex-grow: 1;
}
#wrapper > div:nth-child(n + 4) {
  order: 3;
  background-color: palegoldenrod;
}

<div id="wrapper">
  <!-- left -->
  <div key="1">nav 1</div>
  <div key="2">nav 2</div>
  <div key="3">nav 3</div>
  <!-- right -->
  <div key="4">nav 4</div>
  <div key="5">nav 5</div>
  <div key="6">nav 6</div>
</div>

Answer 2

A clever solution is to introduce a pseudo element within the wrapper and adjust its order property to position it between the 3rd and 4th div elements, while also setting flex-grow: 1:

#wrapper {
  display: flex;
  flex-wrap: wrap;
}
#wrapper > div:nth-child(-n + 3) {
  order: 1;
  background-color: papayawhip;
}
#wrapper::after {
  content: "";
  order: 2;
  flex-grow: 1;
}
#wrapper > div:nth-child(n + 4) {
  order: 3;
  background-color: palegoldenrod;
}

<div id="wrapper">
  <!-- left -->
  <div key="1">nav 1</div>
  <div key="2">nav 2</div>
  <div key="3">nav 3</div>
  <!-- right -->
  <div key="4">nav 4</div>
  <div key="5">nav 5</div>
  <div key="6">nav 6</div>
</div>

Answer 3

Answer №2

Instead of utilizing flex, I decided to use float: left/right for my layout. Feel free to resize your browser window to see the effect. To test it out yourself, you can visit this fiddle: https://jsfiddle.net/x7f2pvn9/

div.wrapper div {
  display: inline;
  background: red;
  padding: 1rem;
  margin: 5px;
  width: 40px;
  height: 50px;
}

div.left {
  float: left;
}

div.right {
  float: right;
}

@media only screen and (max-width: 600px) {
  div.right {
    float: left;
  }

}

<div class="wrapper">

    <div class="left">1</div>
    <div class="left">2</div>
    <div class="left">3</div>


    <div class="right">4</div>
    <div class="right">5</div>
    <div class="right">6</div>
</div>

Answer 4

Instead of utilizing flex, I decided to use float: left/right for my layout. Feel free to resize your browser window to see the effect. To test it out yourself, you can visit this fiddle: https://jsfiddle.net/x7f2pvn9/

div.wrapper div {
  display: inline;
  background: red;
  padding: 1rem;
  margin: 5px;
  width: 40px;
  height: 50px;
}

div.left {
  float: left;
}

div.right {
  float: right;
}

@media only screen and (max-width: 600px) {
  div.right {
    float: left;
  }

}

<div class="wrapper">

    <div class="left">1</div>
    <div class="left">2</div>
    <div class="left">3</div>


    <div class="right">4</div>
    <div class="right">5</div>
    <div class="right">6</div>
</div>

Creating a gap between two elements without using the space-between property

Answer №1

Answer №2

Similar questions

Is it possible to create HTML content directly from a pre-rendered canvas element or input component like a textbox?

Unnecessary scrollbar appears in the Simple Material UI dialog demonstration

The information retrieved from the database query is failing to appear on my webpage

CSS hover image resizing not functioning as expected

The use of the picture element, with its ability to support various image formats and sizes, must always include

Header formatting issue when attempting to implement tablesorter plugin

Executing a webservice method in an html page using javascript without the need to refresh the page

Dynamic horizontal scrolling

To generate a new <div> element by clicking a button and then clicking on it using C# Selenium

Linking an image to a database-stored value through a hyperlink

Error when attempting to open and close a div through a click event

Guide to Sending and Scheduling Notifications through HTML 5's Notification Web APIs

JavaScript Image Swap

PHP: Showing the content of every div on the page

Issue encountered: difficulty with vertical alignment in table cell containing both text input and image

Bootstrap 4 - DropDown option - Element is positioned above the navigation bar

The layout of my website appears distorted on mobile devices

Inject a list of titles into a pipe and randomize the items

having difficulty showing the primary content page

The ">" CSS child selector does not seem to be functioning correctly with specific properties