Practice Problems

Create a new HTML file for each problem, applying Flexbox for layout.

File Name: problem1.html
Create a .flex-container with three child .flex-item divs.
Use flex-direction: row; and experiment with justify-content (flex-start, center, space-between, etc.).
Adjust align-items to observe vertical alignment changes (e.g., center, flex-start).

File Name: problem2.html
Set flex-direction: column; on your container.
Use a fixed height (e.g., min-height: 400px;) so you can see how items align vertically.
Try justify-content: space-around; align-items: center; to see vertical/horizontal alignment.

File Name: problem3.html
Use flex-wrap: wrap; to allow items to move onto multiple lines if they exceed the container’s width.
Include gap: 1rem; (or any unit) so you can see spacing between flex items.
Add more than 3 items (e.g., 6–8 items) to really test the wrapping behavior.

After completing these exercises, call Mike over for feedback on your newly created HTML and CSS solutions.

File Name: problem4.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- In the <body>, add a <header> element that contains a logo (e.g., an <h1> or an image) and a navigation menu wrapped in a <nav> element.
- Inside the <nav>, add an unordered list (<ul>) with at least four list items (<li>), each containing a link (<a>).
CSS Styling:
- Set the header (or nav container) to display: flex;.
- Use justify-content: space-between; to place the logo on one side and the navigation links on the other.
- Apply align-items: center; to vertically center the elements.
- Use flex-wrap: wrap; (or media queries) so that on smaller screens the navigation items wrap or stack.
Objective:
- Build a responsive navigation bar that reflows its content as the viewport changes, demonstrating practical use of flexbox for dynamic layouts.

File Name: problem5.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- In the <body>, add a container <div> with a class of "card-grid".
- Inside the container, create multiple card <div> elements (at least 6) with a class of "card".
- Each card should include a heading (e.g., <h2>), an image or placeholder, and a short paragraph of description.
CSS Styling:
- Apply display: flex; to the "card-grid" container.
- Use flex-wrap: wrap; so that the cards move onto new rows if necessary.
- Set a consistent width (or flex-basis) for each card and use the gap property (e.g., gap: 1rem;) to add space between cards.
- Experiment with justify-content (such as space-between or center) to see how it affects the overall grid layout.
Objective:
- Create a responsive card grid that uses flex-wrap and gap to adjust the layout automatically based on screen size, showcasing how flexbox can be used for multi-row arrangements.

File Name: problem6.html

Instructions:

HTML Structure:
- Create a standard HTML document with three main sections: <header>, <main>, and <footer>.
- In the header, include a logo (or site title) and a navigation menu.
- In the main section, add a container <div> with several child elements (e.g., articles, feature boxes, or images) that you want aligned in a row.
- In the footer, include a simple copyright notice.
CSS Styling:
- Header:
  - Set the header to display: flex; and use justify-content: space-between; to separate the logo and nav links.
- Main Section:
  - Make the main container a flex container with display: flex;.
  - Use justify-content: center; or space-evenly; to distribute the child elements.
  - Experiment with align-items: flex-start;, center;, or stretch; to adjust vertical alignment.
- Footer:
  - Style the footer with display: flex; and center its content using both justify-content: center; and align-items: center;.
Objective:
- Build a full-page layout that demonstrates the combined use of flexbox for horizontal and vertical alignment across different sections, ensuring a cohesive and balanced design.

Day 7: Flexbox Basics—Containers, Direction, Alignment, and Justification