Justify content align items

Justify content

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Source: getbootstrap.com

Justify content css

/* 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;

Source: developer.mozilla.org

How center content in css by using flex

	display: flex;
    width: 60%;
    justify-content: center;
    margin: 0 auto;

Justify content align items

display: 
    > flex <!-- Creates a flex-box container. Items in this container 
    become flex-box items. Useful for laying out elements in a single 
	row or column responsively. These items can have the following declerations 
    applied to them: -->

flex-direction: determines which direction is the main axis
	> row <!-- Main axis is left to right -->
    > row-reversed <!-- Main axis is right to left -->
    > column <!-- Main axis is top to bottom -->
    > column-reversed <!-- Main axis is bottom to bottom -->

flex-wrap: wraps content in flexcontainer if necessary
	> nowrap (default)
	> wrap

flex-flow: specifies both flex-direction and flex-wrap
	> ex = flex-flow: row wrap

justify-content: determines how elements are positioned along main axis (again, main axis is set by flex direction)
	> flex-start <!-- This is affected accordingly if main axis is reversed -->
    > flex-end <!-- This is affected accordingly if main axis is reversed -->
    > center
	> etc.

align-items: determines how elements are positioned along the non main axis, the cross axis (again, main axis is set by flex direction)
	> flex-start <!-- This is affected accordingly if main axis is reversed -->
    > flex-end <!-- This is affected accordingly if main axis is reversed -->
    > center
	> etc.
	> Note, align-items has a different meaning if display from above is NOT set to flex and is set to grid, ie (display: grid)
	
	When items are wraped, you use flex-content to change how rows are positioned to each other

align-content: 
	> center
	> space-between
	> space-around
	> etc.

Similar codes

2 votes215 views1 answer
Html insert remote image
Html
1 vote148 views1 answer
Jinja avoid auto escape
Html
2 votes157 views1 answer
Html ß
Html
9 votes161 views5 answers
Git tag
Html
0 vote181 views1 answer
Resize the image in jupyter notebook
Html
5 votes154 views1 answer
Javascript tutorial for beginners
Html
2 votes170 views2 answers
Multiple select dropdown ionic
Html
0 vote157 views1 answer
Drag and drop to css
Html
2 votes150 views2 answers
Lock the zoom html
Html
1 vote213 views3 answers
Grepper gold
Html