0

just started to learn web design and I am having trouble with using flexbox. I have seen several answers from stack overflow that almost has what I want but apparently it is not working for me.

I want my images to lay out in two columns where the left column is full size, and the right column has two rows stacked on top of each other.

I tried something very similar to another answer I saw on stack overflow, but apparently it is not working with my images.

HTML:

      <div class="container">
        <div class="column">
          <div class="button rowspan">
            <a href="https://jason1chiu.github.io/accessibility-measures-met/">
              <img src="./assets/images/first-project.webp" class="first-project" alt="first-project">
              <div>
                <h3>1st Project</h3>
                <span>HTML/CSS</span>
              </div>
            </a>
          </div> 
        </div>

        <div class="column">
          <div class="button">
            <a href="https://jason1chiu.github.io/accessibility-measures-met/">
              <img src="./assets/images/first-project.webp" class="new-project" alt="second-project">
              <div>
                <h3>2nd Project</h3>
                <span>HTML/CSS</span>
               </div>
            </a>
          </div>
          <div class="button">
            <a href="https://jason1chiu.github.io/accessibility-measures-met/">
              <img src="./assets/images/first-project.webp" class="new-project" alt="third-project">
              <div>
                <h3>3rd Project</h3>
                <span>HTML/CSS</span>
              </div>
            </a>
          </div>
        </div>
      </div>

.container {
    display: flex;
    width: 100%;
    height: max-content;
    flex-wrap: column wrap;
}

.column {
    flex: ;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.button {
    flex: 1;
    flex-wrap: wrap;
}
  
.button.rowspan {
    flex: 2;
    flex-wrap: wrap;
}

.first-project {
    padding: 20px 0 0 20px;
    width: 100%;
}

.new-project {
    padding: 20px 20px 0 20px;
    width: 100%;
    height: 50%;
}

This is what I am trying to achieve:

What I Expect

But it is coming out like this:

What I have currently

JChiu
  • 3
  • 2
  • Flexbox is designed for putting elements in a row *or* a column. What you want looks more suited to a Grid. – Quentin Dec 25 '22 at 02:17
  • @Quentin, I saw similar answers on using flexbox to have the same layout that I want on Stack. Why would it not work for mine? – JChiu Dec 25 '22 at 02:43
  • 1
    As @Quentin points out, CSS grid is there to do 2d layouts. However if you have a reference on Stack with flex which you’d like to understand in relation to your problem then please tell us which one(s). – A Haworth Dec 25 '22 at 08:02
  • grid will be the right answer for you. if you still want to achieve that with flex - you will have to do 2 containers. one for the horizontal with the big box and the parent of the smaller ones, then this parent will be flex too but with direction column – Yosi Leibman Dec 25 '22 at 10:24

0 Answers0