In this CSS article we want to talk about How to Use Flexbox in CSS, Flexbox is powerful tool in CSS that allows you to create flexible and responsive layouts for your website. in this article we want to talk that how to use Flexbox.
What is Flexbox ?
Flexbox is a layout module that enables you to create flexible and responsive layouts for your website. it provides powerful set of tools for aligning, distributing and ordering elements within container. with Flexbox you can create complex layouts that are adaptive to different screen sizes and devices, without the need for media queries or JavaScript.
How to use Flexbox in CSS ?
Using Flexbox in CSS is straightforward. first you need to define container element that will hold your Flexbox items. you can use the display: flex; property to turn any element into Flexbox container. this is an example:
|
1 2 3 |
.container { display: flex; } |
After that you can add Flexbox items inside the container. these items will be aligned and distributed based on the Flexbox properties that you define. this is an example of three items that are evenly distributed inside Flexbox container:
|
1 2 3 4 5 |
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> |
|
1 2 3 4 5 6 7 8 |
.container { display: flex; justify-content: space-between; } .item { flex-basis: 30%; } |
In this example we have used justify content property to distribute the items evenly inside the container. we also use flex-basis property to define the initial size of the items.
Learn More on CSS