Does justify-content of parent matter when all children have a flex property?

user_4569926 0
Viewed 291

.parent {
  background-color: yellow;
  display: flex;
  justify-content: space-evenly;
}
.parent > div {
  background-color: lightblue;
  flex: 1;
  margin: 5px;
}
<div class="parent">
  <div>Child #1</div>
  <div>Child #2</div>
  <div>Child #3</div>
</div>

In the above simple example, there is a parent div with 3 children divs. All the children have a flex: 1 property and so they are all distributed equally inside their parent. At this point, does the property justify-content: space-evenly of the parent actually count? No matter what value I insert, the result is always the same. Could it be deleted at all?

flexbox css html
1 Answers

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.ref

If you have no extra space then you can safely omit the property and nothing will change.

It can make a difference in two situations:

  1. Your layout is dynamic and your item may have a reduced size and a free space is created
  2. You are using justify-content:inherit inside a flex item to get the parent value (not a very common situation by the way)
user_86203330
Related