List with dynamic size

Navigation
2

I need to make a list of up to 6 items, get the full width of the screen by following these steps:

  • If you have only one item in the list, it takes 100% width of the screen;
  • If you have two items in the list, each has to take 50% of the total width of the screen;
  • If you have three items in the list, each has to get 33% of the total width of the screen, and so on up to 6 items.

    • Follow the code of what I have done so far, I could not do it and I need to do it with CSS only. I'm using Bootstrap.

    link

        
    asked by anonymous 29.11.2018 / 17:44

    3 answers

    4

    I believe what you need is auto layout columns in> . Just do not specify the size of the column and let Bootstrap itself take care of it. I believe that "down layout" is used flex layout because the behavior is very similar. 

    /* Somente para visualizar as colunas. */
.col:nth-child(1){ background: #34ace0 }
.col:nth-child(2){ background: #33d9b2 }
.col:nth-child(3){ background: #ffda79 }
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
    <div class='col'>Item 2</div>
    <div class='col'>Item 3</div>
  </div>
</div>

<br>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
    <div class='col'>Item 2</div>
  </div>
</div>

<br>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
  </div>
</div>
        
    29.11.2018 / 18:15
    2

    You can use flexbox to split the screen width equally between the list elements.

    Just use display: flex; in <ul> and flex-grow in <li> .

    Here has a good flexbox cheatsheet.

    Example: 

    let btn = document.querySelector('#add');
let lista = document.querySelector('#lista');

btn.addEventListener('click', function() {
    let item = document.createElement('li');
    item.innerHTML = 'Item';
    lista.appendChild(item);
});
    ul {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

ul > li {
  flex-grow: 1;
}

/* O CSS abaixo é apenas para facilitar a visualização */
ul {
  list-style: none;
  padding: 0;
}

ul > li {
  background-color: #ffdd57;
  text-align: center;
  padding: 10px;
}

ul > li:nth-of-type(2n) {
  background-color: #00d1b2;
}
    <ul id="lista">
  <li>Item</li>
</ul>

<hr>

<button id="add">Add</button>
        
    29.11.2018 / 18:12
    1

    You are not using the main Bootstrap utility that is the grid system.

    I believe that this will serve you.

    You always have to have the col classes inside the 'row' class so they always re-adjust according to browser or device size 

    <main class='container'>
    <div class='row'>
         <div class='col'>Link lorem ipsum dolor</div>
         <div class='col'>Link lorem ipsum dolor</div>
         <div class='col'>Link lorem ipsum dolor</div>
    </div>
</main>

    How many more divs with col within row , will automatically split right. If you do not fetch the database information, you can leave it dynamic with JS.

        
    29.11.2018 / 18:18
    How do I focus on a 1-minute minute pop-up? Storing Strings in Vectors - C