Flegobox, ready to cook flex!
The flexbox layout is a relatively new layout mode that enables the creation of predictable layouts when displaying in different screens and with different content size. This makes it a great tool for making modern and responsive websites in an easy way, including the holy grail layout.
This layout (instead of block layout) provides through CSS properties the possibility to design ordered, rich and easy to understand layouts.
<style>
.container{
display: flex;
flex-flow: column wrap;
justify-content: center;
}
</style>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
Angular Material uses this as it’s layout foundation. It provides a way to use attributes to set the flex properties for elements.
<div layout="row">
<div flex>A</div>
<div flex>B</div>
<div flex>C</div>
</div>
This is quite convenient, since you can set up the layout of your app without having to go on setting classes for every layout piece that you want to arrange. We use that a lot.
But sometimes we want to fire a small project up with all the angularmaterialflexgoodness without the whole Angular battleship. That’s why Alexander created Flegobox, which is just the Angular Material’s CSS to use the flexbox layout through some classes in a very friendly way.
A set of classes are available with very intuitive prefixes and they all work in the same way as the original.
<div class="flego flego-column">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
See related posts
Creating Datadog Alerts Based on Log Metrics
In this article we talk about our experience working with Datadog and the challenges we overcame in order to extract metrics from log messages or log analysis.
HTML Accessibility – Programming with an Inclusive Perspective
As devs, we have the responsibility to make websites more accessible to everyone. In this blog post, I bring code guidelines to increase accessibility.
