Creating Layout Without Flexbox

Flex-Direction

  • row: displays elements horizontally.
//HTML
<div class="container">
<div class="element inline-block">Element 1</div>
<div class="element inline-block">Element 2</div>
<div class="element inline-block">Element 3</div>
</div>
//CSS
.container {
padding: 0.5em;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
display: block;
margin-bottom: 1em;
}
.element {
padding: 0.5em;
background-color: rgba(21, 101, 192, 1);
color: rgba(255, 255, 255, 1);
}
.inline-block {
display: inline-block;
}
  • row-reverse: displays elements horizontally in reverse order.
//HTML
<div class="container direction-reverse">
<div class="element inline-block">Element 1</div>
<div class="element inline-block">Element 2</div>
<div class="element inline-block">Element 3</div>
</div>
//CSS
.inline-block ...
.direction-reverse {
direction: rtl;
}
  • column: displays elements vertically.
//HTML
<div class="container">
<div class="element block">Element 1</div>
<div class="element block">Element 2</div>
<div class="element block">Element 3</div>
</div>
//CSS
.block {
display: block; //You don't need to include this if you are using block element like div, p, etc.
}
  • column-reverse: displays elements vertically in reverse order.
//HTML
<div class="container column-reverse">
<div class="element block column-reverse">Element 1</div>
<div class="element block column-reverse">Element 2</div>
<div class="element block column-reverse">Element 3</div>
</div>
//CSS
.block ...
.column-reverse {
transform: scaleY(-1);
}

Flex Wrap

  • nowrap: elements will never break into multiple lines when it passed its container.
//HTML
<div class="container nowrap">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
<div class="element">Element 3</div>
.
.
.
<div class="element">Element 19</div>
</div>
//CSS
.nowrap {
display: table;
}
.nowrap > div {
display: table-cell;
}
  • wrap: elements will break into multiple lines when it passed its container.
//HTML
<div class="container nowrap">
<div class="element wrap">Element 1</div>
<div class="element wrap">Element 2</div>
<div class="element wrap">Element 3</div>
.
.
.
<div class="element wrap">Element 14</div>
</div>
//CSS
.inline-block, .wrap {
display: inline-block;
}
  • wrap-reverse: behaves like wrap, but in reverse order.
//HTML
<div class="container nowrap">
<div class="element wrap">Element 1</div>
<div class="element wrap">Element 2</div>
<div class="element wrap">Element 3</div>
.
.
.
<div class="element wrap">Element 14</div>
</div>
//CSS
.column-reverse,
.wrap-reverse {
transform: scaleY(-1);
}

Justify Content

  • flex-start: the elements are aligned to the left of its container.
//HTML
<div class="container flex-start">
<div class="element inline-block">Element 1</div>
<div class="element inline-block">Element 2</div>
<div class="element inline-block">Element 3</div>
</div>
//CSS
.inline-block ...
.flex-start {
text-align: left; //It is okay if you don't want to declare this. I just want to show the difference between flex-start and flex-end using non flex layout.
}
  • flex-end: the elements are aligned to the right of its container.
//HTML
<div class="container flex-end">
<div class="element inline-block">Element 1</div>
<div class="element inline-block">Element 2</div>
<div class="element inline-block">Element 3</div>
</div>
//CSS
.inline-block ...
.flex-start {
text-align: right;
}
  • center: the elements are aligned to the center of its container.
//HTML
<div class="container center">
<div class="element inline-block">Element 1</div>
<div class="element inline-block">Element 2</div>
<div class="element inline-block">Element 3</div>
</div>
//CSS
.inline-block ...
.center {
text-align: center;
}
  • space-between: the elements are justified from the start to the end of its container.
//HTML
<div class="container space-between">
<div class="element inline-block">Element 1</div>
<div class="element inline-block">Element 2</div>
<div class="element inline-block">Element 3</div>
</div>
//CSS
.inline-block ...
.space-between {
text-align: justify;
}
.space-between::after {
content: "";
display: inline-block;
width: 100%;
}
  • space-around: the elements are evenly distributed relative to their container width.
//HTML
<div class="container space-between">
<div class="element inline-block">Element 1</div>
<div class="element inline-block">Element 2</div>
<div class="element inline-block">Element 3</div>
</div>
//CSS
.inline-block ...
.nowrap,
.space-around {
display: table;
}
.space-around > div {
display: table-cell;
text-align: center;
}

Align Items

  • flex-start: Vertically align elements to the start of their container.
//HTML
<div class="container">
<div class="element vertical-flex-start">Element 1</div>
<div class="element vertical-flex-start">Element 2</div>
<div class="element vertical-flex-start">Element 3</div>
</div>
//CSS
.inline-block,
.wrap,
.vertical-flex-start {
display: inline-block;
}
  • flex-end: Vertically align elements to the end of their container.
//HTML
<div class="container vertical-flex-end">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
<div class="element">Element 3</div>
</div>
//CSS
.nowrap,
.space-around,
.vertical-flex-end {
display: table;
}
.vertical-flex-end > div {
display: table-cell;
vertical-align: bottom;
background-color: transparent;
}
.vertical-flex-end > div > div {
padding: 0.5em;
background-color: rgba(21, 101, 192, 1);
color: rgba(255, 255, 255, 1);
}
  • center: Vertically align elements to the center of their container.
//HTML
<div class="container vertical-center">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
<div class="element">Element 3</div>
</div>
//CSS
.nowrap,
.space-around,
.vertical-flex-end,
.vertical-center {
display: table;
}
.vertical-center > div {
display: table-cell;
vertical-align: middle;
background-color: transparent;
}
.vertical-flex-end > div > div,
.vertical-center > div > div {
padding: 0.5em;
background-color: rgba(21, 101, 192, 1);
color: rgba(255, 255, 255, 1);
}

Credits

Kenan Yusuf, Fahrizal Septrianto

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store