Answers for "css flex justify-content space-between"

flex justify-content

Diffrient types of justify-content properties in CSS:
1)normal : "Normal-alignment."
2)space-between :  "Distribute items evenly The first item is flush with the
"start,the last is flush with the end."
3)space-around : "Distribute items evenly Items have a half-size space.
4)space-evenly : "Distribute items evenly Items have equal space around them.
5)stretch : "Distribute items evenly Stretch 'auto'-sized items to fit.
6)center : "Pack items around the center
7)flex-start : "Pack flex items from the start 
8)flex-end :   "Pack flex items from the end
9)more... ('upvote please!')

justify content

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
/* justify-content does not take baseline values */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

flexbox space between

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

gap between two flex items

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

justify-content vs align-items

(Note: The X and Y axis / alignment direction can change depending 
if you are using flex-direction: row or column)

1. justify-content: Horizontal-X-axis
Alignment & Spacing along primary axis (X-axis)

flex-start; Align children horizontally left

flex-end; Align children horizontally right

center; Align children horizontally centered (amaze!)

space-between; Distribute children horizontally evenly across
entire width

space-around; Distribute children horizontally evenly across 
entire width (but with space on the edges

2. align-items: Vertical-Y-axis
Alignment only along secondary axis (Y-axis)

flex-start; Align children vertically top

flex-end; Align children vertically bottom

center; Align children vertically centered (amaze!)

baseline; Aligned children vertically so their baselines align 
(doesn't really work)

stretch; Force children to be height of container (great for columns)
See it in action:

http://codepen.io/enxaneta/full/adLPwv/

justify-content

justify-content: flex-start;}