Flexbox在多行布局中等高行

Question

我一直在努力用flexbox构建布局，而且我认为＆＃34;我终于明白了。但是我不确定我把它铺好的方式是最有效/最有效的，而我仍然在努力为第一个＆＃34;行＆＃34;获得一个固定的高度。我需要第一行能够扩展最短的高度以匹配最高行高的高度（对于＆＃34;网格＆＃34;外观）。

我试图将父容器设置为显示：flex，但是那没有做到这一点。 = /

我绝对可以使用我的结构的评论，因为我确实有它的功能，但似乎我已经疯狂地做了它，并且不会介意关于如何清洁的第二意见它了。

＆＃13;

＆＃13;

	    body {
	        font-family: Arial, sans-serif;
	        font-size: 12px;
	    }

	    /*----Flexbox Containers----*/
	    .wrapper {
	        display: -webkit-flex;
	        display: -ms-flexbox;
	        display: flex;
	        overflow: hidden;
	    }

	    .container {
	    	display: -webkit-flex;
	        display: -ms-flexbox;
	        display: flex;
	    }

	    #firstContainer, #secondContainer, #thirdContainer {
	    	flex:1;
	    }

	    .row {
	    	flex:1;
	    }

	    .col {
	    	display:flex;
	    	flex:1;
	    }


	    .img, .info {
	    	flex:0.5;
	    }

	    .title, .img, .info, .reviewText, .recommend, h3 {
	    	padding: 10px 15px;
	    }

	    .title {
	    	font-size:20px;
	    }

	    .lightGrey {
	    	background-color:#b3b3b3;
	    }

	    .darkGrey {
	    	background-color:#5d5d5d;
	    }

	    .lightRed {
	    	background-color:#744646;
	    }

	    .lightYellow {
	    	background-color:#c2c6a1;
	    }

	    .lightGreen {
	    	background-color:#a7c6a1;
	    }


	    @media screen and (max-width: 767px) {
	        .wrapper {
	            flex-direction: column;
	        }
	    }

＆＃13;

<div class="wrapper">
		<div id="firstContainer">
		    <div class="container">
		        <div class="row lightGrey">
		            <h3 class="title">Short Title</h3>
		        </div>
		    </div>

		     <div class="container">
		        <div class="col">
		            <div class="img darkGrey"><img src="" /></div>
		            <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
		        </div>
		    </div>

		    <div class="container">
		    	<div class="row">
		    		<div class="reviewText lightYellow">Blah Blah blah Blah blah Blah blah.</div>
				    <div class="recommend lightGreen">Yes</div>
		    	</div>
		    </div>
		</div>
	
		<div id="secondContainer">
		    <div class="container">
		        <div class="row lightGrey">
		            <h3 class="title">This is a medium length Title. Still pretty short though.</h3>
		        </div>
		    </div>

		     <div class="container">
		        <div class="col">
		            <div class="img darkGrey"><img src="" /></div>
		            <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
		        </div>
		    </div>

		    <div class="container">
		    	<div class="row">
		    		<div class="reviewText lightYellow">Blah Blah blah Blah blah Blah blah.</div>
				    <div class="recommend lightGreen">Yes</div>
		    	</div>
		    </div>
		</div>

		<div id="thirdContainer">
		    <div class="container">
		        <div class="row lightGrey">
		            <h3 class="title">A really really really really really really really really really long title. Much longer than the previous titles.</h3>
		        </div>
		    </div>

		     <div class="container">
		        <div class="col">
		            <div class="img darkGrey"><img src="" /></div>
		            <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
		        </div>
		    </div>

		    <div class="container">
		    	<div class="row">
		    		<div class="reviewText lightYellow">Blah Blah blah Blah blah Blah blah.</div>
				    <div class="recommend lightGreen">Yes</div>
		    	</div>
		    </div>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

谢谢！

P.S。，为了给出一些额外的清晰度，我只希望第一行具有相同的高度，并且3列本质上是静态的（没有动态添加行或列）。

这里有一个屏幕截图，显示第一行的高度不相等，调整到平板电脑尺寸时效果不佳..

因此，如果我可以将第一行设置为相同的高度（不使用固定高度，因为加载到行中的内容是动态的），那将大大清理布局。

Answer 1

这样的东西？可能会误解这个问题。

https://jsfiddle.net/mtfnaztp/4/

如果给容器一个柱弯曲方向和一个定义的高度来填充：

.container {
    height: 300px;
}

#firstContainer, #secondContainer, #thirdContainer {
    flex:1;
    display: flex;
    flex-direction: column;
    height: 300px;
}

Answer 2

我想建议一种利用Grid Layout的方法。请查看supported browsers on caniuse.com。

使用网格可以这么简单：

HTML

i

CSS

i

以下是使用上述内容实现的示例的JsFiddle：
https://jsfiddle.net/mtfnaztp/8/