Same Height Block using CSS3 Flexbox

HTML Code (index.html)
<!DOCTYPE html>
<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>Same Height Block</title>
  <!-- using font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,600" rel="stylesheet">
  <!-- importing reset and custom css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- flexbox method -->
    <div class="holder">
      <h2>Flexbox Method</h2>
      <div class="flexboxMethod">
        <!-- 1st col -->
        <div class="col">
          <div class="icon">
            <i class="fab fa-html5"></i>
          </div>
          <h3>HTML</h3>
          <p>Lorem ipsum dolor sit amet, nam legimus antiopam et. Ad sed virtute dolores. Ad his nobis virtute. Errem fuisset repudiandae te duo. Vix ei urbanitas democritum reformidans.</p>
        </div>
        <!-- 2nd col -->
        <div class="col">
          <div class="icon">
            <i class="fab fa-java"></i>
          </div>
          <h3>Java</h3>
          <p>At eum ridens possit, cum at dicit habemus. Et simul prodesset interpretaris vix, in mei adhuc abhorreant. Quidam volutpat argumentum vim ea</p>
          <p>Lorem ipsum dolor sit amet, tota phaedrum ut mel. No pri tamquam facilis, vel audire voluptaria quaerendum cu.</p>
        </div>
        <!-- 3rd col -->
        <div class="col">
          <div class="icon">
            <i class="fab fa-node-js"></i>
          </div>
          <h3>Node JS</h3>
          <p>Recteque signiferumque at mea. An brute quaeque nec, vix graece prompta rationibus cu, est id wisi justo recteque. Mei vide cibo detraxit eu, sit ut mollis euismod comprehensam. Probo fabulas eam in. Usu semper referrentur eu, eam idque perfecto in</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS Code (reset.css)
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

CSS Code (main.css)
/* general */

body {
  font: 300 16px/1.5 'Roboto', sans-serif;
  color: #333;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.holder {
  border-bottom: 1px dashed #ccc;
  padding: 30px 0;
  margin: 0 0 30px;
}

h2 {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 20px;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}

p {
  margin: 0 0 20px;
}

/* styling icons */
.icon {
  font-size: 60px;
  color: #F9690E;
}

.icon .fa-java {
  color: #3498DB;
}

.icon .fa-node-js {
  color: #2ECC71;
}

/* flexbox method */

Video Tutorial


Updated CSS (main.css)
.flexboxMethod {
  display: flex;
  text-align: center;
  margin: 0 -10px;
}

.flexboxMethod .col {
  flex: 1;
  background: #f1f1f1;
  padding: 25px;
  margin: 0 10px;
}

Share this

Related Posts