Snippets Collections
.flexwithgap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
.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 */

Thu Aug 11 2022 23:23:55 GMT+0000 (UTC)

#css #flexbox

Wed Jul 21 2021 11:38:00 GMT+0000 (UTC)

#flexbox #css

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

#css #flexbox #horizontal-center

Fri May 21 2021 20:01:42 GMT+0000 (UTC)

#css #flexbox

Save snippets that work with our extensions

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