Responsive Flex box

Question

I have a loop, and this loop saves everything I write, and returns it to me, as a list with one item under the other, but I need to show 2 items per line, using Responsive Flex box, but I don't know how to do it!

I imagine it's very simple, but I'm a beginner, can someone help me?

I'm doing it this way, but is wrong, i need to complete the screen


     @foreach($notes as $note)
        
            
                   {{ $note->actual_date }}
                   
                   {{ $note->getNoteAsHTML() }}
                   
             
         
       @endforeach

user_1533592 · Answer

I need to show 2 items per line, using Responsive Flex box

I think I know what you are looking for, let me know if I am wrong and I can remove this answer or edit it to embellish further what your intent may be.

This can be achieved using a calculated min-width on your flex-children along with flex-grow.

For example if you have reset your margin and padding and know there is no hidden of either to deal with then you can calculate a gap or margin of separation between elements along with a percentage on the flex child elements. Below I use a Javascript driven array to iterate over and simulate your issue of a dynamic amount of strings. I add a flex-wrap: wrap; along with a gap of 1em on the parent element => flex parent, and then add a flex-grow of 1, along with a min-width: calc(50% - 1em). So the flex-grow: 1 tells css how much of the remaining space in the flex container should be assigned to the item, then min-width: calc(50% - 1em) tells css that the minimum width of the element should be 50% of the parents width minus the gap size of 1em. So basically this will only allow two elements to take up the space of each flex parents row, then the parents flex-wrap: wrap takes over and wraps your next element to the next row or line.

const parent = document.querySelectorAll('.parent')

const target = parent[0];

const arr = ['first list item', 'second list item', 'third list item', 'fourth list item', 'fifth list item', 'sixth list item', 'seventh list item', 'eigth list item', 'ninth list item']
arr.forEach(val => {
  let child = document.createElement('DIV')
  child.classList.add('children')
  child.textContent = val
  target.append(child)
})

* {
   padding: 0;
   margin: 0;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.children {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  min-width: calc(50% - 1em);
  background-color: green;
  height: 2em;
}

user_13014089 · Answer

Use flex-basis to make sure you get two flex items per flex line, then use flex-grow to let them fill the remaining available space.

flex-basis is the property that lets the flex items “tell” the flex container how big they’d like to be. You can specify it as a fixed px value, or you can specify a percentage. The percentage refers to the flex container’s inner size.

The flex container (your ul element) will take each element, look at its flex-basis, and place them on a flex line if they can still fit. For example, if you set flex-basis: 50%, you can fit two items per line, and the item after those two will have to go on its own line.

The challenge is that if you use gap in your flex container to have some spacing between the flex items, that might push your flex items onto a new line. For example, your first flex item is flex-basis: 50%, then you have 20px gap, and the second flex item with flex-basis: 50% won’t fit anymore.

Two possible solutions:

manually account for the gap when you set your flex-basis. For example, if you have gap: 10px, you could set flex-basis: calc(50% - 10px)
give your flex items a flex-basis that guarantees only two flex items per flex line, but leaves enough room for the gap. Then let the flex items grow to fill the remaining space in the flex line. For example, your two flex items with flex-basis: 35% will add up to 70%, then your gap will add a bit, and the remaining ~30% is almost definitely enough to accommodate the gap, unless it’s really huge

Here’s a working solution using that second idea:

ul {
  list-style-type: none;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 35%;
}

.flex-item:nth-child(odd) {
  background-color: whitesmoke;
}

.flex-item:nth-child(even) {
  background-color: burlywood;
}


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6
  Item 7
  Item 8
  Item 9
  Item 10

user_10504752 · Answer


 @foreach($notes as $note)
    
        
               
               {{ $note->actual_date }}
               
               
               {{ $note->getNoteAsHTML() }}
               
         
     
   @endforeach

Responsive Flex box

3 Answers