I have successfully created a small website using two flex containers, but now I want to know if it is possible to achieve the same layout with just one flexbox container on the parent class.
I've been attempting to do this, but so far my efforts have not been successful. I really don't want to resort to having two flexbox containers simultaneously.
/* Custom.css */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
body {
font-family: 'Electrolize', sans-serif;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.gallery {
display: flex;
}
.gallery li {
width: 200px;
background-color: #1c1c1c;
color: #bdc3c7;
margin: 0% 0.5% 0% 0.5%;
}
.gallery img {
width: 100%;
height: auto;
}
.gallery p {
margin: 0;
padding: 6%;
font-size: 1.25em;
background-color: #483636;
color: #bdc3c7;
text-align: center;
}
.galleryproducts {
display: flex;
}
.galleryproducts li {
width: 200px;
margin: 2%;
}
.galleryproducts img {
width: 100%;
height: auto;
border: 3px solid white;
}
.latest {
margin-top: 1%;
background-color: #1c1c1c;
}
.latest h1 {
color: white;
font-size: 1.5em;
font-weight: 300;
border-bottom: 3px solid white;
margin-bottom: 5%;
padding: 2%;
}
a {
text-decoration: none;
}<!-- index.html -->
<div class="container">
<section class="boxes">
<ul class="gallery">
<li>
<a href="img/electrical.png">
<img src="img/electrical.png" alt="">
<p>Electrical Installations</p>
</a>
</li>
<li>
<a href="img/lighting.png">
<img src="img/lighting.png" alt="">
<p>Lighting Decorations</p>
</a>
</li>
<li>
<a href="img/homeappliances1.png">
<img src="img/homeappliances1.png" alt="">
<p>Electrical Appliances</p>
</a>
</li>
<li>
<a href="img/homeappliances2.png">
<img src="img/homeappliances2.png" alt="">
<p>Kitchen Appliances</p>
</a>
</li>
</ul>
</section>
<section class="latest">
<h1>Our latest products</h1>
<ul class="galleryproducts">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt="">
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt="">
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt="">
</a>
</li>
</ul>
</section>
</div>