Использование Flexbox для отображения содержимого не работает HTML CSS

Question

У меня есть flexbox с изображением и текстом.В настоящее время я использую поля и отступы, но было бы лучше с выравниванием контента и выравниванием контента?

В настоящее время то, что я делаю, работает неправильно, я не могу заставить изображения соответствовать их тексту.Есть ли способ для меня, чтобы поместить текст и изображение в линию друг с другом.

Веб-сайт:

/*flexbox*/
section {
    display: flex;
    flex-flow: wrap;
    width: 80%;

    margin: 1em auto;
    padding: 1em;
    
    border: solid .125em #00aaff;
    background-color: white;
    opacity:0.9;
}

section > * {
    flex: 1 1 40%;
    padding: 1em;
}

/*Images*/
figure img {
    width:50%;
    margin-left:5em;
}

/*Text*/
p{
    padding: 1em;
    margin-left:-3em;
}

<section id="display">   
        <figure id="image1">
            <img src="images/512x512.png" alt="Dynamo">
        </figure>
         
        <article>
                <p><span id="name">Houston Dynamo</span></p>
                <p>Sport Science/Sport Performance Intern</p>
                <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
        </article>
        
        <figure>
            <img src="images/UW-Logo.png" alt="UIC">
        </figure>
        
         <article>
                <p><span id="name">University of Madison Wisconsin-Madison</span></p>
                <p>Strength and Conditioning Coach, Graduate Assistant</p>
                <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
        </article>

Answer 1

Проверьте это тоже, я только что удалил margins, из-за чего изображение / фигура уменьшается, поэтому он не на том же уровне, что и article

/*flexbox*/
section {
    display: flex;
    flex-flow: wrap;
    width: 80%;
    margin: 1em auto;
    padding: 1em;
    border: solid .125em #00aaff;
    background-color: white;
    opacity:0.9;
}

section > * {
  margin-top:0;
    margin-bottom:0;
    flex: 1 1 40%;
    padding: 1em;
     border:2px solid black;
}
article{
  padding-left:20px;
}
figure,article{
  margin: 10px;
}
/*Images*/
figure img {
    width:100%;
}
/*Text*/
p{
    padding: 1em;
}

<section id="display">   
        <figure id="image1">
            <img src="https://picsum.photos/200" alt="Dynamo">
        </figure>
         
        <article>
                <p><span id="name">Houston Dynamo</span></p>
                <p>Sport Science/Sport Performance Intern</p>
                <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
        </article>
        
        <figure>
            <img src="https://picsum.photos/201" alt="UIC">
        </figure>
        
         <article>
                <p><span id="name">University of Madison Wisconsin-Madison</span></p>
                <p>Strength and Conditioning Coach, Graduate Assistant</p>
                <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
        </article>
        </section>

Возможно, вы захотите увидеть это в полном объеме.просто надеюсь, что это поможет.

Answer 2

Действительно помогает избежать гибкого переноса для такого макета.Я обернул каждую «строку» вашего макета в div с классом flex-wrapper-thingy, к которому я применил display: flex, чтобы макет flexbox происходил в каждом ряду.

Теперь конфигурация flexbox имеет прямое отношениек каждой паре figure и article элементов.align-items: center - это идеальный способ выстроить эти предметы в линию, несмотря на их разную высоту.Теперь проверьте, как мало правил требуется для настройки расстояния и относительного размера.

/*flexbox*/
section {
  width: 80%;
  margin: 1em auto;
  padding: 1em;
  border: solid .125em #00aaff;
  background-color: white;
}

.flex-wrapper-thingy {
  display: flex;
  align-items: center;
  justify-content: space-between; // maybe you want to try "center" too
}

section > * {
  padding: 1em;
}

/*Images*/
figure {
  width: 50%;
}

/*Text*/
article {
  margin-left: 20px;
}

<section id="display">
  <div class="flex-wrapper-thingy">
    <figure id="image1">
      <img src="https://picsum.photos/200" alt="Dynamo">
    </figure>
    <article>
      <p><span id="name">Houston Dynamo</span></p>
      <p>Sport Science/Sport Performance Intern</p>
      <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
    </article>
  </div>

  <div class="flex-wrapper-thingy">
    <figure>
      <img src="https://picsum.photos/201" alt="UIC">
    </figure>
    <article>
      <p><span id="name">University of Madison Wisconsin-Madison</span></p>
      <p>Strength and Conditioning Coach, Graduate Assistant</p>
      <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
    </article>
  </div>
</section>