Flexbox is a CSS layout model that turns an element into a container for arranging its child items. Instead of stacking items vertically, the container can place them horizontally and distribute available space. section 6.2.2 section 10.5
A navigation bar demonstrates the basic idea: display: flex makes the nav a Flexbox container, while justify-content: space-between spreads its links across the page. section 6.2.2
Prompt a gallery into a flexible layout
Ask: “Make the gallery a Flexbox container. Center the content and enable it to wrap.” Wrapping lets photo items move onto additional lines when the browser becomes narrower, avoiding a single vertical stack. section 10.5
Create responsive portfolio cards
For portfolio cards, request a Flexbox container with wrapping, a minimum width of 250px, and a maximum width of 300px. This keeps cards from becoming excessively narrow or wide as the browser changes size. section 11.2.5
nav {
border-top: 1px solid midnightblue; #1
border-bottom: 1px solid midnightblue; #1
display: flex; #2
justify-content: space-between; #3
margin: 20px 0; #4
padding: 10px 0; #4
}
Inspect a complete navigation-bar rule using display: flex and justify-content: space-between alongside borders, spacing, and padding. section 6.2.2
Flexbox helps layouts adapt to browser dimensions, but very small screens may still require a menu icon for a crowded navigation bar. Responsive pages also need a viewport meta tag so the page matches the device width. section 6.2.2 section 11.2.5
