The flexbox or flexible box model in CSS is a one-dimensional layout model that has flexible and
efficient layouts with distributed spaces among items to control their alignment structure i.e., it is a
layout model that provides an easy and clean way to arrange items within a container. Flexbox can be
useful for creating small-scale layouts & is responsive and mobile-friendly.
Features of flexbox:
- A lot of flexibility is given.
- Arrangement & alignment of items.
- Proper spacing
- Order & Sequencing of items.
- Bootstrap 4 is built on top of the flex layout.
Example:
<html>
<head>
<style>
.flex-container {
display: flex;
}
.flex-container div {
background-color: #c9d1cb;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
</body>
</html>
Output:
