-Flexbox-L6-
-HTML-
<body> <div id="wrap"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Map</a></li> </ul> </nav> <p><img src="../images/Pex263041.jpg" alt=""></p> <div> <p><img src="../images/Pex921374.jpg" alt=""></p> <p><img src="../images/Pex1684376.jpg" alt=""></p> </div> </div> </body>
-CSS-
* { margin: 0; padding: 0; } img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; } body { background: url(../images/pattern2.png); background-repeat: repeat-x; background-position: left bottom -105px; background-size: 300px; } #wrap { display: flex; flex-wrap: nowrap; justify-content: center; width: 820px; margin: 20px auto 0; padding: 20px; background: rgb(112, 82, 64,0.5); } /* nev */ nav { flex-basis: 140px; } ul { list-style: none; } li { line-height: 78px; text-align: center; } li:not(:last-of-type) { margin-bottom: 3px; } a { display: block; background: sienna; text-decoration: none; color: white; } a:hover { background: burlywood; color: brown; } /* photo L */ #wrap > p { flex-basis: 450px; } /* photo S */ #wrap > div { flex-basis: 230px; }