Snippets Collections
.flex-container {

  /* We first create a flex layout context */

  display: flex;

  

  /* Then we define the flow direction 

     and if we allow the items to wrap 

   * Remember this is the same as:

   * flex-direction: row;

   * flex-wrap: wrap;

   */

  flex-flow: row wrap;

  

  /* Then we define how is distributed the remaining space */

  justify-content: space-around;

  

  padding: 0;

  margin: 0;

  list-style: none;
// for parent div
      style="display: flex; align-items: center; justify-content: center"
.container {
  display: flex; /* or inline-flex */
}
star

Wed Jul 21 2021 11:38:00 GMT+0000 (UTC) https://codepen.io/team/css-tricks/pen/EKEYob

#flexbox #css
star

Sat May 22 2021 07:00:42 GMT+0000 (UTC)

#css #flexbox #horizontal-center
star

Fri May 21 2021 20:01:42 GMT+0000 (UTC) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css #flexbox

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension