Question

因此，记录div的大小在整个过程中都必须相同。

我想按列添加记录，但所有记录的div大小均相同。这可能吗？因此，我添加的内容越多，列的大小和调整大小将相同。

 |1| |2| |3|
 |6| | | | |

 |1| |2| |3|
 | | | | | |

 |1| |2| |3|
 | | | | | |

<wrapper>
  <div class="column1">
     <div class="record">1 <br> 6</div>
     <div class="record">1</div>
     <div class="record">1</div>
  </div>
  <div class="column2">
     <div class="record">2</div>
     <div class="record">2</div>
     <div class="record">2</div>
  </div>
  <div class="column3">
     <div class="record">3</div>
     <div class="record">3</div>
     <div class="record">3</div>
  </div>
 </wrapper>

Answer 1

具有相同大小的列实际上就像在wrapper上设置 display: flex 以及在 flex-grow: 1 上设置一样简单.column。这告诉各列应该增加以填充可用空间。

如果您希望行之间有等距的空间，那么flexbox会自动为您处理；您需要做的就是指定行应使用100%占据其容器高度的height: 100%。

这可以在下面看到：

wrapper {
  display: flex;
}

.column {
  flex-grow: 1;
}

.record {
  height: 100%;
}

<wrapper>
  <div class="column">
    <div class="record">1 <br> 6</div>
    <div class="record">1</div>
    <div class="record">1</div>
  </div>
  <div class="column">
    <div class="record">2</div>
    <div class="record">2</div>
    <div class="record">2</div>
  </div>
  <div class="column">
    <div class="record">3</div>
    <div class="record">3</div>
    <div class="record">3</div>
  </div>
</wrapper>

添加更多列只会减少每列之间的间隔，使各列之间等距：

wrapper {
  display: flex;
}

.column {
  flex-grow: 1;
}

.record {
  height: 100%;
}

<wrapper>
  <div class="column">
    <div class="record">1 <br> 6</div>
    <div class="record">1</div>
    <div class="record">1</div>
  </div>
  <div class="column">
    <div class="record">2</div>
    <div class="record">2</div>
    <div class="record">2</div>
  </div>
  <div class="column">
    <div class="record">3</div>
    <div class="record">3</div>
    <div class="record">3</div>
  </div>
  <div class="column">
    <div class="record">4</div>
    <div class="record">4</div>
    <div class="record">4</div>
  </div>
  <div class="column">
    <div class="record">5</div>
    <div class="record">5</div>
    <div class="record">5</div>
  </div>
</wrapper>

Answer 2

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}
.flex-container {
 display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.column > div {
margin-top: 8px;
    vertical-align: middle;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  border:1px solid;
  width:20px;
  text-align:center
}
.column{
flex: 10%;
    max-width: 10%;
    padding: 0 4px;
}

</style>
</head>
<body>
<div class="flex-container ">
<div class="column">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  </div>
<div class="column">
  <div>4</div>
  <div>5</div>
  <div>6</div>
  </div>
<div class="column">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  </div>
</div>

</body>
</html>

使所有Div大小相同的CSS Flex

2 个答案: