Question

我无法在没有javascript或hacky标记的情况下找到构建此方法的方法。我有一些数据列需要响应相邻列中的文本量。页面上将有四列水平。如果有超过4个条目，列应该像以前一样进行换行，将每个单元格的高度调整到最高的相邻单元格。我无法在表格中真正做到这一点，因为设计应该是响应式的，最终每行减少到2列。

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

Link to what I am trying to accomplish

如果问题难以理解，请道歉。如果需要，会发布其他图片。

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

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

1 个答案: