Home / Questions / 272795
Accepted
Julio Cesar
Asked: 2020-06-18 15:10:50 +0800 CST 2020-06-18 15:10:50 +0800 CST

Problem with css flex property

  • 772

I have a problem with the property flexin css: I am giving it a value of justify-content: flex-startto order my HTML elements, the problem is that the number of elements can increase or decrease, and when the elements increase, the elements get smaller and smaller until they become deformed my layout.

Is there a way that once there is a certain amount of elements, the other elements go down to the second line or second block?

html

2 Answers

  1. Best Answer

    you just needflex-flow: wrap;

    section{
  width: 100%;
  height: 170px;
  background-color: #c3c3c3;
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
  align-items: start;
  padding: 5px;
  
}

div {
  width: 70px;
  height: 70px;
  background-color: #333;
  text-align: center;
  color: #fff;
  margin: 5px;
}
    <section>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
  <div>Elemento</div>
</section>

    What this does is say how the child elements are going to be composed, you can see more about this here

    • 2

  2. When you add the property displaywith value flex, there are two styles that are defined by default: flex-direction: rowand flex-wrap: nowrap. All you have to do is change the value of the property flex-wrapto wrapand make sure the value of flex-directionis row.

    There is a shortland property called flex-flow, where you can join values ​​of both , flex-directionand flex-wrap, like this: flex-flow: row wrap.

    I leave you a site that has helped me understand the use of flexbox technology in CSS.

    • 0