CSS Flexbox: A Comprehensive Guide to Flexible Layout Design

Introduction

CSS flexbox is a powerful tool which helps developers to design complex layouts with ease. The days of using floats and positioning are gone, not that these concepts are not used but flexbox is a mostly used tool for developing complex and responsive website designs. With flexbox, we can easily create flexible and responsive designs that adapt to different screen sizes and devices. In this article, we will cover mostly used topics you need to know about flexbox to create dynamic and flexible layouts for your websites.

Properties of flexbox Container(parent)

• display: flex - In CSS display property is of great significance, how the element

  is going to be displayed is controlled by this display property. In the case of flexbox, Firstly we need to set the display property to flex to create a layout in association with flexbox. So to implement flexbox in CSS first and foremost step is to set display: flex , so the element will behave like a flex container and the elements inside that container will behave like flex items(direct-child). When the element is defined as a flex container many other flexbox-related properties can be applied to this element and child elements as well.

• flex-direction property in the flexbox specifies in which direction child elements (flex-items) will float within the flex container. flex-direction is a kind of property that directs the flex items towards a specified direction, possible values are row, row-reverse, column, and column-reverse. The default value is row.

  • row - flex items go in a row from left to right.

  • row-reverse - flex items go in a reversed row from right to left.

  • column - similar to a row but aligned vertically.

  • column-reverse - same as row-reverse but bottom to top.

• flex-wrap - property works as a wrapper coated on some object .wrap means to cover the whole thing so it also does the same. The effects of the flex-wrap property are noticeable when the website dimensions are shrunk or enlarged, it is mainly visible at the time creating a responsive layout. Possible values are: nowrap, wrap, and wrap-reverse. The default value is nowrap.

  • nowrap - By default value of flex-wrap.

  • wrap - wrap flex items in a single row inside the container.

  • wrap-reverse - flex items will be wrapped in reversed manner from bottom to top.

• Justify-content - Property justifies the content of the parent container in a specified manner. It works on the horizontal axis, every possible value will move the flex items only horizontally.

  Distribution of space with alignment can be implemented using the justify-content property. Possible value are flex-start ,flex-end,and start , end ,space-around ,space-evenly, centre ,space-between

  • flex-start - all the flex items are aligned at the start of the flex container on the main axis(horizontally).

  • flex-end - all the flex items are aligned at the end of the flex container on the main axis(horizontally).

  • center - center the items horizontally within a container:

  • start - flex items are moved towards the start of the writing mode direction.

  • end - flex items are moved towards the end of the writing mode direction

  • space-around - all the flex-items manage to maintain equal space around them and space is distributed evenly.

  • space-evenly - all items are distributed equally.

  • space-between - items are distributed in a line, the first item at the start and the last on the end.

• align-items -property is used to align elements(flex-items) of the flex container along the vertical axis. possible values are as follows:-

  • flex-start - flex items are aligned to the start of the vertical axis.

  • flex-end - flex items are aligned to the end of the vertical axis.

  • center - items are aligned to the centre of the vertical axis.

  • baseline - items are aligned according to their baseline alignment vertically.

  • stretch - items are stretched from flex-start to flex-end touching the flex container in both the top and bottom direction on the vertical axis.

• gap - property explicitly creates a space between flex items according to the specified value. The space is provided only between flex items and not on their covered area. possible values are as follows: -

  • row-gap - flex items are aligned concerning the specified value in the row(main axis).

  • column-gap - flex items are aligned concerning the specified value in the column(cross-axis).

  • gap -property is a shorthand to specify row-gap and column-gap at once. If one value is given then it will be considered as a row-gap and if there are two then the first will be for row-gap and the second value will be considered as column-gap.

Properties of flex Items

• order - property defines the order of flex items placed in a flex container. This property leverages the control of placing the flex items according to the desired format. By default, all flex items have an order value of 0. Negative values are also allowed. order take integer values and items are displayed in ascending order.

• flex-grow - property denotes how much a flex item will grow inside the flex container's extra space, if the space is available it will consume the space according to the specified value. It takes integer values positive numbers the default value is 0. If one item has a value of 2 and the others have a value of 1, then an item with a value of 2 will take up double the space compared to the item which has a value of 1.

• flex-shrink - property defines the ability to shrink the flex element if required. It takes positive numbers

• align-self -property allows a single flex item to be aligned on the cross-axis to override default alignment, that is set through the align-items set on the container.

Conclusion

CSS Flexbox provides a flexible layout tool for web development. It allows developers to easily create complex and responsive layouts with minimal code. With its ability to control the size and position of elements, Flexbox can help simplify the design for different devices and screen sizes. Whether you are just starting out with web development or are a pro, Flexbox is a must-know technology that will make your work easy. Thanks for reading !!!!