flex column equal height code example

Example 1: how to make all div same height

<html>
	<head>
    	<title>Web page</title>
    </head>
    <body>
    	<div id="divContainer">
          <div id="divOne">
          	<p>Paragraph 1</p>
            <p>Another Paragraph</p>
          </div>
          <div id="divTwo">
          	<p>Paragraph 2</p>
          </div>
        </div>
    </body>
    <style>
    	#divContainer {
        	display: flex;
        }
        #divOne {
        	background-color: red;
        }
        #divTwo {
        	background-color: blue;
        }
    </style>
</html>

Example 2: make three column with equal height using flexbox

.pseudo-three-col {
  position: relative;
  background: #eee;
  z-index: 1;
  width: 100%;
}
.pseudo-three-col .col {
  position: relative;
  width: 27%;
  padding: 3%;
  float: left;
}
.pseudo-three-col .col:nth-child(1) { left: 33%; border:solid black }
.pseudo-three-col .col:nth-child(2) { left: -33.3%; }
.pseudo-three-col .col:nth-child(3) { left: 0; }
.pseudo-three-col:before, .pseudo-three-col:after {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 33.4%;
  width: 33.4%;
  height: 100%;
  background: #ccc;
}
.pseudo-three-col:after {
  left: 66.667%;
  background: #eee;
}

Tags:

Misc Example

Recent Posts