Flexbox: default item settings

README.md

Flexbox: Default item settings and shortcuts

Getting Started

Recommended path for Flex experimentation:

1. Decide on your container:

   .container {
     display: flex;
   }

2. Experiment with the following shorthand flex declarations without wrapping in the row direction (default):

   • flex: 0 auto (default; same as flex: initial);
   • flex: auto;
   • flex: none;
   • flex: <integer>.

3. Add responsiveness to the above with media queries.

4. Add wrapping (flex-wrap: wrap) with fixed item sizes (no growing/shrinking):

   .container {
     display: flex;
     flex-wrap: wrap
   }
   .container > * {
     flex: 0 0 <length>;
   }

   OR:

   .container > * {
     flex: 0 0 auto;
   }

   ...and set a fixed size to the item content.

5. Mix wrapping with variable sized items.

6. Limit growth and shrinkage with min-width and max-wdith.

Attributions

• Font Awesome - Basic Use

index.html

<h2>Default</h2>
<section class="container">
  <div class="one"><i class="fas fa-user-secret"></i></div>
  <div class="two"><i class="fas fa-hamburger"></i></div>
  <div class="three"><i class="fas fa-umbrella-beach"></i></div>
  <div class="four"><i class="fas fa-cat"></i></div>
</section>






<!-- Assets/Dependencies -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

style.css

/***********/
/* Default */
/***********/

.container {
  display: flex;
}

.one {
  /* Default flex item */
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.two {
  /* `flex: auto` is shorthand for `flex: 1 1 auto`, or: */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.three {
  /* `flex: none` is shorthand for `flex: 0 0 auto`, or: */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.four {
  /* `flex: <positive-number>` is shorthand for `flex: 1 0px`, or: */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
}

/*********/
/* Reset */
/*********/
* {
  box-sizing: border-box;
}


/******************/
/* Make it pretty */
/******************/

.container > * {
  padding: 2rem;
  text-align: center;
}

i {
  font-size: 75px;
}

.container div:nth-child(1) {
  background: hsl(60deg, 100%, 50%);
  color: hsl(0deg, 50%, 15%);
}

.container div:nth-child(2) {
  background: hsl(120deg, 100%, 50%);
  color: hsl(60deg, 50%, 15%);
}

.container div:nth-child(3) {
  background: hsl(210deg, 100%, 50%);
  color: hsl(150deg, 50%, 12%);
}

.container div:nth-child(4) {
  background: hsl(270deg, 100%, 50%);
  color: hsl(210deg, 50%, 12%);
}

.container div:nth-child(5) {
  background: hsl(330deg, 100%, 50%);
  color: hsl(270deg, 50%, 12%);
}