Flexbox to create equal height columns for responsive design (pure CSS)

Question

I know some similar questions have been asked on creating equal height columns, but I'm not using a table, and working just in CSS. I've done a lot of research on flexbox but my code is not working. I'm trying to place the articles into two or three equal width columns using Media Queries. With this code, they stay in one column. The way I tried to do it is to set a max-width for the container, and then have the articles wrap, but I wasn't able to get it to work.

<div id="content"><!-- Start content -->
         <div id="slide">             <img src="imgs/slide.jpg" alt="The University of Arizona " />
         </div>
         <section id="recent">
            <article>
               <a href="#"><img src="imgs/recent1.jpg" alt="OSIRIS-REx: Tapping Asteroid RQ36" /></a>
               <h1><a href="#">OSIRIS-REx: Tapping Asteroid RQ36</a></h1>
               <p>Asteroid 1999 RQ36 is 575 meters around and passes near Earth every six years. Not only does it potentially house organic compounds that may have been the precursors to life; it could impact us in 2182. The OSIRIS-REx mission, sponsored by NASA and led by Dante Lauretta, Ph.D., professor in the Lunar and Planetary Sciences Laboratory, aims to pay RQ36 a visit to learn more - and bring a sample back to Earth.</p>
               <a class="readMore" href="#">Read More</a>
            </article>
            <article>
               <a href="#"><img src="imgs/recent2.jpg" alt="Ethics and the Bottom Line" /></a>
               <h1><a href="#">Ethics and the Bottom Line</a></h1>
               <p>With media so focused on corporate wrongdoing, it's good to know that the Eller College of Management is taking a proactive route to turn things around. The College's Center for Leadership Ethics has initiated High School Ethics Forums that provide teen participants hands-on experiences for dealing with personal and professional ethical dilemmas. The goal? Ensure ethics are integral part of the next generation's corporate culture.</p>
               <a class="readMore" href="#">Read More</a>
            </article>
            <article>
               <a href="#"><img src="imgs/recent3.jpg" alt="From Fields to Fuel" /></a>
               <h1><a href="#">From Fields to Fuel</a></h1>
               <p>Developing alternative, sustainable energy sources is essential to the future of Arizona, the nation and the world. At the UA, researchers in the College of Agriculture and Life Sciences are studying how to optimize sweet sorghum as a bio-fuel crop. The work brings together students and professors, government and industry, and represents an education for all involved.</p>
               <a class="readMore" href="#">Read More</a>
            </article>
            <article>
               <a href="#"><img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" /></a>
               <h1><a href="#">Rodriguez Era Begins</a></h1>
               <p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
               <a class="readMore" href="#">Read More</a>
            </article>
         </section>

This is the snippet of CSS that I am having trouble with

/*Keep header image large*/
#slide img 
{
   max-width: 400px;
   padding-top:5%;
}

#recent {
    overflow:auto;
}

#content {
    margin:5%;
}

/*articles into two columns*/
#recent article, img
{
    display: -webkit-flex;
   display: flex;
   flex-direction:column;
   flex-wrap:wrap; 
   column-gap:3em;
   margin:1%;
   width:100%;
   overflow:auto;
   columns:3;

}

#recent article {
    width:200px;
   height:600px;
}

Answer 1

Try this:

(I've duplicated your last article to show that the alignment is indeed same height for the columns.)

Highlight of changes:

1. You want display: flex; in the parent element, #recent, not #recent article, img
2. align-items: stretch; is what sets the height of the columns to be the same. Specifically it should reach from top to bottom unless there is wrap.
3. flex-basis: 33.3%; specifies the default size of the element before any remaining space is distributed. In your case you can imagine that it simply specifies the size of a column.
4. Removed flex-direction: column, since this actually means you want them to be stacked on top of one another.
5. Removed CSS column items, as using flexbox doesn't require those properties.

/*Keep header image large*/

#slide img {
  max-width: 400px;
  padding-top: 5%;
}

#content {
  margin: 5%;
}
/*articles into two columns*/

#recent {
  overflow: auto;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
#recent article {
  flex-basis: 33.3%;

}
#recent article img {
  margin: 2% auto;
}

<div id="content">
  <!-- Start content -->
  <div id="slide">
    <img src="imgs/slide.jpg" alt="The University of Arizona " />
  </div>
  <section id="recent">
    <article>
      <a href="#">
        <img src="imgs/recent1.jpg" alt="OSIRIS-REx: Tapping Asteroid RQ36" />
      </a>
      <h1><a href="#">OSIRIS-REx: Tapping Asteroid RQ36</a></h1>
      <p>Asteroid 1999 RQ36 is 575 meters around and passes near Earth every six years. Not only does it potentially house organic compounds that may have been the precursors to life; it could impact us in 2182. The OSIRIS-REx mission, sponsored by NASA
        and led by Dante Lauretta, Ph.D., professor in the Lunar and Planetary Sciences Laboratory, aims to pay RQ36 a visit to learn more - and bring a sample back to Earth.</p>
      <a class="readMore" href="#">Read More</a>
    </article>
    <article>
      <a href="#">
        <img src="imgs/recent2.jpg" alt="Ethics and the Bottom Line" />
      </a>
      <h1><a href="#">Ethics and the Bottom Line</a></h1>
      <p>With media so focused on corporate wrongdoing, it's good to know that the Eller College of Management is taking a proactive route to turn things around. The College's Center for Leadership Ethics has initiated High School Ethics Forums that provide
        teen participants hands-on experiences for dealing with personal and professional ethical dilemmas. The goal? Ensure ethics are integral part of the next generation's corporate culture.</p>
      <a class="readMore" href="#">Read More</a>
    </article>
    <article>
      <a href="#">
        <img src="imgs/recent3.jpg" alt="From Fields to Fuel" />
      </a>
      <h1><a href="#">From Fields to Fuel</a></h1>
      <p>Developing alternative, sustainable energy sources is essential to the future of Arizona, the nation and the world. At the UA, researchers in the College of Agriculture and Life Sciences are studying how to optimize sweet sorghum as a bio-fuel crop.
        The work brings together students and professors, government and industry, and represents an education for all involved.</p>
      <a class="readMore" href="#">Read More</a>
    </article>
    <article>
      <a href="#">
        <img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" />
      </a>
      <h1><a href="#">Rodriguez Era Begins</a></h1>
      <p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look
        forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
      <a class="readMore" href="#">Read More</a>
    </article>
    <article>
      <a href="#">
        <img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" />
      </a>
      <h1><a href="#">Rodriguez Era Begins</a></h1>
      <p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look
        forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
      <a class="readMore" href="#">Read More</a>
    </article>
    <article>
      <a href="#">
        <img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" />
      </a>
      <h1><a href="#">Rodriguez Era Begins</a></h1>
      <p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look
        forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
      <a class="readMore" href="#">Read More</a>
    </article>
  </section>

Good reference for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You've actually included code for both flexbox and css columns. I've removed the flexbox, and added the css columns prefixes. Instead of columns I've used column-width, so if the width of the view port is higher, you'll get more columns. Try to click on full page after you run the code snippet.

/*Keep header image large*/

#slide img {
  max-width: 400px;
  padding-top: 5%;
}

#content {
  margin: 5%;
}
/*articles into two columns*/

#recent {
  -webkit-column-width: 200px;
  -moz-column-width: 200px;
  column-width: 200px;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
  margin: 1%;
  width: 100%;
  overflow: auto;
}
#recent article img {
  margin: 2% auto;
}

<div id="content">
  <!-- Start content -->
  <div id="slide">
    <img src="imgs/slide.jpg" alt="The University of Arizona " />
  </div>
  <section id="recent">
    <article>
      <a href="#">
        <img src="imgs/recent1.jpg" alt="OSIRIS-REx: Tapping Asteroid RQ36" />
      </a>
      <h1><a href="#">OSIRIS-REx: Tapping Asteroid RQ36</a></h1>
      <p>Asteroid 1999 RQ36 is 575 meters around and passes near Earth every six years. Not only does it potentially house organic compounds that may have been the precursors to life; it could impact us in 2182. The OSIRIS-REx mission, sponsored by NASA
        and led by Dante Lauretta, Ph.D., professor in the Lunar and Planetary Sciences Laboratory, aims to pay RQ36 a visit to learn more - and bring a sample back to Earth.</p>
      <a class="readMore" href="#">Read More</a>
    </article>
    <article>
      <a href="#">
        <img src="imgs/recent2.jpg" alt="Ethics and the Bottom Line" />
      </a>
      <h1><a href="#">Ethics and the Bottom Line</a></h1>
      <p>With media so focused on corporate wrongdoing, it's good to know that the Eller College of Management is taking a proactive route to turn things around. The College's Center for Leadership Ethics has initiated High School Ethics Forums that provide
        teen participants hands-on experiences for dealing with personal and professional ethical dilemmas. The goal? Ensure ethics are integral part of the next generation's corporate culture.</p>
      <a class="readMore" href="#">Read More</a>
    </article>
    <article>
      <a href="#">
        <img src="imgs/recent3.jpg" alt="From Fields to Fuel" />
      </a>
      <h1><a href="#">From Fields to Fuel</a></h1>
      <p>Developing alternative, sustainable energy sources is essential to the future of Arizona, the nation and the world. At the UA, researchers in the College of Agriculture and Life Sciences are studying how to optimize sweet sorghum as a bio-fuel crop.
        The work brings together students and professors, government and industry, and represents an education for all involved.</p>
      <a class="readMore" href="#">Read More</a>
    </article>
    <article>
      <a href="#">
        <img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" />
      </a>
      <h1><a href="#">Rodriguez Era Begins</a></h1>
      <p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look
        forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
      <a class="readMore" href="#">Read More</a>
    </article>
  </section>
</div>

Answer 3

I always fall back to this guide when working with flex layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The most important thing you'll need to remember is that you need to apply your flex code to the wrapper, not the elements. Have a look at the following example: https://jsfiddle.net/cfez8hz2/

I limited the css on the wrapper to the code needed for the flex. The margin and background on the articles are just there to make things visible. And the width determines the number of items in a row.

The css is not that hard to understand (you may want to add the required prefixes for legacy browsers):

#recent {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: stretch;
}

#recent article {
  width: 45%;
  margin: 20px 0;
  background: #ccc;
}