Home>

4 child elements in 2 columns x 2 rows with flex-box, full screen width and no margins in both top, bottom, left and right
I want to wrap it up, but the top and bottom margins do not disappear.
I would appreciate it if you could tell me how to solve it.

I tried the following settings, but I couldn't solve it.
flex-grow
flex-start

Code

            
              
            
            
              
            
            
              
            
            
              
            
          
. worksItem-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  flex-flow: row wrap;
}
.worksItem {
  width: 50%;
}
.worksItem-img {
  width: 100%;
}
  • Answer # 1

    It may be a space that can be a

    imgelement.
    Try addingdisplay: block;.

    . worksItem-img {
      width: 100%;
      display: block;/* add * /
    }