Create multiple dynamic Lis columns with flex-Direction: column; leaving the first child with width proportional to the number of columns

Asked

Viewed 133 times

-1

Goal: Create multiple dynamic columns of lis, but the first child has to have the width of 100%.

Problem: The first child is breaking all the columns of lis

----------------------------------------
               FILHO 1
----------------------------------------
FILHO 2  |  FILHO 7    |   FILHO 12
FILHO 3  |  FILHO 8    |   FILHO 13
FILHO 4  |  FILHO 9    |   FILHO 14
FILHO 5  |  FILHO 10   |   FILHO 15
FILHO 6  |  FILHO 11   |   FILHO 16
----------------------------------------


.pai {
  border: 1px solid red;
  height: 200px;
  min-width: 455px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  list-style: none;
}

.pai .filho {
  width: 100%;
  margin-bottom: 5px;
}

pai li {
  height: 50px;
  box-sizing: border-box;
  width: 225px;
  text-align: left;
  margin: 0;
  height: auto;
}
<ul class="pai">
  <li class="filho"><a>teste1</a></li>
  <li><a>teste2</a></li>
  <li><a>teste3</a></li>
  <li><a>teste4</a></li>
  <li><a>teste5</a></li>
  <li><a>teste6</a></li>
  <li><a>teste7</a></li>
  <li><a>teste9</a></li>
  <li><a>teste10</a></li>
  <li><a>teste11</a></li> 
  <li><a>teste12</a></li>
  <li><a>teste13</a></li>
  <li><a>teste14</a></li>
  <li><a>teste15</a></li> 
  <li><a>teste16</a></li>
</ul>

html css flexbox

  • This size you cite is the width? And the items are already below the others, in case you meant the columns? , the forum is in Portuguese but if you are quoting properties is better not translate

  • Hello, thanks for the mess, so the size refers to the width of the parent. Regarding the layout I need the Lis to group in dynamic columns, but the first-Hild "son" has to follow the width of all the Lis columns formed horizontally, in the format of the drawing I created above,

3 answers

0

Your HTML document is broken, you have not closed any of the tags <li> correctly. Change the value of the property flex-direction from the "father" class to row

  • Thank you very much for the correction, unfortunately the attribute Row does not solve the problem, I need the lis to be nested vertically, and Row nests horizontally from left to right.

0

The best way for you to determine the relative size of the flex item without changing the calculation and flow of the others is with flex-Basis. The flex-Basis relates to flex-direction, if the direction is column will be the height, and if it is Row will be the width of the parent element with display flex. That said you can only determine the size of the filho in line with flex-direction row, still you can have columns in the other items with wrap:

.pai {
  border: 1px solid red;
  height: 200px;
  min-width: 455px;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
}

.pai .filho {
  flex-basis: 100%;
  margin-bottom: 5px;
  text-align: center;
}

.pai li {
  height: 50px;
  box-sizing: border-box;
  width: 225px;
  text-align: left;
  margin: 0;
  height: auto;
}
<ul class="pai">
  <li class="filho"><a>teste1</a></li>
  <li><a>teste2</a></li>
  <li><a>teste3</a></li>
  <li><a>teste4</a></li>
  <li><a>teste5</a></li>
  <li><a>teste6</a></li>
  <li><a>teste7</a></li>
  <li><a>teste9</a></li>
  <li><a>teste10</a></li>
  <li><a>teste11</a></li> 
  <li><a>teste12</a></li>
  <li><a>teste13</a></li>
  <li><a>teste14</a></li>
  <li><a>teste15</a></li> 
  <li><a>teste16</a></li>
</ul>

0

Well, from what I understand you want a container that has a maximum of 3 children per line you can do this using grid layout but can also use pure flex-box. below I will give an example of how to do.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  justify-content: center;
}

.container .child {
  flex: 1 1 calc(33.3% - 40px);
  height: 40px;
  border-radius: 4%;
  background-color: #548;
  color: #FFFFFF;

  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="child">
    .child 1
  </div>
  <div class="child">
    .child 2
  </div>
  <div class="child">
    .child 3
  </div>
  <div class="child">
    .child 4
  </div>
  <div class="child">
    .child 5
  </div>
  <div class="child">
    .child 6
  </div>
</div>

With this code you will create a container that accepts divides each row into 3 children. By clicking the Run button you can get the result of the code.

  • Hello Lucian, unfortunately this way do not pay attention, because it is a menu, I will rephrase the question.

Browser other questions tagged html css flexbox

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