Flexbox为响应式设计创建相等高度的列（纯CSS）

Question

我知道在创建相等高度的列时，有人问过类似的问题，但我没有使用表格，而只是在CSS中工作。我在flexbox上做了大量的研究，但是我的代码不工作。 我试图将文章放入两个或三个等宽的列使用媒体查询。有了这段代码，他们留在一列中。我试图这样做的方式是为容器设置最大宽度，然后将文章包装起来，但我无法使其工作。

<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> 

这是我有

/*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

麻烦尝试CSS的片段是：

（我复制你的最后一篇文章表明，对准确实）

变化亮点：

1. 您在父元素，#recent想display: flex;，不#recent article, img
2. align-items: stretch;是什么套柱的高度是一样的。特别是它应该从顶部到底部，除非有包装。
3. flex-basis: 33.3%;指定在分配任何剩余空间之前元素的默认大小。在你的情况下，你可以想象它只是指定一列的大小。
4. 删除flex-direction: column，因为这实际上意味着您希望它们堆叠在另一个之上。
5. 删除了CSS列项目，因为使用flexbox不需要这些属性。

/*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>

为Flexbox的很好的参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

你实际上已经包括了这两个Flexbox的和CSS代码列。我已经删除了flexbox，并添加了css列前缀。而不是columns我已经使用column-width，所以如果视口的宽度更高，你会得到更多的列。尝试在运行代码片段后点击整版页面。

/*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

与柔性布局工作时，我总是回落到本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

你需要记住的最重要的事情是，你需要申请Flex代码包装，而不是元素。看看下面的例子：https://jsfiddle.net/cfez8hz2/

我限制了包装上的CSS到flex所需的代码。文章的边距和背景只是为了让事物可见。宽度决定了一行中的项目数量。

的CSS是不是很难理解（你可能要增加对旧浏览器所需要的前缀）：

#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; 
}