The online menu is looking pretty good, but let's put a few finishing touches on it. Open the flex-meru.html file as you left it at the end of EXERCISE 16-2. 1. Instead of having lots of empty space inside the menu container, we'll make the items fill the available space. Because we want the items to be fully flexible, we can use the auto value for flex (the same as flex: 11 auto;). Add this declaration to the section rule to turn on the stretching behavior: section { - flex: auto; } 2. OK, one last tweak: let's make the photos appear at the top of each menu item. Because each section is a flex container, we can use the order property to move its items around. In this case, select the paragraphs with the "photo" class name and give it a value less than the default 0. This will make the photo display first in the line (FIGURE 16 26): photo { order: -1; } If you want to get fancy, you can set the width of the ing elements to 100% so they always fill the width of the container. The little image I've provided gets quite blurry when it expands larger, so you can see how the responsive image techniques we covered in Chapter 7, Adding Images, might be useful here. It's not the best-looking web page in the world, but you got a chance to try out a lot of the Flexbox properties along the way.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexbox Product Listing Exercise</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: Georgia, serif;
line-height: 1.5em;
}
h1 {
font-size: 4em;
font-weight: normal;
}
h2 {
font-size: 1.2em;
margin-top: 0;
}
#menu {
border: 3px solid #783F27;
}
section {
background: #F6F3ED;
margin: 10px;
padding: 20px;
border: 1px dotted maroon;
width: 240px;
display:flex;
flex-direction:column;
}
.title {
background-color: #783F27;
color: #F9AB33;
line-height: 4em;
}
.price {
font-weight: bold;
background: #F9AB33;
padding: 5px;
width: 100%;
text-align: center;
margin-top:auto;
}
</style>
</head>
<body>
<div id="menu">
<section class="title">
<h1>Bistro Items To Go</h1>
</section>
<section class="dish">
<h2>1<br>Black bean purses</h2>
<p class="info">Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyllo and baked until golden.</p>
<p class="photo"><img src="table.jpg" alt=""></p>
<p class="price">$3.95</p>
</section>
<section class="dish">
<h2>2<br>Southwestern Napoleons</h2>
<p class="info">Layers of light lump crab meat, bean, and corn salsa, and our handmade flour tortillas.</p>
<p class="photo"><img src="table.jpg" alt=""></p>
<p class="price">$7.95</p>
</section>
<section class="dish">
<h2>3<br>Coconut-Corn Chowder</h2>
<p class="info">This vegan chowder with potatoes and corn in a coconut broth is light and delicious.</p>
<p class="photo"><img src="table.jpg" alt=""></p>
<p class="price">$3.95</p>
</section>
<section class="dish">
<h2>4<br>Jerk Rotisserie Chicken</h2>
<p class="info">Tender chicken slow roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and sliced mango. <em>Warning, very spicy!</em></p>
<p class="photo"><img src="table.jpg" alt=""></p>
<p class="price">$12.95</p>
</section>
<section class="dish">
<h2>5<br>Thai Shrimp Kebabs</h2>
<p class="info">Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection.</p>
<p class="photo"><img src="table.jpg" alt=""></p>
<p class="price">$12.95</p>
</section>
<section class="dish">
<h2>6<br>Pasta Puttanesca</h2>
<p class="info">A rich tomato sauce simmered with garlic, olives, capers, anchovies, and plenty of hot red pepper flakes.</p>
<p class="photo"><img src="table.jpg" width="200" height="100" alt=""></p>
<p class="price">$12.95</p>
</section>
</div>
</body>
</html>
![**EXERCISE 16.3: Adjusting flex and order**
The online menu is looking pretty good, but let's put a few finishing touches on it. Open the `flex-menu.html` file as you left it at the end of [EXERCISE 16.2].
1. Instead of having lots of empty space inside the menu container, we’ll make the items fill the available space. Because we want the items to be fully flexible, we can use the auto value for flex (the same as `flex: 1 1 auto`). Add this declaration to the `section` rule to turn on the stretching behavior:
```
section { … flex: auto; }
```
2. OK, one last tweak: let’s make the photos appear at the top of each menu item. Because each section is a flex container, we can use the order property to move its items around. In this case, select the paragraphs with the “photo” class name and give it a value less than the default 0. This will make the photo display first in the line ([FIGURE 16.26]):
```
.photo { order: -1; }
```
If you want to get fancy, you can set the width of the `img` elements to 100% so they always fill the width of the container. The little image I’ve provided gets quite blurry when it expands larger, so you can see how the responsive image techniques we covered in Chapter 7, Adding Images, might be useful here. It’s not the best-looking web page in the world, but you got a chance to try out a lot of the Flexbox properties along the way.
**Diagram Explanation:**
The image shows a menu titled "Bistro Items To Go" with six menu items. Each item has a small image at the top, a description, and the price at the bottom. The items are organized in a grid layout, showcasing different dishes with their details neatly displayed.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F56862812-8cfc-4314-8d5a-ff868c43fa0b%2F134ff0da-5704-443d-9d06-b51ffaddccbf%2Fbm4ldhl_processed.png&w=3840&q=75)
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
