CSS FLEXBOX
To give you a gist about my article, let me run you through a piece of code which is really close to me and to anyone who has ever known the agony of getting an element centred inside a <div> tag.
.contentBlock {width: {define width}
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;}
And this is how I do it using Flexbox, easy-peasy!
.contentBlock {width: {define width}
display:flex;
flex-direction: row;
justify-content: center;}
Since I started as an intern at Keubik, about 6 months ago, I’d been introduced to a number of layout systems to design a site, for instance in the Grid layout system, the table layout and many more. However after months of trial and error the one system (or layout) that stands out is the CSS Flexbox. Personally, I use Flexbox in almost every project I work on.
In this article, we’ll dive into the 5 most common Flexbox properties. We’ll explore what they do, how you can use them, and what the results look like in practice.
Flexbox has a bunch of exciting features, take for example:
- It can be laid out in any flow direction (Left — Right — Up — Down)
- It can have display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
- It can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
- It can “flex” their sizes to respond to the available space
- It can be aligned with respect to their container or each other
- It can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size
Let’s FLEX !
Property #1: Display: Flex
The core element of flexbox is the new flex value of the display property, which needs to be set for the container element. Doing so turns its children into “flex items”. These items acquire some handy properties by default. For example, they get placed side by side, and elements without a defined width automatically take up the remaining space.
The Two Axes of Flexbox
Property #2: Flex Direction
When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.
The Main Axis
The main axis is defined by flex-direction, which has four possible values:
- row
- row-reverse
- column
- Column-reverse
Should you choose row or row-reverse, your main axis will run along the row in the inline direction.
Choose column or column-reverse and your main axis will run from the top of the page to the bottom — in the block direction.
The Cross Axis
The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.
If your main axis is column or column-reverse then the cross axis runs along the rows.
Understanding ‘which axis is which is important when we start to look at aligning and justifying flex items; flexbox features properties that align and justify content along one
axis or the other.
Property #3: Justify Content
The justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or centre to line them up in the centre.
You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.
You have five commands at your disposal to use justify-content:
- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
- Space-around and space-between are the least intuitive
- Space-between gives equal space between each square, but not between it and the container
- Space-around puts an equal cushion of space on either side of the square — which means the space between the outermost squares and the container is half the space between two squares (each square contributing a non-overlapping equal amount of margin, thus doubling the space)
A final note: remember that justify-content works along the main-axis, and flex-direction switches the main-axis. This will be important as you move on to read about the next property.
Property #4: Align Items
If you ‘get’ justify-content, align-items will be a breeze since justify-content works along the main axis, align-items applies to the cross axis.
Then, let’s dive into the align-items commands.
- flex-start
- flex-end
- center
- stretch
- baseline
The first three are exactly the same as justify-content, so nothing too fancy here.
The next two are a bit different, however.
You have stretch, in which the items take up the entirety of the cross-axis, and baseline, in which the bottom of the paragraph tags are aligned.
(Note: for align-items: stretch, I had to set the height of the squares to auto. Otherwise the height property would override the stretch.)
Property #5: Align Self
Align-self allows you to manually manipulate the alignment of one particular element.
It’s basically overriding align-items for one square. All the properties are the same, though it defaults to auto, in which it follows the align-items of the container.
#container { align-items: flex-start;}
.square#one { align-self: center;}//Only this square will be centeredLet’s see what this looks like. You’ll apply align-self to two squares, and for the rest apply align-items: centre and flex-direction: row.
Conclusion
Even though we’ve just scratched the surface of Flexbox, these commands should be enough for you to handle most basic alignments — and to vertically align to your heart’s content.
References & Links to dive more into Flexbox:
