Justify content flex end

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

Justify content flex end

<!DOCTYPE html>
<html>
<head>
   <style>
   	.flex-container{
   	    display: flex;
        justify-content: flex-end;
   	    background: coral;
   	}
   	.flex-item{
   	    width: 100px;
   	    height: 100px;
   	    margin: 10px;
   	    text-align: center;
   	    line-height: 100px;
   	    font-size: 25px;
   	    background: white;
   	}
   </style>
</head>
<body>
	<h1>CSS justify-content Property</h1>
	<h2>justify-content: flex-end</h2>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
    
    <p><b>Note: </b>Notice that the flex items are aligned at the end of the flex container.</p>
</body>
</html>

Source: programmersportal.com

Similar codes

0 vote158 views1 answer
Bootstrap align right button
Html
0 vote156 views1 answer
Html embed from mem
Html
1 vote164 views1 answer
Jquery specific child by index
Html
1 vote175 views2 answers
The package flectra needs to be reinstalled, but I can't find an archive for it.
Html
98 votes163 views6 answers
How to hide scrollbar html
Html
0 vote211 views2 answers
Twitter card tags
Html
0 vote242 views1 answer
How to add href of messaGing IN ANCHOR TAG
Html
0 vote167 views1 answer
Html click on link to open text message
Html
0 vote177 views1 answer
Color ful scroll bar
Html
17 votes166 views2 answers
A tag target
Html