Flex: Justify-Content: Space-Around But Full Size on Both Ends

Flex: Justify-content: space-around but full size on both ends?

I agree this should be covered by flexbox itself.
Currently we only have space-around but it's just incomplete.
ATM the best solution for you is to wrap rows inside two pseudo elements. Basically it's your solution, but you won't need to touch the actual markup since it's generated content.

http://jsfiddle.net/5rmUj/

.row::before, .row::after
{
    content:'';display:block;
    width:0;height:0;
    overflow:hidden;
}

Controlling the amount of space in justify-content: space-between

The justify-content property uses the available space on the line to position flex items.

With justify-content: space-between, all available space is placed between the first and last items, pushing both items to opposite edges of the container.

You wrote:

I was wondering how to justify how much space is allowed in justify-content: space-between for flexbox.

With space-between in row-direction, you would have to control the width of the flex container. So if you want there to be less space between flex items, then you would need to shorten the width of the container.

Or you could use justify-content: space-around.

However, these solutions are suboptimal.

The right way to go about this would be to use margins.

You wrote:

Currently, my items are spaced but they have way too much space between them I want just a little space between them so they can settle somewhere in the middle in a row.

Use justify-content: center then use margins to space them apart.

Flex items evenly spaced but first item aligned left

You can use justify-content: space-between, but the last content will have also no space on the right.

A good documentation.

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>

How to display wrapping flex items as space-between with last row aligned left?

After trying the suggestions here (thanks!) and searching the web long and wide, I've reached the conclusion that this is simply not possible with flexbox. Any by that I mean that others have reached this conclusion while I stubbornly tried to make it work anyway, until finally giving up and accepting the wisdom of wiser people.

There are a couple of links I came across that might explain it better, or different aspects of the requirements, so I'm posting them here for... posterity.

How to keep wrapped flex-items the same width as the elements on the previous row?

http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox

Managing justify-content: space-between on last row

Use an invisible pseudo-element that occupies the last slot in the container:

.main::after {
  height: 0;
  width: 30%;
  content: "";
}

The height is 0 so that when rows are filled, and the pseudo-element starts the next line, it doesn't add height to the container.

Full code:

.main {  background: #999;  margin: 0 auto;  width: 500px;  display: flex;  flex-wrap: wrap;  justify-content: space-between;}.box {  background: #7ab9d7;  color: #555;  height: 30px;  width: 30%;  margin-bottom: 30px;  text-align: center;  font-size: 30px;  padding-top: 120px;}.main::after {  height: 0;  width: 30%;  content: "";}

<div class="main">  <div class="box">1</div>  <div class="box">2</div>  <div class="box">3</div>  <div class="box">4</div>  <div class="box">5</div></div>

Justify inner Flexbox items across full width of flex container

You were pretty close. Important changes I made were to set the width of the #links <ul> to 50% and add justify-content: space-between to the container #nav wrapper. A few other style changes to the ul so it doesnt have default margin and padding and I think it is behaving as you are expecting now..

#nav {  display: flex;  align-items: center;  justify-content: space-between;}
#logo {  width: 50px;  flex: 0 0 50px;}
#links {  width: 50%;  display: flex;  justify-content: space-between;  margin: 0;  padding: 0;  list-style: none;}
#links a {  text-decoration: none;}

<nav id="nav"> <img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/> <ul id="links">  <li><a href="#">Link1</a></li>  <li><a href="#">Link2</a></li>  <li><a href="#">Link3</a></li>  <li><a href="#">Link4</a></li> </ul></nav>

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Flex: Justify-Content: Space-Around But Full Size on Both Ends