Lesson 3.7: Flexbox – One-Dimensional Layouts

Flexbox (Flexible Box Layout) is a modern CSS layout system designed to arrange elements in one dimension—either row (horizontal) or column (vertical). It makes it much easier to design responsive and dynamic layouts compared to traditional CSS methods like floats or tables.

🔹 Key Concepts of Flexbox

1. Flex Container – The parent element that holds flex items.

    

   .container {
display: flex; /* turns the element into a flex container */
}


2. Flex Items – The child elements inside the flex container.
   They automatically adjust size and position according to container rules.

🔹 Flexbox Properties for Container

1. flex-direction – Defines the direction of items.

    

   .container {
display: flex;
flex-direction: row; /* default: left to right */
/* other values: row-reverse, column, column-reverse */
}


2. justify-content – Aligns items horizontally.

    

   .container {
justify-content: flex-start; /* default */
justify-content: center; /* center horizontally */
justify-content: space-between;/* equal space between items */
justify-content: space-around; /* space around each item */
justify-content: space-evenly; /* equal spacing everywhere */
}


3. align-items – Aligns items vertically.

    

   .container {
align-items: flex-start; /* top */
align-items: center; /* middle */
align-items: flex-end; /* bottom */
align-items: stretch; /* fill container height */
}


4. flex-wrap – Controls wrapping of items.

    

   .container {
flex-wrap: wrap; /* items go to new row if needed */
flex-wrap: nowrap; /* default */
}


🔹 Flexbox Properties for Items

1. flex-grow – Defines how much an item can grow.

    

   .item {
flex-grow: 1; /* fills available space equally */
}


2. flex-shrink – Defines how items shrink if space is small.

    

   .item {
flex-shrink: 1; /* default, shrink if needed */
}


3. flex-basis – Defines initial size of an item before growing/shrinking.

    

   .item {
flex-basis: 200px; /* item will try to take 200px space */
}


4. align-self – Overrides align-items for a single item.

    

   .item {
align-self: center;
}


🔹 Example

✅ Summary:

• Flexbox = one-dimensional (row/column) layouts.

• justify-content → horizontal alignment.

• align-items → vertical alignment.

• flex-grow, flex-shrink, flex-basis → control item sizes.