Creating Layout Without Flexbox

We often use flex or grid for layouting. I even have my own style on those two (like bootstrap, masonry, etc).

Unfortunately, not all browsers support flexbox.

A friend of mine told me that I can use inline-block to do everything with greater browser support.

I then start researching and here I’m sharing the result

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.

⚠️Warning! If you are using this column-reverse style, you must add this class to your parent and all of your children elements. Not recommended to use this too often. Also, this can mess your style a lot.

//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;
}

As you can see the element only showing until “Element 17”, the rest are passed the container’s width

• 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);
}

⚠️Warning! This is the same style as column-reverse.

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);
}

There’s much more. I’m gonna stop here. If you are wondering is it possible to combine this to your code, the answer is yes. It is compatible with BEM, OOCSS, SMACSS, etc.

I usually only use inline-block, transform properties, text-align, and width. The length of the style is greatly reduced. Plus it more supported on most browsers, readable, and maintainable.

Credits

Kenan Yusuf, Fahrizal Septrianto