如何在一行中获得 3 个 div？ 弹性不工作

Question

I'm trying to put all 3 divs next to each other but it is not happening. I want to align them in one row and have equal spacing between them.
Flex display is not working.
Any idea why is it not working and how can I get all 3 divs in one line?

 .package{ border: solid 1px black; display: flex; flex-flow: row wrap; height: 500px; width: 380px; text-align: center; }

 <h2 class="packages">PACKAGES</h2> <div class="package"> </div> <div class="package"> </div> <div class="package"> </div>

HTML CODE

<h2 class="packages">PACKAGES</h2>
            <div class="package">

            </div>
            <div class="package">

            </div>
            <div class="package">

            </div>

CSS CODE

.package{
border: solid 1px black;
display: flex;
flex-flow: row wrap;
height: 500px;
width: 380px;
text-align: center;

}

OUTPUT

Answer 1

Your container needs to be display Flex. Like so:

 .package-container { display: flex; flex-flow: row wrap; } .package { border: solid 1px black; height: 500px; width: 380px; text-align: center; }

 <h2 class="packages">PACKAGES</h2> <div class="package-container"> <div class="package">1</div> <div class="package">2</div> <div class="package">3</div> </div>