使用 CSS3 或 flex-box 进行多列、多行垂直和水平对齐答案

【问题标题】：Multi-Column, Multi-row vertical and horizontally aligned using CSS3 or flex-box使用 CSS3 或 flex-box 进行多列、多行垂直和水平对齐
【发布时间】：2015-02-03 05:31:45
【问题描述】：

我似乎找不到没有 javascript 或 hacky 标记的方法来构建它。我的数据列需要响应相邻列中的文本量。页面上将有四列水平。如果条目超过 4 个，则列应该换行，并且像以前一样，将每个单元格的高度调整为最高的相邻单元格。我不能在表格中真正做到这一点，因为设计应该是响应式的，并最终下降到每行 2 列，然后是 1 列。

我不太确定 flex-box 会做我想要的，因为每行的高度取决于相邻的列。垂直空间可以均匀填充，但单元格不一定会水平排列。

Link to what I am trying to accomplish

如果问题难以理解，我们深表歉意。如果需要，将发布更多图片。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

* {box-sizing: border-box; font-family: sans-serif;}

#container {
    width: 100%; 
    height: 400px;  
  
    display: flex;
    flex-flow: row wrap;
    /*align-items: center; | Don't use*/ 
}

.row {
    flex: 1 1 auto;
    width: 24%;
    border: 2px solid #333;
    margin: 1%;
    margin-left: 0;
    max-width: 24%;
  
    display: flex;
    flex-flow: column;
}

header {
  padding: 16px;
  text-align: center;
  background: #3498DB;
  color: #fff;
}

section {
  padding: 8px;
  text-align: center;
  background: #E74C3C;
  color: #fff;
  
  flex: 1;
}

aside {
  padding: 8px;
  text-align: center;
  background: #7F8C8D;
  color: #fff;
}

footer {
  padding: 16px;
  text-align: center;
  background: #34495E;
  color: #fff;
}

<body>
    <div id="container">
        <div class="row">
            <header>header / Lorem ipsum dolor sit amet, consectetur adipisicing elit.</header>
            <section>section / Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde aliquid dolores est perferendis, voluptates delectus, quidem fugiat alias ullam voluptas sit voluptatibus ipsam similique nulla, doloremque sequi accusamus id provident.</section>
            <aside>aside</aside>
            <footer>footer</footer>
        </div>
        <div class="row">
            <header>header</header>
            <section>section</section>
            <aside>aside</aside>
            <footer>footer</footer>
        </div>
        <div class="row">
            <header>header</header>
            <section>section</section>
            <aside>aside</aside>
            <footer>footer</footer>
        </div>
        <div class="row">
            <header>header</header>
            <section>section</section>
            <aside>aside</aside>
            <footer>footer</footer>
        </div>

        <div class="row">
            <header>header</header>
            <section>section</section>
            <aside>aside</aside>
            <footer>footer</footer>
        </div>
        <div class="row">
            <header>header</header>
            <section>section / Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde aliquid dolores est perferendis, voluptates delectus.</section>
            <aside>aside</aside>
            <footer>footer</footer>
        </div>
    </div>
</body>

【讨论】：

感谢您的回复，这与我需要的很接近，但我也希望对齐页眉、部分、旁边和页脚的起点和终点。本质上，将所有元素的高度设置为 4 个“行”分组中最大的一个。我不确定是否可以使用 flexbox 或任何 css 来解决这个问题。 example showing what is produced vs desired result
我认为你不能用 CSS 做到这一点，你需要使用 Javascript 从主行复制高度并将它们应用到其他行。