CODEWITHSUNDEEP
htmlcss
F0kus
F0kus

Reputation: 1

How to align flexbox items in different directions?

I have 4 flexbox items placed in a parent div flexbox. When I shrink the screen width this is what I get.

Problem example

What I want to see instead is:

Desired result

I tried to add some CSS rules with different alignment settings, but none of them helped.

.footer__main__div {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
<div class="footer__main__div">
      <div class="footer__left__div">
      </div>

      <section class="footer__list__section">
      </section>

      <section class="footer__list__section">
      </section>

      <section class="footer__list__section">
      </section>
</div>

Upvotes: 0

Views: 68

Answers (2)

tacoshy
tacoshy

Reputation: 13002

To achieve the intended layout, you need to add width: 100% to the div that should contain the text. and define a width for the sections:

.footer__main__div {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.footer__left__div {
  box-sizing: border-box;
  border: 2px dashed blue;
  width: 100%;
}

section {
  box-sizing: border-box;
  width: 25%;
  border: 2px dashed green;
}
<div class="footer__main__div">
      <div class="footer__left__div">
      text
      </div>

      <section class="footer__list__section">
      services
      </section>

      <section class="footer__list__section">
      social
      </section>

      <section class="footer__list__section">
      support
      </section>
</div>

Upvotes: 0

IAmSammy
IAmSammy

Reputation: 11

I think that the problem here is that you cant align different boxes in different directions simultaniously. What I think could help is moving the <section> blocks in a separate flexbox, and aligning them in there differently.

The HTML code will look like this:

   <div class="footer__main__div">
        <div class="footer__left__div">
        </div>

        <div class="footer__right__div">
            <section class="footer__list__section">
            </section>

            <section class="footer__list__section">
            </section>

            <section class="footer__list__section">
            </section>
        </div>
    </div>

Upvotes: 1

Related Questions