Flexbox is a layout model in CSS that helps align and distribute elements on a page. It can be used to create complex layouts with just a few lines of code, and is now widely supported by modern browsers. In this article, we'll take a look at how flexbox works, and how it can be used to build layouts more efficiently.
A CSS Flexbox is a layout mode that lets you organize and position elements on a page in a more flexible way. With a Flexbox, you can control the alignment, direction, and size of elements, and allow them to wrap around other elements or fill up empty space on the page.
Flexbox works by creating a flex container, which can then be used to contain a number of flex items. Flex items can be any HTML element, and can be laid out in a row or column. The flex container can be used to control the layout of the flex items, and can be used to create responsive layouts.
CSS Flexbox Layout Module
Before the Flexbox Layout module, there were four layout modes:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
Flexbox Elements
To start using the Flexbox model, you need to first define a flex container. The element represents a flex container with three flex items.
<div class="flex-box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.flex-box {
display: flex;
background-color: #f5f7f9;
width: 100%;
}
.flex-box div {
flex-grow: 1;
flex-basis: 0;
border: 1px solid #999;
margin: 10px;
padding: 20px;
text-align: center;
font-size: 30px;
}
