Justify-content css

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 css

1)justify-content determine how remaining space in the container will be
distributed around the flex elements if there is any remaining space
in the container main axis.

2)justify-content accepts 5 values =>
flex-start=> default,
flex-end,center,space-between,space-around.
.flex-container {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

Source: grepper.com

Similar codes

0 vote325 views1 answer
Vue src string concatenation
Html
1 vote332 views2 answers
Livewire file upload
Html
3 votes363 views1 answer
What is the best programming language in 2021
Html
5 votes331 views5 answers
Table in README
Html
0 vote427 views1 answer
How to add href of messaGing IN ANCHOR TAG
Html
0 vote390 views1 answer
Html5 mail link
Html
1 vote344 views2 answers
How to change the preview image of a website
Html
-2 votes367 views2 answers
How to use input type file and show selected file on screen
Html
1 vote326 views1 answer
How to only make a part bold in css
Html
3 votes349 views1 answer
Python parse html
Html