CODEWITHSUNDEEP
htmlcssflexbox
lil_dippa
lil_dippa

Reputation: 177

Centering a justify-content space-between once it becomes a single column

I am trying to style a div that has two children, with flexbox and flex-wrap, without media-queries, that at a certain width is space-between, but once it is a single column is centered (as opposed to currently where once it wraps it's like flex-start). Hopefully that makes sense.

I think this is the relevant code, basically when it wraps, i would like space between to become center:

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>

Upvotes: 8

Views: 2522

Answers (6)

Temani Afif
Temani Afif

Reputation: 273649

Here is an idea using clamp() where I will toggle between a fixed width and full width based on a parameter (50rem in this case)

.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>

Read my article if you want more detail: https://css-tricks.com/responsive-layouts-fewer-media-queries/

Upvotes: 0

Crystal
Crystal

Reputation: 1992

Try this.

.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>

Upvotes: 1

nvkrj
nvkrj

Reputation: 1033

The following solution uses only flexbox, no media queries or JavaScript. Does this do what you want?

.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>

Upvotes: 0

Rok Benko
Rok Benko

Reputation: 23060

I'm afraid it's impossible to achieve what you want the way you want (i.e., CSS without a @media query).

Solution 1: CSS without a @media query

If you don’t want to use a @media query, then look at Solution 1. But space-around is a different thing than space-between because space-between will push your two elements all the way to the left and right when they’re not stacked above each other, while space-around will not do so.

An example of space-between:

space-between

An example of space-around:

space-around

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

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 82%;
  text-align: center;
  line-height: 50px;
  border: 2px solid red;
}

.content h1 {
  min-width: 20rem;
  background-color: #DCDCDC;
}

.content h6 {
  min-width: 15.5rem;
  background-color: #DCDCDC;
}
<div class="content-container">
  <div class="content">
    <h1>Content 1</h1>
    <h6>Content 2</h6>
  </div>
</div>

If Solution 1 is good enough for you, then you don’t need to read further. But there are many better options on the table. If you’re not limited and can make changes to your code, then I think you should look at other possible solutions below. You can use different approaches to achieve what you want if you want your two elements to be pushed all the way to the left and right when they’re not stacked above each other.

The reason why this can’t be done without using a @media query, JavaScript or jQuery is that CSS on its own can’t “switch” from space-between to space-around when your two elements get stacked above each other. You need to define some rules using a @media query, JavaScript or jQuery so that CSS will change from space-between to space-around at a specific window width (i.e., exactly when your two elements get stacked above each other). See other possible solutions below.

Solution 2: CSS with a @media query

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

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 82%;
  text-align: center;
  line-height: 50px;
  border: 2px solid red;
}

.content h1 {
  min-width: 20rem;
  background-color: #DCDCDC;
}

.content h6 {
  min-width: 15.5rem;
  background-color: #DCDCDC;
}

@media only screen and (max-width: 708px) {
  .content {
    justify-content: space-around;
  }
}
<div class="content-container">
  <div class="content">
    <h1>Content 1</h1>
    <h6>Content 2</h6>
  </div>
</div>

Solution 3: JavaScript

window.onload = function() {
  if (window.innerWidth < 709) {
    document.getElementById("content").style.justifyContent = "space-around";
  } else {
    document.getElementById("content").style.justifyContent = "space-between";
  }
}

window.onresize = function() {
  if (window.innerWidth < 709) {
    document.getElementById("content").style.justifyContent = "space-around";
  } else {
    document.getElementById("content").style.justifyContent = "space-between";
  }
}
.content-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  width: 82%;
  text-align: center;
  line-height: 50px;
  border: 2px solid red;
}

.content h1 {
  min-width: 20rem;
  background-color: #DCDCDC;
}

.content h6 {
  min-width: 15.5rem;
  background-color: #DCDCDC;
}
<div class="content-container">
  <div class="content" id="content">
    <h1>Content 1</h1>
    <h6>Content 2</h6>
  </div>
</div>

Solution 4: jQuery

$(window).on('load', function() {
  if ($(window).width() < 709) {
    $(".content").css("justify-content", "space-around");
  } else {
    $(".content").css("justify-content", "space-between");
  }
});

$(window).on('resize', function() {
  if ($(window).width() < 709) {
    $(".content").css("justify-content", "space-around");
  } else {
    $(".content").css("justify-content", "space-between");
  }
});
.content-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  width: 82%;
  text-align: center;
  line-height: 50px;
  border: 2px solid red;
}

.content h1 {
  min-width: 20rem;
  background-color: #DCDCDC;
}

.content h6 {
  min-width: 15.5rem;
  background-color: #DCDCDC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="content-container">
  <div class="content">
    <h1>Content 1</h1>
    <h6>Content 2</h6>
  </div>
</div>


P.S. I added text-align: center; and line-height: 50px; to the .content class because if you really want to have your content centered then you also need to center text horizontally and vertically inside your containers. This is a quick fix, you can remove that if you want. Also, border: 2px solid red; is added to the .content class so you can better understand the difference between space-between and space-around.

Upvotes: 1

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2317

Do you want like this:

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

}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    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>

Upvotes: 1

Guy Nachshon
Guy Nachshon

Reputation: 2655

I hope this fits your needs. Since I don't believe that there is a way to solve your problem using only native CSS (i.e. no media queries, and I assume no JS), I let myself change the space-between to space-around (since you gave .content 82% there is not much of a difference).

if you do not want to use space-around, I find it hard for me to believe that there is a solution without media-queries \ JS.

.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>

Upvotes: 1

Related Questions