curriculum/challenges/english/blocks/top-introduction-to-flexbox/6571c34868e4b3b17d3957fb.md
Let's look at an example.
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&default-tab=html%2Cresult&slug-hash=MWoyBzR&editable=true&user=TheOdinProjectExamples&name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>You should be able to predict what happens if you put flex: 1 on the .item by now. Give it a shot before you move on!
Adding flex: 1 to .item makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
Remove flex: 1 from .item and add justify-content: space-between to .container. Doing so should give you something like this:
justify-content aligns items across the main axis. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
Before moving on to the next lesson, see what is possible with the justify-content property. Read this interactive article on MDN and play around with the different values of justify-content on the example.
How does applying justify-content: space-between to a flex container affect the positioning of its items?
It evenly distributes space between items, pushing the first and last items to the edges.
It centers all items within the container.
It causes the items to grow to fill available space.
It aligns items to the left side while leaving excessive space on the right side.
1