Container Flexbox items - html

Question

I created a small website using two flex containers and the result is good. Is it possible to achieve the same result by using only one flexbox container on the container class?
I have been trying to do it but it does not work and I don't want to have two flexbox containers at the same time.
/* Framework.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>

Answer 1

No, you can't set display: flex on the containter an have the gallery's/galleryproducts's children behave as they do now, as they aren't direct children of the container.
If you would change it like that, the boxes/latest will become flex children and the gallery's/galleryproducts's children will just become normal li items, stacked on top of each other, not side by side.
So what you have is what you need, to get the result you say is good (if to assume you want to use flex of course).