How come 'display: flex;' needs to be written twice?

Can this be written using flex once?

code: https://jsfiddle.net/gkuwq861/

Is there a way to remove the 2nd one?

.parent {
  display: flex;
  background-color: red;
  width: 940px;
  height: 348px;
  justify-content: space-around;
  align-items: center;
}

.center {
  display: flex;
}

.child1 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}

.child2 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}

.child3 {
  width: 280px;
  height: 280px;
  margin: 20px;
  background-color: blue;
}
<div class="parent">
  <div class="center">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</div>

Some attributes are automatically inherited by children and some are not. If you look in the docs you can see that the display attributes are not.

If you really want the child to inherit the parent’s display attributes, you may be able to use display: inherit;.

1 Like