Question

我的布局问题我试图用flexbox实现。我希望将我的柱子比前一个柱子偏移一点以产生对角线/楼梯效果，但是我也希望它们能够像Flexbox自动提供的那样保持相同的高度增长到最高的柱子。 / p>

起初，我想：我只需要使用flexbox使它们具有相同的高度，然后用边距抵消它们，但似乎垂直边距的处理方式与flexbox完全不同，因为它们会推动盒子的上侧，但不是整个盒子...这导致我的所有柱子底部对齐，但这不是我想要实现的。

注意：我知道这可以通过许多其他方式实现，例如相对定位，在父级上添加填充，设置最小高度，使用JavaScript和其他方式，但我希望保持文档流完整，保持忽略对象的大小并避免使用JS。我还读到，即将出现的灵活差距或项目差距可能会在未来解决此类问题，但it's still an open issue / idea in the CSS Working Group draft。

这是文档涂鸦，用于文档的持久性。

Flex               Expected
-                  -
|    -             |    -
|    |    -        |    |    -
|    |    |        |    |    |
-    -    -        -    |    |
                        -    |
                             -

这是我想要实现的实时演示以及当前使用flexbox规范的结果：

＆＃13;

*{
  box-sizing:border-box;
}

.wrap{
  display:flex;
  flex-direction: row;
  width: 100%;
}

.box{
  flex:0 0 33%;
  padding:0 10px;
}
.box:nth-child(2){
  margin-top: 60px;
}
.box:nth-child(3){
  margin-top: 120px;
}

.box-inner{
  height: 100%;
  
  text-align:center;
  background:#ccc;
  border-radius:10px;
  padding: 20px;
  box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}

.wrap2{
  overflow:hidden;
}

.box2{
  float:left;
  width:33%;
  padding: 0 10px;
}
.box2:nth-child(2){
  margin-top: 60px;
}
.box2:nth-child(3){
  margin-top: 120px;
}

.box-inner2{
  min-height:300px;
  
  text-align:center;
  background:#ccc;
  border-radius:10px;
  padding: 20px;
  box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}

＆＃13;

<h2>Flexbox</h2>
<div class="wrap">
  <div class="box">
    <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
  </div>
  
  <div class="box">
    <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
  </div>
  
  <div class="box">
    <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
  </div>
</div>

<h2>Expected</h2>
<div class="wrap2">
  <div class="box2">
    <div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
  </div>
  
  <div class="box2">
    <div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
  </div>
  
  <div class="box2">
    <div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
  </div>
</div>

＆＃13;

谢谢！

Answer 1

使用底部边距进行游戏。见下文。

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.box {
  flex: 0 0 33%;
  padding: 0 10px;
}

.box:nth-child(2) {
  margin-top: 60px;
  margin-bottom: -60px;
}

.box:nth-child(3) {
  margin-top: 120px;
  margin-bottom: -120px;
}

.box-inner {
  height: 100%;
  text-align: center;
  background: #ccc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

.wrap2 {
  overflow: hidden;
}

.box2 {
  float: left;
  width: 33%;
  padding: 0 10px;
}

.box2:nth-child(2) {
  margin-top: 60px;
}

.box2:nth-child(3) {
  margin-top: 120px;
}

.box-inner2 {
  min-height: 300px;
  text-align: center;
  background: #ccc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

<h2>Flexbox</h2>
<div class="wrap">
  <div class="box">
    <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
  </div>

  <div class="box">
    <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
  </div>

  <div class="box">
    <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
  </div>
</div>

<h2>Expected</h2>
<div class="wrap2">
  <div class="box2">
    <div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
  </div>

  <div class="box2">
    <div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
  </div>

  <div class="box2">
    <div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
  </div>
</div>

具有阶梯效果的Flexbox边距和offseting问题

1 个答案: