Почему код flexbox не применяется, а текст не переносится?

Question

Я использую flexbox для стилизации своего контента. Он работал на моих первых трех делениях, но на моем третьем, он не работает. Я пытался применить такие вещи, как flex-wrap, чтобы мои img и текст были рядом, но они не меняются и просто остаются сложенными.

Я пробовал различные гибкие теги, но они не меняются. Я хочу использовать только flexbox.

#content {
  background: #ccc;
  padding: 30px 30px 30px 0;
  display: flex;
  flex-wrap: wrap;
}

#content article img {
  margin-right: 30px;
}

#content h1, #middle h1 {
  font-family: FuturaStdBoldCondensed;
  font-size: 30px;
  margin-bottom: .5em;
  color: #5c5c5c;
}

#content p,
#middle p {
  margin-bottom: 1em;
  line-height: 1.5em;
}

<section id="content">
  <article>
    <img src="images/frontPagePhoto.jpg" alt="photo">

    <h1>PROJECT: Cellular Network</h1>

    <p>In Kenya we are creating a cellular network, which poses several challenges, but will also come with many rewards. We are hoping that by the end of the year, all areas of this country will have coverage. We are working with local authorities to put
      service in reach of every villiage and community.</p>

    <p>Read more about it, or get involved...</p>
  </article>
</section>

Текст продолжает отображаться под изображением .

Answer 1

Переместить изображение из элемента article. Вместо этого поместите его в элемент figure, придав ему семантическое значение и сделав его гибким элементом в основном контейнере.

#content {
  display: flex;
}

<section id="content">
  <figure>
    <img src="http://i.imgur.com/60PVLis.png" width="150" height="150" alt="">
  </figure>
  <article>
    <h1>PROJECT: Cellular Network</h1>
    <p>In Kenya we are creating a cellular network, which poses several challenges, but will also come with many rewards. We are hoping that by the end of the year, all areas of this country will have coverage. We are working with local authorities to put
      service in reach of every villiage and community.</p>
    <p>Read more about it, or get involved...</p>
  </article>
</section>

Answer 2

Вы применяете flex к тегу section, который не является непосредственным родителем тегов h1, p и img, следовательно, свойство flex не влияет ни на какие теги, кроме тега article. Таким образом, вы должны применить flex к тегу article, который в данном случае является непосредственным родителем, и он должен работать. Надеюсь это поможет. Спасибо.

Answer 3

Вы не получаете текст <h1> и <img> в одной строке, потому что свойство стиля display тега h1 по умолчанию имеет значение block.

В соответствии с существующим кодом, созданиеРодительский элемент flex-контейнера на это не влияет. Хотя существует множество способов исправить это, простейшим будет добавление display: inline-block; к вашему h1.

Подробнее о свойствах блоков и встроенных стилей вы можете прочитать здесь Отображение CSS: встроенный или встроенный блок

#content {
    //background:#ccc;
    padding: 30px 30px 30px 0;
    display: flex;
    flex-wrap: wrap;
}

#content article img {
    margin-right:30px;
}

#content h1, #middle h1 {
    display: inline-block; // <-- THIS
    font-family:FuturaStdBoldCondensed;
    font-size:30px;
    margin-bottom:.5em;
    color:#5c5c5c;
}

#content p, #middle p {
    margin-bottom:1em;
    line-height:1.5em;
}

<section id="content">
    <article>
        <img src="https://via.placeholder.com/100" alt="photo">
        <h1>PROJECT: Cellular Network</h1>
        <p>In Kenya we are creating a cellular network, which poses several challenges, but will also come with many rewards. We are hoping that by the end of the year, all areas of this country will have coverage. We are working with local authorities to put service in reach of every villiage and community.</p>

        <p>Read more about it, or get involved...</p>
    </article>
</section>

В качестве альтернативы, если вы хотите добиться этого с помощью flexbox, вы можете задать flex: 1 для img и h1 и обернуть их в гибкий контейнер,Кроме того, лучше дать img flex-grow: 0 тоже.