What is Flexbox in CSS?💡

#beginners #css #html #web

Flexbox is a layout system in CSS that allows for flexible and responsive design without relying on float, positioning, or other layout techniques. It simplifies the creation of complex layouts and is especially useful for building user interfaces and responsive designs. Here is a beginner's guide to flexbox:

1) Understanding the Flex Container and Flex Items

To use Flexbox, you must first create a flex container by setting the 'display' property of an element to 'flex. Once an element is a flex container, its child elements become flex items. Flex items can be aligned, ordered, and sized within the flex container using Flexbox properties.

2) Flexbox Properties

Here are some of the most commonly used Flexbox properties:

'justify-content': aligns flex items horizontally within the container.
'align-items': aligns flex items vertically within the container.
'flex-direction': sets the direction of the main axis of the flex container.
'flex-wrap': controls whether flex items should wrap to multiple lines if there is not enough space in the container.
'flex-grow': determines how much a flex item should grow relative to other flex items in the container.
'flex-shrink': determines how much a flex item should shrink relative to other flex items in the container.
'flex-basis': specifies the initial size of a flex item before any remaining space is distributed.
'align-self': allows individual flex items to override the 'align-items' property.

3) Creating a Basic Flex Layout

To create a basic flex layout, follow these steps:

Create a container element and set the 'display' property to 'flex'.
Set the 'flex-direction' property to determine the main axis of the container. The default value is row, which means the main axis runs horizontally. You can also set it to 'column' for a vertical main axis.
Add child elements to the container, which become the flex items.
Use Flexbox properties such as 'justify-content', 'align-items', and 'flex-wrap' to position and style the flex items within the container.

Here's an example of a basic flex layout:
HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-item {
  background-color: #9e9898;
  color: #ffffff;
  padding: 10px;
  margin: 10px;
  text-align: center;
  font-size: 24px;
}

In this example, the container is set to 'display: flex' and the 'justify-content' and 'align-items' properties are used to center the items horizontally and vertically. The 'flex-item' class is applied to each item, and its styles determine the background color, font color, padding, margin, text alignment, and font size.

4) Conclusion
Flexbox is a powerful tool for creating flexible and responsive layouts. By understanding the basics of the flex container and flex items, and using Flexbox properties effectively, you can easily create complex and dynamic layouts that work on any device.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com