CSS3 Flex Layout and Its Usability

CSS flexbox layout is a CSS3 web layout model. It allows responsive elements within a container to be automatically arranged depending upon screen size. It is in the W3C's candidate recommendation stage. In the 2010s, the intensive use of popular JavaScript layout frameworks, such as Bootstrap, inspired CSS flexbox and grid layout specifications. To the base on its viewing environment, flexbox one of the most defining features is the ability to form-fit. Flexboxes have size adjustment feature. Its decreasing feature is used to avoid unnecessarily monopolizing space, and the increasing feature is used to make room for contents to be constrained within its boundaries. The flex layout is less restrictive in terms of content flow than those. The block and inline display types are generally unidirectional. Indeed, not only can flex directional flow be specified, at the style level, as rightwards, leftwards, upwards, or downwards; individual items within a flex container may also be automatically reordered and rearranged to suit the available layout space.

The usabilities of flexbox layout

Flexbox is used for a few main things such as - vertically and horizontally aligning, scaling and re-ordering elements within a container. These are best used on page components within a parent element. There are also other uses for flexbox like changing the direction of a column or row. It prefers to use media-queries and percentage-based widths for creating columns and rows.

Scaling

Flexbox is inherently good at dynamically scaling elements. The child elements form a nice orderly queue with matching heights on a parent element. Matching heights vertically used to be somewhat difficult and would require jQuery after the page loaded. Now flexbox handles the vertical height and floats by default. It’s one of my favorite features of flexbox.

Vertical alignment

You can vertically align all child elements with the align-items property on the parent container by setting it to flex-start, flex-end, center, baseline, or stretch by the default. Alternatively, you can align individual child elements with the property align-self.

Horizontal alignment

You can horizontally align items by setting the justify-content property to either flex-start, flex-end, center, space-between, or space-around. Use it for creating responsive menus that start at desktop sizes. The space-between property is particularly useful when you want to craft a responsive menu that fills the entire width of a desktop browser.

Ordering

Generally, the website hierarchy should naturally fall to the logical left to right and top to bottom order. There are some instances when that doesn’t work within a design system, and therefore ordering is a really useful tool for responsive design. The best use of the zig-zag layout is on content blocks that contain an image and some copy. It’s good for encouraging a user to scroll down the page and quickly skim the information. Eventually, you run out of horizontal space as the width of the browser shrinks and you want to stack the image on top of the text. This is when the flexbox properties order and flex-wrap become useful.

The properties of flexbox

flex-grow

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too. The flex-grow property can be used to distribute space in proportion.

flex-shrink

Where the flex-grow property deals with adding space to the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others - an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

flex-basis

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto - in this case the browser looks to see if the items have a size. If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

flex: initial

Setting flex: initial reset the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case, the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension or they will get their size from the content size.

flex: auto

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex: initial but in this case, the items can grow and fill the container as well as shrink if required.

flex: none

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

align-items

The align-items property will align the items on the cross axis.

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 center to line them up in the center.

Why should use flexbox layout?

• The page content can be laid out in any direction (to the left, to the right, downwards or even upwards).

• The bits of content can have their visual order reversed or rearranged.

• Items can “flex” their sizes to respond to the available space and can be aligned with respect to their container or each other.

• Achieving equal-column layouts (irrespective of the amount of content inside each column) is a breeze.