How to start a new line with a particular item with Flexbox?

Question

This is a very simple exercise but I can\'t seem to find a neat way to solve it (just started learning about HTML and CSS).

Answer 1

1. There is really no reason to do something like this div[class*=element] just specify class with a dot div.element

2. one of the reason your code doesn't work is that you're missing box-sizing. Adding padding and margin in this way will grow your children over the wanted size.

3. When working with flex use the flex parameters, it will really simplify your work.

You can see a good tutorial for how to use flex-box here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here is a simple way to do it.

 div {
      border: 1px solid black;
       box-sizing: border-box;
    }
    
    .parent {
      display: flex;
      flex-wrap: wrap;
      justify-content: stretch;
    }
    
    .child {
      flex: 1 0 25%;
    }

      
I am one
      
I am two
      
I am three
      
I am four
      
I am five