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

15 votes318 views2 answers
Html datetime format
Html
9 votes354 views1 answer
2 way bind vue
Html
0 vote328 views1 answer
Cursive text html
Html
0 vote316 views1 answer
Icon not shwing in goole search
Html
0 vote358 views2 answers
How to write the latex in html
Html
1 vote314 views1 answer
Html dns prefetch
Html
0 vote314 views1 answer
Html button shortcut key
Html
1 vote293 views1 answer
How to write superscript in markdown
Html
6 votes359 views3 answers
Html head
Html
-1 vote337 views3 answers
Bootstrap footer bottom of page
Html