When a single column is achieved, aligning with justify-content space-between

Question

When a single column is achieved, aligning with justify-content space-between

I'm working on styling a div that has two children using flexbox and flex-wrap. I want the layout to adjust without needing media queries - so that when it reaches a certain width, the children are spaced evenly (justify-content: space-between), but when it wraps into a single column, they are centered instead of being aligned to the start as they currently are.

Here is the code snippet that I believe is relevant for this issue:

HTML and CSS

.content-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 82%;
}

.content h1 {
    min-width: 20rem;
}

.content h6 {
    min-width: 15.5rem;
}

<div class="content-container">
    <div class="content">
        <h1>'content1'</h1>
        <h6>'content2'</h6>
    </div>
</div>

html css flexbox

Answer 1

Answer №1

Hopefully, this solution meets your requirements. Unfortunately, I couldn't find a way to address your issue using pure CSS without media queries or JavaScript. As a workaround, I changed the space-between to space-around for the .content class (given that you set it at 82%, it shouldn't make much difference).

If you prefer not to use space-around, I believe finding a solution without media queries or JS would be challenging.

.content-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  place-items: center;
  justify-content: space-around;
  width: 100%;
}

h1 {
  width: min-content;
}

h6 {
  width: min-content;
}

<div class="content-container">
    <div class="content">
        <h1 class="content__1">'content1'</h1>
        <h6 class="content__2">'content2'</h6>
    </div>
</div>

Answer 2

Hopefully, this solution meets your requirements. Unfortunately, I couldn't find a way to address your issue using pure CSS without media queries or JavaScript. As a workaround, I changed the space-between to space-around for the .content class (given that you set it at 82%, it shouldn't make much difference).

If you prefer not to use space-around, I believe finding a solution without media queries or JS would be challenging.

.content-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  place-items: center;
  justify-content: space-around;
  width: 100%;
}

h1 {
  width: min-content;
}

h6 {
  width: min-content;
}

<div class="content-container">
    <div class="content">
        <h1 class="content__1">'content1'</h1>
        <h6 class="content__2">'content2'</h6>
    </div>
</div>

Answer 3

Answer №2

Would you like it formatted this way?

.container-content {
    display: flex;
    justify-content: center;
    width: 100%;

}

.section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    width: 82%;
}

.section-heading {
    min-width: 20rem;

}

.section-subheading {
    min-width: 15.5rem;

}

<div class="container-content">
    <div class="section">
        <h1>'content1'</h1>
        <h6>'content2'</h6>
    </div>
</div>

Answer 4

Would you like it formatted this way?

.container-content {
    display: flex;
    justify-content: center;
    width: 100%;

}

.section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    width: 82%;
}

.section-heading {
    min-width: 20rem;

}

.section-subheading {
    min-width: 15.5rem;

}

<div class="container-content">
    <div class="section">
        <h1>'content1'</h1>
        <h6>'content2'</h6>
    </div>
</div>

Answer 5

Answer №3

It seems that achieving your desired outcome without using a @media query in CSS is not possible.

Option 1: CSS without a @media query

If you prefer to avoid using a @media query, consider Option 1. Keep in mind that the difference between space-around and space-between is significant - while space-between aligns elements all the way to the edges, space-around does not.

Here is an example of space-between:

https://i.sstatic.net/12Ekd.png

And here is an example of space-around:

https://i.sstatic.net/ZfmtZ.png

...

If Option 1 meets your requirements, there's no need to explore further. However, there are alternative solutions worth considering if flexibility is essential. Other methods can be employed to achieve the desired layout where elements are aligned to the left and right when not stacked on top of each other.

The challenge lies in dynamically switching between space-between and space-around based on window width, which cannot be accomplished solely through CSS without utilizing a @media query, JavaScript, or jQuery. Check out the additional proposed strategies below.

Option 2: CSS with a @media query

...

Option 3: JavaScript

...

Option 4: jQuery

...

Note: The addition of text-align: center; and line-height: 50px; in the .content class aids in vertically and horizontally centering text within containers. Feel free to amend as necessary. Furthermore, setting border: 2px solid red; helps illustrate the distinction between space-between and space-around.

Answer 6

It seems that achieving your desired outcome without using a @media query in CSS is not possible.

Option 1: CSS without a @media query

If you prefer to avoid using a @media query, consider Option 1. Keep in mind that the difference between space-around and space-between is significant - while space-between aligns elements all the way to the edges, space-around does not.

Here is an example of space-between:

https://i.sstatic.net/12Ekd.png

And here is an example of space-around:

https://i.sstatic.net/ZfmtZ.png

...

If Option 1 meets your requirements, there's no need to explore further. However, there are alternative solutions worth considering if flexibility is essential. Other methods can be employed to achieve the desired layout where elements are aligned to the left and right when not stacked on top of each other.

The challenge lies in dynamically switching between space-between and space-around based on window width, which cannot be accomplished solely through CSS without utilizing a @media query, JavaScript, or jQuery. Check out the additional proposed strategies below.

Option 2: CSS with a @media query

...

Option 3: JavaScript

...

Option 4: jQuery

...

Note: The addition of text-align: center; and line-height: 50px; in the .content class aids in vertically and horizontally centering text within containers. Feel free to amend as necessary. Furthermore, setting border: 2px solid red; helps illustrate the distinction between space-between and space-around.

Answer 7

Answer №4

Give this a try.

.content-container {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align:center;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 82%;
    text-align:center;
}

.content h1 {
    min-width: 20rem;
}

.content h6 {
    min-width: 15.5rem;
}

<div class="content-container">
    <div class="content">
        <h1>'content1'</h1>
        <h6>'content2'</h6>
    </div>
</div>

Answer 8

Give this a try.

.content-container {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align:center;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 82%;
    text-align:center;
}

.content h1 {
    min-width: 20rem;
}

.content h6 {
    min-width: 15.5rem;
}

<div class="content-container">
    <div class="content">
        <h1>'content1'</h1>
        <h6>'content2'</h6>
    </div>
</div>

Answer 9

Answer №5

This unique solution utilizes only flexbox for styling, without the need for media queries or JavaScript. Are you satisfied with this approach?

.content-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 82%;
    text-align: center;
}

.content h1,
.content h6 {
    flex: 1;
}

.horizontal-spacing {
  flex: 1;
  min-width: calc(20rem + 15.5rem);
  height: 0;
}

<div class="content-container">
    <div class="content">
        <h1>'content1'</h1>
        <span class="horizontal-spacing"></span>
        <h6>'content2'</h6>
    </div>
</div>

Answer 10

This unique solution utilizes only flexbox for styling, without the need for media queries or JavaScript. Are you satisfied with this approach?

.content-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 82%;
    text-align: center;
}

.content h1,
.content h6 {
    flex: 1;
}

.horizontal-spacing {
  flex: 1;
  min-width: calc(20rem + 15.5rem);
  height: 0;
}

<div class="content-container">
    <div class="content">
        <h1>'content1'</h1>
        <span class="horizontal-spacing"></span>
        <h6>'content2'</h6>
    </div>
</div>

Answer 11

Answer №6

Here's a neat trick using the clamp() function to switch between fixed width and full width layouts based on a parameter (in this case, 50rem)

.content-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 82%;
  text-align: center;
}

.content > * {
  width: clamp(15rem, (50rem - 100vw)*9999, 100%);
  outline: 1px solid red;
}

<div class="content-container">
  <div class="content">
    <h1>'content1'</h1>
    <h6>'content2'</h6>
  </div>
</div>

For more in-depth information, check out my article at: https://css-tricks.com/responsive-layouts-fewer-media-queries/

Answer 12

Here's a neat trick using the clamp() function to switch between fixed width and full width layouts based on a parameter (in this case, 50rem)

.content-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 82%;
  text-align: center;
}

.content > * {
  width: clamp(15rem, (50rem - 100vw)*9999, 100%);
  outline: 1px solid red;
}

<div class="content-container">
  <div class="content">
    <h1>'content1'</h1>
    <h6>'content2'</h6>
  </div>
</div>

For more in-depth information, check out my article at: https://css-tricks.com/responsive-layouts-fewer-media-queries/

When a single column is achieved, aligning with justify-content space-between

Answer №1

Answer №2

Answer №3

Option 1: CSS without a @media query

Option 2: CSS with a @media query

Option 3: JavaScript

Option 4: jQuery

Answer №4

Answer №5

Answer №6

Similar questions

Unordered list not floating properly - successful in JSFiddle but not displaying correctly in web browser despite updating Chrome and Firefox

How can you create a jQuery fade in effect for a single <li> element

Troubles arise when the left column shifts to the top with widths larger than 1440

Tips for creating a full-screen background image using HTML and CSS

Accessing desired option from dropdown in Laravel

Change the value of the material slide toggle according to the user's response to the JavaScript 'confirm' dialogue

Utilize jquery and css to effectively stack images and control their positioning on hover

Mobile Mode Issue with Bootstrap 4 Navbar Example

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

Integrates an interactive feature within the select tag (<select>)

Assistance requested with Javascript for an HTML dropdown menu

The IFrame event functions properly in HTML, but encounters issues when used in an HTA environment

How can you eliminate the space below the items in Bootstrap pagination?

A guide to implementing hover and mouse click effects on ImageList using Material UI version 5.11.11

When seen on a mobile device, the background image is set to repeat along the

Create a Boostrap navbar with a form and links aligned to the right using the navbar

When the button is clicked, bind the value to an object using the specified key in

Modifying the default hover color of a specific row in AgGridReact

Creating a div that automatically resizes to fit a specific width, with excess content wrapping to the next row

Align dropdown navigation menu/sorting dropdown in the same position as the button