Flexbox

In this example below you will see how to do a Flexbox with some HTML / CSS and Javascript

Play around with flexbox.

Thumbnail
This awesome code was written by pborad, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pborad ©
  • HTML
  • CSS
  • JavaScript
    <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h1> Flexbox </h1>
  <div class="flex-grid container1">
    <div class="col"> The container for these divs has class to restrict to 600px so that they <strong>should</strong> expand outside of the containing box.<strong> Added </strong> flex-wrap: wrap so this does not happen and are moved to a new row.
    </div>

    <div class="col">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi deserunt sed fuga voluptatem voluptatibus. Beatae nisi quaerat veritatis a consequatur voluptatem distinctio cupiditate sapiente natus dolore laudantium, nostrum minus accusantium.

    </div>
    <div class="col"> Have added flex 3 to every third column to expand these.</div>
    <div class="col">Quod doloremque neque alias in quibusdam, sapiente dolore nihil aut rerum mollitia delectus aperiam, deleniti maxime tempore suscipit eius quia temporibus. Ipsam dolores minima totam magni delectus quod itaque ipsa.</div>
    <div class="col">Consequatur minima commodi mollitia deleniti possimus laboriosam officia cum labore in natus? Architecto, unde? Doloremque aut veritatis sequi excepturi animi eaque qui voluptatem quasi illo esse iste, perferendis, magnam voluptates?</div>
    <div class="col">Modi culpa excepturi ipsa? Dignissimos sunt quisquam blanditiis natus dolore aspernatur. Quod possimus incidunt cum eveniet voluptatibus labore quia, nesciunt facilis. Saepe libero, qui soluta aliquid earum ullam sapiente dolore.</div>


  </div>


  <div class="flex-grid">
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quaerat corporis iusto deserunt ratione aut corrupti blanditiis autem accusamus rem! Impedit nihil modi magni id non at voluptates reiciendis fugit? Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Facere impedit at quas nihil perspiciatis ducimus. Architecto facilis autem aliquid, fuga earum ab dignissimos numquam voluptas libero, non temporibus doloremque labore?</div>

  </div>

  <div class="flex-grid">
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quaerat corporis iusto deserunt ratione aut corrupti blanditiis autem accusamus rem! Impedit nihil modi magni id non at voluptates reiciendis fugit?</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quaerat corporis iusto deserunt ratione aut corrupti blanditiis autem accusamus rem! Impedit nihil modi magni id non at voluptates reiciendis fugit?</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quaerat corporis iusto deserunt ratione aut corrupti blanditiis autem accusamus rem! Impedit nihil modi magni id non at voluptates reiciendis fugit?</div>

  </div>


  <div class="flex-grid reverse">
    <div class="col">AAAAA Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quaerat corporis iusto deserunt ratione aut corrupti blanditiis autem accusamus rem! Impedit nihil modi magni id non at voluptates reiciendis fugit?</div>
    <div class="col">BBBB Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quaerat corporis iusto deserunt ratione aut corrupti blanditiis autem accusamus rem! Impedit nihil modi magni id non at voluptates reiciendis fugit?</div>
    <div class="col">CCCC The flex direction has been changed to row-reverse so the columns are displayed in reverse order. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quaerat corporis iusto deserunt ratione aut corrupti blanditiis autem accusamus
      rem! Impedit nihil modi magni id non at voluptates reiciendis fugit?</div>

  </div>

  </div>


  <div class="flex-grid as-column">
    <div class="col">A change so that displayed vertically</div>
    <div class="col">B </div>
  </div>


  <div class="flex-grid-centered">
    <div class="col">The containing flex grid has align-items: center set. This aligns the content items in the cross axis (in this case vertically. The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end
      of this axis are called the cross start and cross end.The main axis is the axis running in the direction the flex items are being laid out in.  
     </div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, architecto, alias reprehenderit doloremque quo vel a facere dolor consectetur soluta illum odio debitis cumque accusamus quod enim facilis. At, porro?</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, architecto, alias reprehenderit doloremque quo vel a facere dolor consectetur soluta illum odio debitis cumque accusamus quod enim facilis. At, porro?</div>


  </div>
  </div>




</body>

</html>

/*Downloaded from https://www.codeseek.co/pborad/flexbox-LjPExb */
    h1 {
  text-align: center;
  color:  green;
}

.flex-grid {
  display: flex;
  border: 10px solid green;
  flex-direction: row;
  flex-wrap: wrap
/*   flex-direction: column */
}

.flex-grid .col {
          flex: 1;
          margin: 10px;
}

/* make the first container  */
.container1{
   width: 600px;
  
}

.flex-grid {
  margin: 0 0 20px 0;
}

.col {
  background: salmon;
  padding: 20px;
}

.col:nth-of-type(3) {
  flex: 3;
}

.reverse {
  flex-direction: row-reverse;
  
}

.as-column {
  flex-direction: column;
  
}

.flex-grid-centered {
  height: 300px;
  display: flex;
  align-items: center;
}

.flex-grid-centered .col {
          flex: 1;
          margin: 10px;
}







/*Downloaded from https://www.codeseek.co/pborad/flexbox-LjPExb */
    

Comments