Introduction to Flexbox

Flexbox makes aligning and distributing space between items easy.

Basic properties:

• display: flex – enables flexbox
• flex-direction: row or column
• justify-content – controls horizontal alignment
• align-items – controls vertical alignment

Example:

<style>
.container {
  display: flex;
  justify-content: space-between;
  background: lightgray;
}
.item {
  background: coral;
  padding: 10px;
}
</style>

<div class="container">
  <div class="item">Box 1</div>
  <div class="item">Box 2</div>
  <div class="item">Box 3</div>
</div>

Practice Task:
Create a horizontal navigation bar using Flexbox.