Html - Convert three divs into display flex

reddy_boi34
August 2, 2023
276 views
3 votes
3 Answers

I have this code

HTML:

<div class="index-fifth">
  <div class="index-fifth-head">
    <h2>Why Us?</h2>
    <h1>Our Advantage</h1>
  </div>
  <div class="index-fifth-wrappers">
    <div class="index-fifth-wrapper-1">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper-2">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper-3">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
  </div>
</div>

CSS:

.index-fifth-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 50px;
        gap: 1em;
        color: #704a1b;
      }

      .index-fifth-head h1 {
        color: #614124;
      }

      .index-fifth-wrappers {
        font-size: 17px;
        background-color: #ffdc84;
        padding: 20px;
        width: 450px;
        border-radius: 5px;
        color: #704a1b;
      }

Now, these divs are looking something like this (without using display: flex for the .index-fifth-wrappers):

Now, when I use display: flex and modify the code like this:

.index-fifth-wrappers {
        font-size: 17px;
        background-color: #ffdc84;
        padding: 20px;
        width: 450px;
        border-radius: 5px;
        color: #704a1b;
        display: flex;
        justify-content: space-around;
      }

This happens:

How can I make it look something like this?:

Tags: css html

Answers

You’re very close, it’s just a case of moving some styling around in the different levels you’ve set up.

To ensure there is spacing between your divs inside index-fifth-wrappers, and because you’re using display: flex, you can use gap to space the elements.
MDN Docs for gap

The next thing to do is to move the background-color and some padding to the inner divs (index-fifth-wrapper-X). I’ve added a shared class (index-fifth-wrapper) to target these.

.index-fifth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px;
  gap: 1em;
  color: #704a1b;
}

.index-fifth-head h1 {
  color: #614124;
}

.index-fifth-wrappers {
  font-size: 17px;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  color: #704a1b;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

.index-fifth-wrapper {
  background-color: #ffdc84;
  padding: 10px;
}

<div class="index-fifth">
  <div class="index-fifth-head">
    <h2>Why Us?</h2>
    <h1>Our Advantage</h1>
  </div>
  <div class="index-fifth-wrappers">
    <div class="index-fifth-wrapper index-fifth-wrapper-1">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper index-fifth-wrapper-2">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper index-fifth-wrapper-3">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
  </div>
</div>

You need to move the background color to each item and then set the wrapper width to 100%. Adding a gap to the flex items and giving the items flex: 1 will allow you to take out the justify-content: space-between;.

Take a look at this. I added a class flex-item to each item. Feel free to rename it.

.index-fifth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px;
  gap: 1em;
  color: #704a1b;
}

.index-fifth-head h1 {
  color: #614124;
}

.index-fifth-wrappers {
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  color: #704a1b;
  display: flex;
  gap: 2rem;
  width: 100%;
}

.flex-item {
  background-color: #ffdc84;
  flex: 1;
  padding: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

<div class="index-fifth">
  <div class="index-fifth-head">
    <h2>Why Us?</h2>
    <h1>Our Advantage</h1>
  </div>
  <div class="index-fifth-wrappers">
    <div class="flex-item index-fifth-wrapper-1">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="flex-item index-fifth-wrapper-2">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="flex-item index-fifth-wrapper-3">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
  </div>
</div>

You need to style the inner divs too.

(Note: Run in full screen for effect)

.index-fifth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px;
  gap: 1em;
  color: #704a1b;
}

.index-fifth-head h1 {
  color: #614124;
}

.index-fifth-wrappers {
  font-size: 17px;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  color: #704a1b;
  display: flex;
  justify-content: space-around;
  gap: 10px;
  width: 100%;
}

.index-fifth-wrapper {
  background-color: #ffdc84;
  padding: 2vw;
  width: 30vw;
}

<div class="index-fifth">
  <div class="index-fifth-head">
    <h2>Why Us?</h2>
    <h1>Our Advantage</h1>
  </div>
  <div class="index-fifth-wrappers">
    <div class="index-fifth-wrapper index-fifth-wrapper-1">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper index-fifth-wrapper-2">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper index-fifth-wrapper-3">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Convert three divs into display flex

Answers