difference between justify content and align items code example

Example 1: flexbox align right and left

.primary-nav {
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    padding:0;
    justify-content:flex-end;
}

.left {
    margin-right:auto;
}

Example 2: 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;

Example 3: flex align children to side

flex-direction: column;
align-items: flex-start; //left
align-items: center; //center
align-items: flex-end; //right

Example 4: difference between align-content and align-items

First, align-items is for items in a single row. So for a single row of elements on main axis, align-items will align these items respective of each other and it will start with fresh perspective from the next row.

Now, align-content doesn't interfere with items in a row but with rows itself. Hence, align-content will try to align rows with respect to each other and flex container.

Check this fiddle : https://jsfiddle.net/htym5zkn/8/

Example 5: 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/

Tags:

Css Example

Recent Posts