<h1>Take A Look At The CSS Or Inspect Elements</h1>
<!-- One Item Alignments -->
<section class="one-item-left">
    <h3>
        One Item - Left Aligned
    </h3>
    <div class="flex">
        <div class="box"></div>
    </div>
</section>
<section class="one-item-right">
    <h3>
        One Item - Right Aligned
    </h3>
    <div class="flex">
        <div class="box"></div>
    </div>
</section>
<section class="one-item-center">
    <h3>
        One Item - Center Aligned
    </h3>
    <div class="flex">
        <div class="box"></div>
    </div>
</section>

<!-- Two Item Alignments -->
<section class="two-items-left">
    <h3>
        Two Items - Left Aligned
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>
<section class="two-items-right">
    <h3>
        Two Items - Right Aligned
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>
<section class="two-items-center">
    <h3>
        Two Items - Center Aligned
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>
<section class="two-items-each-end">
    <h3>
        Two Items - Each End
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="two-items-equal-space">
    <h3>
        Two Items - Equally Distributed Space
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="two-items-left-center">
    <h3>
        Two Items - Left Center (
        <small> Not really in the center. NEED HELP </small>)
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="two-items-right-center">
    <h3>
        Two Items - Right Center (
        <small> Not really in the center. NEED HELP </small>)
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="two-items-50-50">
    <h3>
        Two Items - 50-50
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>
<section class="two-items-one-rest">
    <h3>
        Two Items - One take the rest of the space
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<!-- Three Item Alignments -->
<section class="three-items-left">
    <h3>
        Three Items - Left
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="three-items-right">
    <h3>
        Three Items - Right
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="three-items-center">
    <h3>
        Three Items - Center
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="three-items-left-center-right">
    <h3>
        Three Items - Extreme Left + Center + Extreme Right
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="three-items-equal-space">
    <h3>
        Three Items - Equally Distributed Space
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="three-items-two-left-one-right">
    <h3>
        Three Items - Two Left + One Right
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="three-items-two-right-one-left">
    <h3>
        Three Items - Two Right + One Left
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="three-items-one-third">
    <h3>
        Three Items - Each Item, One Third
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>

<section class="three-items-center-rest">
    <h3>
        Three Items - Center Takes the rest of the space
    </h3>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</section>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  max-width: 960px;
  min-height: 100vh;
  margin: auto;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
}
section {
  padding: 2rem;
  box-shadow: 0 6px 10px -4px rgba(0,0,0,0.3);
  margin: 2rem 0;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
}
h1 {
  padding: 1rem;
}
section h3 {
  margin-bottom: 1rem;
  text-transform: capitalize;
  font-weight: 100;
}
small {
  color: #444;
  font-size: 0.75rem;
}

/* Ignore anything above this. */

/* Base Setup Work */
.flex {
  display: flex;
  padding: 2rem;
  border: 2px dashed #ccc; 
}
.box {
  margin-left: 1rem;
  border-radius: 1rem;
  height: 100px; 
  width: 100px;
  background: linear-gradient(to bottom right, #121189, #990056);
  border: 1px solid rgba(0,0,0,0.3);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.box:first-child {
  margin-left: 0;
}
.box::after {
  content: 'Item';
  color: #fff;
}

/**----------------------------------
| ONE ITEM
----------------------------------*/
/* One Item Left */
/* Requires no extra work. */

/*One Item Right*/
.one-item-right .flex{
  justify-content: flex-end;
}
/* One Item Center */
.one-item-center .flex {
  justify-content: center;
}

/**----------------------------------
| TWO ITEMS
----------------------------------*/

/* Two Items - Left */
/* Requires no extra work. */

/* Two Items - Right */
.two-items-right .flex{
  justify-content: flex-end;
}
/* Two Items - Center */
.two-items-center .flex{
  justify-content: center;
}
/* Two Items - One at each end */
.two-items-each-end .flex{
  justify-content: space-between;
}
/* Two Items -  Equally Distributed Space*/
.two-items-equal-space .flex{
  justify-content: space-around;
}

/* Two Items - Left + Center */
.two-items-left-center .flex {
  justify-content: center;
}
.two-items-left-center .box:nth-child(2) {
  margin: auto;
}
/* Two Items - Right + Center */
.two-items-right-center .flex {
  justify-content: center;
}
.two-items-right-center .box:nth-child(1) {
  margin: auto;
}
/* Two Items - 50-50 */
.two-items-50-50 .box {
  flex: 1;
}
/* Two Items - One take the rest of the space */
.two-items-one-rest .box:nth-child(2) {
  flex: 1;
}

/**----------------------------------
| THREE ITEMS
----------------------------------*/
/* Three Items Left */
/* Requires no extra work */

/* Three Items - Right */
.three-items-right .flex{
  justify-content: flex-end;
}
/* Three Items - Center */
.three-items-center .flex{
  justify-content: center;
}
/* Three Items - Left + Center + Right */
.three-items-left-center-right .flex {
  justify-content: space-between;
}
/* Three Items - Equally Distributed Space */
.three-items-equal-space .flex {
  justify-content: space-around;
}
/* Three Items - Two Left + One Right */
.three-items-two-left-one-right .box:nth-child(3) {
  margin-left: auto;
}
/* Three Items - Two Right + One Left */
.three-items-two-right-one-left .flex {
  justify-content: flex-end;
}
.three-items-two-right-one-left .box:nth-child(1) {
  margin-right: auto;
}

/* Three Items - Each Item, One Third */
.three-items-one-third .box {
  flex: 1;
}
/* Three Items - Center takes the rest of the space */
.three-items-center-rest .box:nth-child(2){
  flex: 1;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.