如何使用flexbox将文本与图像水平对齐？

Question

I am trying to horizontally align text with three vertically aligned images on each side of the text. However, when I apply "display:flex;" to the parent element of the three, it changes the alignment of the three divs from vertical to horizontal, changes the size of the images and causes white space inbetween the first div and the text, rather than pushing all the divs to the left of the screen.

 .text { font-family: 'font', cursive; font-size: 18px; text-align: left; width: 35em; } .image > img { width: 20% } .image { display: flex; flex-direction: column; } .flex { display: flex; } 

 <div class="flex"> <div class='image'> <img src='image.jpg'> <img src='image.jpg'> <img src='image.jpg'> </div> <div class='text'> <p>text <br><br>text <br><br>text <br><br>text</p> </div> <div class='image'> <img src='image.jpg'> <img src='image.jpg'> <img src='image.jpg'> </div> </div> 

Answer 1

 .text { font-family: 'font', cursive; font-size: 18px; text-align: left; flex: 1; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; } .image > img { width: 20%; display: block; margin: 0 auto; } .image { display: flex; flex-flow: column nowrap; } .flex { display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; } 

 <div class="flex"> <div class='image'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> </div> <div class='text'> <p>text <br><br>text <br><br>text <br><br>text</p> </div> <div class='image'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> </div> </div> 

Is that good?

Answer 2

set your flex to your divs and remove the display and flex-direction from images

 .text { font-family: 'font', cursive; font-size: 18px; text-align: left; flex:0 0 10%; } img { width: 100%; } .image { flex: 0 0 10%; } .flex { display: flex; } 

 <div class="flex"> <div class='image'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> </div> <div class='text'> <p>text <br><br>text <br><br>text <br><br>text</p> </div> <div class='image'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> <img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'> </div> </div>