Question

好的，我一直试图让我的页脚中的内容在十字轴和主轴上均匀对齐。

所有三个div需要在页脚中间隔开，以便在它们周围具有相等的空间，并且中心div，即红色div必须是2x比率其他div （目前情况，除非没有正确间隔）
所有div的高度应与红色div相同。 注意：绿色div较小的是高度，橙色div较大。< / LI>

任何想法都将受到赞赏。

Answer 1

见下文。

footer {
background: blue;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 2em;
}
.green {
background: green;
width: 20%;
}
.red {
background: red;
width: 40%;
}
.orange {
background: orange;
width: 20%
};

<footer>
<div class="green">Text</div>
<div class="red">Text</div>
<div class="orange">Text</div>
</footer>

Answer 2

看着你分享的图片，我用flexbox创建了这个小提琴 https://jsfiddle.net/1r39tfc9/1/

根据需要调整页脚的高度。希望这会有所帮助。

<style>
    footer {
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      background-color: lightgrey;
      -webkit-align-items: stretch;
      align-items: stretch;
      height:200px;
    }

    .box {
      padding: 20px;
      text-align:center;
    }
    .green {
      background: green;
      flex:1;
    }
    .red {
      background: red;
      flex:2;
    }
    .orange {
      background: orange;
      flex:2;
    }
</style>

     <footer>
      <div class="box green">
        Green
      </div>
      <div class="box red">
        Red
      </div>
      <div class="box orange">
        Orange
      </div>
    </footer>

Flexbox是否在页脚中对齐内容？

2 个答案: