behavior of nested containers

Asked

Viewed 29 times

0

Because the text-align=center of a container also reflects on your container intern?

.container-externo {
  border: 1px solid red;
  display: flex;
  text-align: center;
}

.container-interno {
  border: 1px solid black;
  flex: 1;
}
<div class="container-externo">
  <div class="container-interno">...</div>
  <div class="container-interno">...</div>
  <div class="container-interno">...</div>
  <div class="container-interno">...</div>
</div>

html5 flexbox css-display
  • 1

    The acronym CSS means Cascading Style Sheet, that is, cascading styles. What made you think that the internal element would not have the style applied in the external element?

  • I’m an apprentice. But thank you for making me see the obvious!

1 answer

-1

CSS works in a cascade, meaning that the children of its elements will receive the same styles that their father received (the Ivs stylizations within the container-internal div affects the container-external div). To change this, just go into the code and style the text inside as you did with the other div.

.container-externo {
  border: 1px solid red;
  display: flex;
  text-align: center;
}

.container-interno {
  border: 1px solid black;
  flex: 1;
  text-align: left; // modificação
}
<div class="container-externo">
  <div class="container-interno">...</div>
  <div class="container-interno">...</div>
  <div class="container-interno">...</div>
  <div class="container-interno">...</div>
</div>

  • 1

    Thank you very much!

Browser other questions tagged html5 flexbox css-display

You are not signed in. Login or sign up in order to post.