Html Question posted in
Some basic documentation can be found here.

Html – How to space inline-flex divs evenly?

So I have 3 same class divs and I want them to be evenly spaced in the same line.

HTML:


<div class="group-4">
                                            <div class="group-5">
                                                <div class="text-wrapper-5">Hesapla</div>
                                                <div class="group-6">
                                                    <div class="img-wrapper"><img class="img" src="img/case.svg"></div>
                                                    <div class="text-wrapper-6">Some Context</div>
                                                </div>
                                                <p class="p">
                                                    A tristique facilisi gravida at felis. Sed ornare arcu, tortor hendrerit etiam vulputate
                                                    libero tellus. Etiam nu
                                                </p>
                                            </div>
                                        </div>

CSS:

.group-4 {
    position: relative;
    display: inline-flex;
    height: 186px;
    justify-content: space-evenly;
}

.group-5 {
    position: relative;
    width: 316px;
    height: 186px;
}

.text-wrapper-5 {
    position: relative;
    top: 162px;
    left: 49px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ff611e;
    font-size: 16px;
    letter-spacing: 0.46px;
    line-height: 24px;
    white-space: nowrap;
}

.group-6 {
    position: relative;
    display: inline-flex;
    width: 314px;
    height: 40px;
    top: 0;
    left: 0;
}

Here is a photo of the current site.
photo

I’m not really experienced in CSS but I tried inline-flex display mode which didn’t help much.

Tags:

2

Answers


  1. 0

    Set the outer div containing the 3 divs to be display flex. set another property on this outer div which is flexDirection: row. Then add another property justifyContent: center (or set it to space-evenly) and alignItems: center.

    Login or Signup to reply.
  2. 0

    You can solve this pretty quickly with flexbox. You probably want to remove position: relative from .group-5, and then change .group-4 to display: flex and maybe add align-items: center, but that might not be needed. I would also remove the position and display properties from .group-6 as I don’t think those are doing anything for you currently. You did not post all your HTML, but assuming that .group-5 repeats 3 times, making those changes will give you what you want. Unrelated to your question, but you should always use a 100% safe fallback font when you declare your font-family stack (like in .text-wrapper-6, usually the font type like sans-serif. Take a look here:

    .group-4 {
    position: relative;
    display: flex;
    height: 186px;
    justify-content: space-evenly;
}

.group-5 {
    width: 316px;
    height: 186px;
}

.text-wrapper-5 {
    position: relative;
    top: 162px;
    left: 49px;
    font-family: "Inter-Bold", Helvetica, sans-serif;
    font-weight: 700;
    color: #ff611e;
    font-size: 16px;
    letter-spacing: 0.46px;
    line-height: 24px;
    white-space: nowrap;
}

.group-6 {
    width: 314px;
    height: 40px;
    top: 0;
    left: 0;
}
    <div class="group-4">
  <div class="group-5">
    <div class="text-wrapper-5">Hesapla</div>
    <div class="group-6">
      <div class="img-wrapper"><img class="img" src="img/case.svg"></div>
      <div class="text-wrapper-6">Some Context</div>
    </div>
    <p class="p">
      A tristique facilisi gravida at felis. Sed ornare arcu, tortor hendrerit etiam vulputate
      libero tellus. Etiam nu
    </p>
  </div>
  <div class="group-5">
    <div class="text-wrapper-5">Hesapla</div>
    <div class="group-6">
      <div class="img-wrapper"><img class="img" src="img/case.svg"></div>
      <div class="text-wrapper-6">Some Context</div>
    </div>
    <p class="p">
      A tristique facilisi gravida at felis. Sed ornare arcu, tortor hendrerit etiam vulputate
      libero tellus. Etiam nu
    </p>
  </div>
  <div class="group-5">
    <div class="text-wrapper-5">Hesapla</div>
    <div class="group-6">
      <div class="img-wrapper"><img class="img" src="img/case.svg"></div>
      <div class="text-wrapper-6">Some Context</div>
    </div>
    <p class="p">
      A tristique facilisi gravida at felis. Sed ornare arcu, tortor hendrerit etiam vulputate
      libero tellus. Etiam nu
    </p>
  </div>
</div>

    If you want a better look at this where you can expand the screen and actually see it demo’d, you can check out my codepen demo here or you can view the fullscreen Codepen example without the code.

    As a final note, I would also recommend trying to come up with more descriptive names for your classes than just .group-#. That can get pretty confusing and giving them better names will remove some of the mental overhead when you’re trying to style them.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search