CODEWITHSUNDEEP
htmlcssflexbox
OcK
OcK

Reputation: 103

How to style a flexbox item the right way

I wanted to create a 3 step explanation component with flexbox. A flex item should contain a img and a little bit of text, which should stand next (horizontal) to the image.

What I tried so far is this approach

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border: 1px solid black;
  box-sizing: border-box;
  box-align: center;
  align-content: center;
}

.flex-item {
  width: 33.33%;
}
<div class="flex-container">

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>1.</strong> first step</p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>2.</strong> second step
    </p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>3.</strong>third steps
    </p>
  </div>

</div>

Can anyone help me how to get Image and text per flexitem next to each other. Or tell me what the keyword is to google it.

Upvotes: 0

Views: 76

Answers (2)

Paulie_D
Paulie_D

Reputation: 114990

Set the flex-item to display:flex also. Flexbox is not inherited.

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border: 1px solid black;
  box-sizing: border-box;
  align-content: center;
}

.flex-item {
  width: 33.33%;
  display: flex;
}

img {
  display: block;
}
<div class="flex-container">

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>1.</strong> first step</p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>2.</strong> second step
    </p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>3.</strong>third steps
    </p>
  </div>

</div>

Upvotes: 1

Alexis Wollseifen
Alexis Wollseifen

Reputation: 471

.flex-item {
     display: flex;
}

Should work.

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border: 1px solid black;
  box-sizing: border-box;
  box-align: center;
  align-content: center;
}

.flex-item {
  width: 33.33%;
  display: flex;
}
<div class="flex-container">

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>1.</strong> first step</p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>2.</strong> second step
    </p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>3.</strong>third steps
    </p>
  </div>

</div>

Upvotes: 1

Related Questions