Codepen Example Start

Codepen-Example-Start.markdown

Codepen Example Start

This is just a start template for my eaaching examples

A Pen by DevTips on CodePen.

License.

index.html

<h1>CSS Flexbox Essentials</h1>

<div class="example example-definition">
  <h2>What Is Flexbox?</h2>
  <div class="example-content">
    <p>The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents. </p>
    <cite><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">—mdn</a></cite>
  </div>
</div>

<div class="example example-default">
  <h2>Default Display</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>


<div class="example example-flex">
  <h2>Display: flex</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>


<div class="example example-direction">
  <h2>row-reverse</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>



<div class="example example-wrap">
  <h2>flex-wrap</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>




<div class="example example-justify">
  <h2>justify-content</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>





<div class="example example-align">
  <h2>align-items</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>





<div class="example example-align-content">
  <h2>align-content</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>


<div class="example example-order">
  <h2>order</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>


<div class="example example-grow">
  <h2>flex-grow</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>



<div class="example example-shrink">
  <h2>flex-shrink</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>




<div class="example example-basis">
  <h2>flex-basis</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>



<div class="example example-align-self">
  <h2>align-self</h2>
  <div class="example-content">
    
    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
  </div>
</div>

style.css

.parent {
  border: 5px solid lightcoral;
}

.item {
  /*height: 50px;*/
  margin: 5px;
  background: DeepSkyBlue;
  color: white;
  text-align: center;
  line-height: 50px;
  font-weight: 600;
}



/**** display: flex ****/


.example-flex .parent {
  display: flex;
}

.example-flex .item {
  width: 50px;
}




/**** flex-direction ****/


.example-direction .parent {
  display: flex;
  flex-direction: row-reverse;
}

.example-direction .item {
  width: 50px;
}




/**** flex-wrap ****/


.example-wrap .parent {
  display: flex;
  flex-wrap: wrap;
}

.example-wrap .item {
  width: 30%;
}





/**** justify-content ****/


.example-justify .parent {
  display: flex;
  justify-content: space-around;
}

.example-justify .item {
  width: 50px;
}





/**** align-items ****/


.example-align .parent {
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  
}

.example-align .item {
  width: 50px;
}





/**** align-content ****/


.example-align-content .parent {
  height: 200px;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.example-align-content .item {
  width: 20%;
}





/**** order ****/


.example-order .parent {
  display: flex;
}

.example-order .item {
  width: 50px;
}

.example-order .item:nth-child(2) {
  order: 1;
  background: lightgreen;
}






/**** flex-grow ****/


.example-grow .parent {
  display: flex;
}

.example-grow .item {
  width: 50px;
}

.example-grow .item:nth-child(2) {
  flex-grow: 2;
  background: lightgreen;
}






/**** flex-shrink ****/


.example-shrink .parent {
  display: flex;
}

.example-shrink .item {
  width: 200px;
}

.example-shrink .item:nth-child(2) {
  flex-shrink: 2;
  background: lightgreen;
}






/**** flex-basis ****/


.example-basis .parent {
  display: flex;
  flex-direction: column;
}

.example-basis .item {
  width: 200px;
}

.example-basis .item:nth-child(2) {
  flex-basis: 39px;
  background: lightgreen;
}






/**** align-self ****/


.example-align-self .parent {
  height: 200px;
  display: flex;
  justify-content: space-between;
}

.example-align-self .item {
  width: 50px;
  height: 50px;
}

.example-align-self .item:nth-child(2) {
  align-self: flex-end;
  background: lightgreen;
}