A few helpful things about Flexbox

Tram Ho

Flexbox? Surely everyone already knows,  I would like to reintroduce those who do not know

Flexbox is a CSS standard optimized for user interface design. Using different flexbox properties, it’s possible to build your page out of small chunks, then be positioned and resized easily any way we want. Web pages and apps implemented this way are responsive and responsive to all screen sizes.

In this post, I will show people 5 ways to solve common CSS layout problems.

1. Create columns of the same height

It may not seem difficult, but making the columns the same height will take quite your time. We usually set min-height but they won’t work when the amount of content in the columns starts to differ, one of them will increase and another will be shorter.

Flexbox solves this problem couldn’t be easier. What we need is to use flex and its properties: flex-direction , align-items .

Here are the results:

2. Rearrange elements

Previously, if we wanted to dynamically change the order of the elements, maybe we would try using CSS-hack, with flexbox it is quite simple

This property is called order , and it allows us to swap any items and change the order in which they appear on the screen. The only one parameter is the position of the element – the smaller number comes first.

The order attribute applies a lot in practice. Here is an example of a responsive comment :

3. Centering horizontally and vertically

Vertical centering in CSS is one of the problems that make us wonder: How is such a trivial thing still too complicated to do? And that’s what really happened. If you look for vertical centering css a myriad of different techniques will appear and most of them will involve panels or transforms – those that are not designed to create layouts.

Flexbox provides an easier solution to the problem. Each flex layout has 2 directions (X and Y axis) and 2 separate properties for their alignment. By centering the two we can position any element.


4. Create responsive grids

Most people rely on frameworks when creating responsive grids. Bootstrap is the most popular, but there are hundreds of libraries that can help with this task. They usually work well and have tons of options, but tend to be pretty heavy. Using flexbox to create responsive grids is pretty straightforward.

A row in the flexbox grid is simply the container with display:flex . The horizontal columns inside it can be any element, size setting is done via flex . The flex pattern adapts to the viewport size, so this setup should be fine on all devices. However, if we decide there is not enough horizontal space on the screen, we can easily turn the layout to portrait with the media-query .

You can see detailed examples here

5. Create sticky footer

Flexbox has an easy solution to the problem. When building pages with sticky footer , by placing everything in flex elements we can be sure that the footer will always be at the bottom of the page.

Applying display: flex to the body tag allows us to build our entire page layout using the flex properties.

You can see example details

Thanks for reading my writing. Source: tutorialzine

Share the news now

Source : Viblo