Personally, I understand that although space-between; means aligning both ends, if the image is too small to support the p, it will be like the above.

._left{
    width: 100%;
}
 ._right{
    width: 100%;
}
img{
    width: 100%;
}
试一下。

1. First of all, you only set the parent element display: flex, but you did not tell the subset how to allocate its space.

2. There are three layout plans according to your design drawing
plan A: The left and right sub-elements are divided equally. The larger the flex value is set, the more space it can get.

._left{
        flex:1;
    }
 ._right{
       flex:1;
  }

Plan B: Fixed width of the left element, flex of the right element: 1, and the right element will automatically fill the remaining space of the parent element.

._left{
        width:10rem;
    }
 ._right{
       flex:1;
  }

Plan C: Fixed the width of the right element, the flex of the left element: 1, the left element will automatically fill the remaining space of the parent element.

._left{
        flex:1;
    }
 ._right{
       flex:1;
       width:10rem;
  }

It is recommended that you go to http://flexboxfroggy.com/ to practice flex layout and supplement basic knowledge

Add align-items: stretch;

    ._left{
        width: 50%;
        height: 100%;
    }
    ._right{
        width: 50%;
        height: 100%;
    }
    img{
        width: 100%;
    }
    试试。。。

justify-content:space-between;align-items:center;

display:flex;display:-webkit-flex;flex-wrap:wrap;justify-content:flex-start;

These things are really useful, but they are not compatible