html - Controlling the amount of space in justify-content: space-between - Stack Overflow
why is my justify-content: space-between not working on flex items?
What is difference between justify-self, justify-items and justify-content in CSS grid? - Stack Overflow
In flexbox, whats the difference between setting justify-content to flex-start and start ?
Videos
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-betweenfor 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.
My solution was :
- put dummy empty divs in between with a max-height specified
- change space-between to flex-start
- set the content blocks to nogrow
- set the dummy divs to grow
Then the spaces grow up to a max specified.
>> https://codepen.io/coderr11/pen/rNRwVmy
My code pen is above.
header is the parent, where i have placed: display: flex, align-items: center, and justify-content: space-evenly on it.
The child elements of it are .logo-image, .navbar, .btn and .fas - However, .logo-image takes up most of the width as seen by the red background and other flex items are squished to the left and are spaced-evenly. I can define a width on the .logo-image, but why is the default nature of it takes so much space compared to the other flex items?
Thank you
To answer your questions:
1
As reiallenramos mentioned, "The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property." - MDN
2-3
This screen shot from W3 does an excellent job of showing what they do and the differences between them.

Good To Knows:
For more information and example, I would suggest you check out:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
- https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
- https://www.smashingmagazine.com/2017/12/grid-inspector/
And for some inspiration:
- https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/
Key differences between justify-content, justify-items and justify-self in CSS Grid:
- The
justify-contentproperty controls the alignment of grid columns. It is set on the grid container. It does not apply to or control the alignment of grid items. - The
justify-itemsproperty controls the alignment of grid items. It is set on the grid container. - The
justify-selfproperty overridesjustify-itemson individual items. It is set on grid items and inherits the value ofjustify-items, by default.
Example
Here's a 2x3 grid.
- 2 columns, each 100px wide
- 3 rows, each 50px tall
The container is:
- 500px wide
- 250px tall

.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
width: 500px;
height: 250px;
grid-template-areas: " one two"
" three four"
" five six ";
}
.box:nth-child(1) { grid-area: one; }
.box:nth-child(2) { grid-area: two; }
.box:nth-child(3) { grid-area: three; }
.box:nth-child(4) { grid-area: four; }
.box:nth-child(5) { grid-area: five; }
.box:nth-child(6) { grid-area: six; }
/* non-essential decorative styles */
body {
display: flex;
justify-content: center;
}
.container {
background-color: #ddd;
border: 1px solid #aaa;
}
.box {
background-color: lightgreen;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
<div class="box"><span>6</span></div>
</div>
justify-content
The justify-content property aligns columns within the container.

.container {
justify-content: space-between;
}
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
width: 500px;
height: 250px;
grid-template-areas: " one two"
" three four"
" five six ";
}
.box:nth-child(1) { grid-area: one; }
.box:nth-child(2) { grid-area: two; }
.box:nth-child(3) { grid-area: three; }
.box:nth-child(4) { grid-area: four; }
.box:nth-child(5) { grid-area: five; }
.box:nth-child(6) { grid-area: six; }
/* non-essential decorative styles */
body {
display: flex;
justify-content: center;
}
.container {
background-color: #ddd;
border: 1px solid #aaa;
}
.box {
background-color: lightgreen;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
<div class="box"><span>6</span></div>
</div>
With justify-content: space-between both columns are pinned to the edges. The grid items shift only because they exist inside those columns. They are otherwise unaffected.
Note that this property works only when there is free space in the container. If any of the columns were sized with fr, then all free space would be consumed, and justify-content would have no effect.
justify-items
The justify-items property aligns grid items within their tracks (not the entire container)

.container {
justify-items: center;
}
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
width: 500px;
height: 250px;
grid-template-areas: " one two"
" three four"
" five six ";
}
.box:nth-child(1) { grid-area: one; }
.box:nth-child(2) { grid-area: two; }
.box:nth-child(3) { grid-area: three; }
.box:nth-child(4) { grid-area: four; }
.box:nth-child(5) { grid-area: five; }
.box:nth-child(6) { grid-area: six; }
/* non-essential decorative styles */
body {
display: flex;
justify-content: center;
}
.container {
background-color: #ddd;
border: 1px solid #aaa;
}
.box {
background-color: lightgreen;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
<div class="box"><span>6</span></div>
</div>
With justify-items: center the grid items are centered within their columns.
justify-self
The justify-self property overrides justify-items on individual items.

.container { justify-items: center;}
.box:nth-child(2) { justify-self: start; }
.box:nth-child(3) { justify-self: end; }
.box:nth-child(6) { justify-self: stretch; }
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
width: 500px;
height: 250px;
grid-template-areas: " one two"
" three four"
" five six ";
}
.box:nth-child(1) { grid-area: one; }
.box:nth-child(2) { grid-area: two; }
.box:nth-child(3) { grid-area: three; }
.box:nth-child(4) { grid-area: four; }
.box:nth-child(5) { grid-area: five; }
.box:nth-child(6) { grid-area: six; }
/* non-essential decorative styles */
body {
display: flex;
justify-content: center;
}
.container {
background-color: #ddd;
border: 1px solid #aaa;
}
.box {
background-color: lightgreen;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
<div class="box"><span>6</span></div>
</div>
align-content, align-items and align-self
These properties do the same as their justify-* counterparts, but in the perpendicular direction.
More here: What is the difference between align-items vs. align-content in Grid Layout?
Spec Reference
10.3. Row-axis Alignment: the
justify-selfandjustify-itemspropertiesGrid items can be aligned in the inline dimension by using the
justify-selfproperty on the grid item orjustify-itemsproperty on the grid container.10.4. Column-axis Alignment: the
align-selfandalign-itemspropertiesGrid items can also be aligned in the block dimension (perpendicular to the inline dimension) by using the
align-selfproperty on the grid item oralign-itemsproperty on the grid container.10.5. Aligning the Grid: the
justify-contentandalign-contentpropertiesIf the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the
justify-contentandalign-contentproperties on the grid container.(emphasis added)
CSS Box Alignment Module
You wrote:
Is the
justify-itemsproperty in Flex-box the same as thejustify-itemsproperty in Grid?
Although the Flex and Grid specs provide their own definitions for keyword alignment properties, such as justify-items and align-content, the W3C is in the process of phasing out alignment properties for individual box models and implementing their new Box Alignment Module, which seeks to define a set of alignment properties for use across all box models.
From the flexbox spec:
1.2. Module interactions
The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (
justify-content,align-items,align-self,align-content) introduced here.
There are similar references in the Grid spec.