The 'Justify-Content' Property Isn't Working

The 'justify-content' property isn't working

justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. In most/many cases, there won't be any free space left, and indeed justify-content will do nothing.

Some examples where it would have an effect:

if your flex items are all inflexible (flex: none or flex: 0 0 auto), and smaller than the container.
if your flex items are flexible, BUT can't grow to absorb all the free space, due to a max-width on each of the flexible items.

In both of those cases, justify-content would be in charge of distributing the excess space.

In your example, though, you have flex items that have flex: 1 or flex: 6 with no max-width limitation. Your flexible items will grow to absorb all of the free space, and there will be no space left for justify-content to do anything with.

Justify Content CSS property isn't working on classes

In order to align to the center using align-items and justify-content, you need to apply it to the direct container of your content.

Also, your ul element had a height: 100% even though there where more text before it. so I removed that so it won't overflow the container.

/* ADDITION */

.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


/* END */

* {
  box-sizing: border-box;
  margin: 0%;
  padding: 0%;
}

body {
  font-family: roboto;
  background-repeat: space;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

nav {
  display: flex;
  height: 150px;
}

.space1 {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 50%;
  background-color: lawngreen;
}

.nav-logo {
  display: flex;
  background-color: red;
  width: 50%;
  height: 100%;
}

.empty-space1 {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.space2 {
  display: flex;
  width: 50%;
  background-color: lightyellow;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.empty-space2 {
  display: flex;
  width: 50%;
  background-color: yellow;
  height: 100%;
}

.nav-links {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.nav-links ul {
  display: inline-flex;
  list-style: none;
  /* REMOVED! */
  /* height: 100%; */
  justify-content: space-evenly;
}

.nav-links ul a {
  margin: 0 .1em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
  <div class="space1">
    <div class="centered-content nav-logo">Logo</div>
    <div class="centered-content empty-space1">lorem
      <!--empty space-->
    </div>
  </div>
  <div class="space2">
    <div class="centered-content empty-space2">lorem
      <!--empty space-->
    </div>
    <div class="centered-content nav-links">lorem
      <ul class="centered-content">
        <li><a href="">About Me</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Projects</a></li>
        <li><a href="">Tools</a></li>
      </ul>
    </div>
  </div>
</nav>

justify-content not working properly on buttons

Edited answer: Don't use display: inline-flex, but display: flex on the flex container. That way the flex container will be 100% wide by default.

Also, you wrote about justify-content: space-between not working, but in your code you have justify-content: center (?). I changed that to space-between in my snippet to show the effect.

.loop-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

button {
  height: 30px flex: 1
}

.cancel {
  background-color: red
}

.home {
  background-color: blue
}

.small {
  max-width: 75px
}

.large {
  max-width: 140px
}

<ng-container class="button-container">
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
</ng-container>

Flexbox align-content and justify-content not working

Actually, both justify-content and align-items are working fine.

You're not getting the results you want for other reasons.

First, keep in mind that the scope of a flex formatting context is the parent-child relationship.

This means that descendants beyond the children are not flex items and do not accept flex properties.

So, whenever you want to apply flex properties to an element, make sure the parent is a flex container (display: flex or display: inline-flex).

Your .right flex container with justify-content: center has actually centered .headbox. Add a border around .right and .headbox to see this clearly.

But if you want to center the <h3> with flex properties, then also make .headbox a flex container:

.headbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

Second, your layout doesn't have a defined height. It's defaulting to height: auto (the height of the content). Therefore, align-items has no space to move things around.

Add this to your code:

html, body { height: 100%; }

html, body { height: 100%; }      /* NEW */
.right {    display: flex;    position: relative;    flex-flow: row wrap;    align-items: space-between;    justify-content: center;    order: 3;    flex: 1 50%;    height: 100%;}
div.list {    display: flex;    flex-flow: row wrap;    width: 70%;    justify-content: center;    line-height: 300%;    border: 1px solid pink;}
.right .headbox {    border-bottom: 1px solid orange;    width: 70%;    height: auto;        display: flex;                 /* NEW */    justify-content: center;       /* NEW */    align-items: center;           /* NEW */}
.right .list {    height: auto;}
.list ul {    list-style: none;    padding: 0;}
.list a {    text-decoration: none;    color: inherit;}

<div class="right">    <div class="headbox">        <h3>Visit Us</h3>    </div>    <div class="list">        <ul>            <li><a href="#">Home</a></li>            <li><a href="#">Hours</a></li>            <li><a href="#">Plan</a></li>            <li><a href="#">Directions</a></li>        </ul>    </div></div>

Why is justify-content: space-between not working even after I have put the code in the container?

You've set flex-grow property, what makes the divs take the whole free space. If you remove that, then you'll have your spaces.

body{
    background-color: gold;
}
*{
    margin: 0;
    padding:0;
}

.img{
    margin-top:50px;
    margin-bottom:50px;
    margin-right:0;
    margin-left:0;
    height:500px;
    width:1350px;
    }

 ul{
    list-style-type:none;
    margin: 0;
    padding: 0;
    background-color: black; 
    overflow: hidden;
   
}

li{
    float: left;
}

li a {
    display: block;
    padding: 18px 20px;
  
    text-decoration: none;
    color:white;
    font-weight: bolder;
    text-align: center;
}  

 li a:hover {
    background-color: blueviolet;
}

.active {
    background-color: #04AA6D;
  }

 .sb{
      margin:10px;
      padding:7px;
      text-align: left;
      position: absolute;
      right: 220px;
      padding-left:50px;
   }

  .button{
    position:absolute;
    right:100px;
    margin:10px;
    padding-left:15px;
    padding-right:15px;
    padding-bottom:6px;
    padding-top:8px;
    border-radius:3px;
    font-weight:bolder;
    color:white;
    background-color: #04AA6D;

  }

  .button:hover {
    background-color: darkorchid;
  }

  .box{
      display:flex;
      flex-flow: row wrap;
      justify-content: space-between;
      font-weight: bolder;
      font-size: 120%;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  }

  .one{
        background-color: orange;
        margin-top:20px;
        align-items: center;
        padding: 50px;
        border:white;
    }
  .two{
    background-color: rgb(252, 95, 95);
    margin-top:20px;
    align-items: center;
    padding: 50px;
    border:black;
   

  }

  .three{
    background-color:orangered;
    margin-top:20px;
    align-items: center;
    padding: 40px;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prototype</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

       <div class="image">
        <img class="img" src="Love music.jpg">

       </div>

        <ul>
            <li><a class="active" href="#Home">Home</a></li>
            <li><a  href="#Test">Trending</a></li>
            <li><a  href="#Click">Your-playlist</a></li>
            <li><a  href="#Test">About</a></li>
            <li><a class="log" href="#login">Login</a></li>
            <li><a class="sgp" href="#Signup">Signup</a></li>
          <form><input class="sb" type="text" placeholder="Searchbar"></form>
          <button  class="button" type="button">Search</button> 
            
        </ul>

        <div class="box">
            <div class="one">One</div>
            <div class="two">Two</div>
            <div class="three">Three</div>
          </div>

          <div class="box">
            <div class="one">One</div>
            <div class="two">Two</div>
            <div class="three">Three</div>
          </div>

          <div class="box">
            <div class="one">One</div>
            <div class="two">Two</div>
            <div class="three">Three</div>
          </div>   
    
</body>
</html>

justify-content property not aligning content on main-axis on Grid

You can use any of the two property gap-4 or space-x-4.

 <script src="https://cdn.tailwindcss.com"></script>

<!-- using gap property -->
<div class="grid grid-cols-12 text-black bg-red-100 space-x-10 mb-10">
  <div class='col-span-5 bg-red-300'>COL_SPAN_5</div>
  <div class='col-span-3 bg-green-300'>COL_SPAN_3</div>
  <div class='col-span-3 bg-blue-300'>COL_SPAN_3</div>
</div>

<!-- using space-x property -->
<div class="grid grid-cols-12 text-black bg-red-100 gap-10 ">
  <div class='col-span-5 bg-red-300'>COL_SPAN_5</div>
  <div class='col-span-3 bg-green-300'>COL_SPAN_3</div>
  <div class='col-span-3 bg-blue-300'>COL_SPAN_3</div>
</div>

bulma flex justify content not working in reactjs

After looking at the documentation, you're using it a bit wrong.

This should work for you.

    <>
      <header className="has-text-centered">
        <h1>LoliGhaya</h1>
      </header>
      <div className='is-flex is-justify-content-space-between mb-2'>
        <small>{curdatetime}</small>
        <strong className='is-size-4'>{title}</strong>
      </div>
    </>

flexbox refuses to justify content as i intended

#location{
  width: 40vw;
  display: flex;
  justify-content: space-between;
}

 <div class="container">
      <form id="location">
        <div class="item"><input type="text" placeholder="Location"></div>
        <div class="item"><input type="submit" value="Get the weather!"></div>
      </form>
    </div>

Why isn't justify-content centering my divs?

Main vs Cross Axis

Consider the main axis and cross axis of a flex container:

Sample Image
^{Source: W3C}

In the image above, the main axis is horizontal and the cross axis is vertical. These are the default directions for a flex container.

However, these directions can be easily switched with the flex-direction property.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(The cross axis is always perpendicular to the main axis.)

justify-content property (works on main axis only)

The justify-content property aligns flex items along the main axis of the flex container.

In other words, when your container is flex-direction: row, that makes the main axis horizontal. justify-content: center will work as you expect.

But you've set the container to flex-direction: column. This means that the main axis is now vertical, and justify-content will position flex items up/down, not left/right.

Since you have no extra height in your example, you won't notice anything different; justify-content has no space to work. (Unlike width, which block elements fill 100% by default, heights must be defined. Otherwise, elements default to auto – the height of the content.) But give the container some height and see what happens.

align-* properties (work on cross axis only)

The align-self, align-items and align-content properties operate on a flex container's cross axis (again, always perpendicular to the main axis).

Because your main axis is vertical, the align-* properties will align flex items left/right. That's why align-self worked to center your divs.

Quick Summary: Depending on the flex-direction, the main axis and cross axis switch, taking their assigned properties with them.

Solution

If your goal is minimal code, here's all you need:

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

More details: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

The 'Justify-Content' Property Isn't Working