Complete Guide for CSS3 Flexbox - explained with colorful, animated gifs - TechJini

The new layout module in CSS3 for Flexbox, It improves the items alignment, directions, and order in the container, even if the items are dynamic or unknown sizes.Primarily the Flex Container is the expertise to adjust the width or height of its child elements to fill the available area in the best possible way on different screen dimensions.CSS3 Flexbox layout is easier to use for Web Developers, elements positioning and alignment is simple for common and complex visual designs and can be achieved with little CSS code. Flexbox layout is direction based the elements are a block or inline layout, they are aligned vertically and horizontally. Flexbox layout is useful for small application components and CSS Grid Layout is able to handle the complex layouts.

The browser support for the latest flexbox specification is:

  • Chrome 29+
  • Opera 17+
  • Firefox 28+
  • Internet Explorer 11+
  • Safari 6.1+ (-Webkit-)
  • Android 4.4+
  • iOS 7.1+ (-Webkit-)

Working with Flexbox flex direction

Understand Flex direction because it sets something AXIS.In Flexbox we can have both the Main & Cross-Axis. When we go into rest of the features of flexbox we can justify-content, horizontally, vertically and center your content anything aligns items. These don't necessarily mean to align left to right, top to bottom and it entirely depends on something called Flex-direction.

row: It is a default property and the content starts from left to right direction

row-reverse: the content starts from right to left direction

column: the content starts from top to bottom direction

column-reverse: the content starts from bottom to top direction

Wrapping elements with Flexbox

The Flexbox nature is Flexible. In Flexbox concept all flex items are set to one single line in the container.

The flex-wrap property manages the container structure if the are items in single, multiple lines and the direction(axis) the new lines are stacked in.

no wrap: It's a default value, flex items are displayed in one row and items are shrunk to fit the container's width.

wrap: Flex items are shown in multiple rows if needed from left-to-right direction and top-to-bottom.

wrap-reverse: Flex items are shown in multiple rows if needed from right-to-left direction and bottom-to-top.

Flexbox Ordering

The order property manages the order in which children of a container appears inside the flex container. By default, they are ordered and are initially added in the flex container.

Default value order is 0, Negative value(ex:-1,-2) is aligned with the first element in the container and if given (1,2..) values it will display as an end.

Flexbox Alignment & Centering with justify-content

Justify-content property controls the alignments of the items on the main axis.

We have 5 commands in justify-content:

flex-start: Flex items are aligned to the left side of the container if the flex-direction property is row & Flex items are align the top position of the container if the flex-direction property is column

flex-end: Flex items are aligned to the right side of the container if the flex-direction property is row & Flex items are aligned the bottom position of the container if the flex-direction property is column

center: Flex items are aligned to the middle of the container.

space-between: Flex items are aligned with equal spacing between them, but the first item is aligned with the left edge of the container and the last item is aligned with the right edge of the container.

space-around: Flex items are aligned with equal space on either side of the item, even first and last items are also aligned with equal space.

Note: the important thing to remember is that Flexbox justify-content property works along the main axis and flex-direction property switches the main axis.

Alignment & Centering with align-items

As Flexbox justify-content property works along the main axis, align-items(flex-items) applies to the cross axis.

We have 5 commands in align-items:

flex-start: Flex items have aligned the top of the container.

flex-end: Flex items have aligned the bottom of the container.

center: Flex items are aligned the center (Vertically) of the container.

stretch: Flex items take up the entirely of the cross-axis and stretched to fit the container.

baseline: If you take away the HTML elements (ex: paragraph, header tags) flex items are positioned at the bottom of the squares, otherwise items are to the align baseline of content.

Combination of justify-content and align-items

To show the main & cross axis greater, than merge the properties justify-content and align items. How alignment works differently for the flex-direction commands.

flex-direction: row – Flex items are aligned to a horizontal main axis.

flex-direction: column – Flex items are aligned to a vertical main axis.

Alignment & Centering with align-self

The align-self property basically overriding align-items for flex items. All the properties are the same, though it default value is auto.

Align-self allows you to manually control the alignment of one singular element.

Alignment & Centering with align-content

The align-content property takes extra space in the container as cross axis(top to bottom), similar to how justify-content aligns individual items within the main-axis(left to right).

align-content property actually only work's when we have multiple lines of code.

Values are:

stretch: Flex items are stretched to fit in container height.

flex-start: Flex items are stacked towards the cross start (top-to-bottom) of the container.

flex-end: Flex items are displayed towards the cross end(bottom-to-top) of the container.

center: Rows of flex items are aligned in the center of the cross axis(top-to-bottom) of the container.

space-between: Rows of flex items are displayed with equal spacing between them, first and last rows are aligned to the edges of the container.

space-around: Flex items are stacked with equal spacing around and every row of flex items in the container.

flex grow

This property describes the flex grow component, which controls how much the flex item will grow relative to the rest of the flex items in the container when positive free space is distributed.

If a flex-grow value is same for all flex items than all items dimension is also same in the container.

A flex-grow default value is 0 and Negative values are not invalid.

flex shrink

This property specifies the flex shrink component, which controls how much the flex item will shrink respective to the rest of the flex items in the flex container when negative free space is distributed.

By default all flex items can be shrunk, if we set the value it to 0 (don't shrink) they will maintain the actual size.

The flex-shrink default value is 1 and Negative values are not invalid.

flex basis

This property captures the same values as the width and height properties and specifies the initial main dimension of the flex item before free space is distributed according to the flex factors.

By default all flex items can be shrunk, if we set the value it to 0 (don't shrink) they will maintain the actual size.

The flex-shrink default value is 1 and Negative values are not invalid.



SHARE THIS
Previous Post
Next Post