Flexbox 在页脚中对齐内容？答案

【问题标题】：Flexbox to align content in footer?Flexbox 在页脚中对齐内容？
【发布时间】：2017-07-20 17:08:23
【问题描述】：

好的，我一直在尝试让页脚中的内容在交叉轴和主轴上均等对齐。

所有三个 div 都需要在页脚中隔开以使它们周围的空间相等，并且中心 div 即红色 div 必须是 2x 比例其他 div 的（与目前一样，除了没有正确间隔）
所有div的高度应该和红色div一样。 注意：绿色div越小就是高度，橙色div越大。

这是页脚的样子：http://imgur.com/a/hENE6

任何想法都会受到赞赏。

【问题讨论】：

如果您共享代码，人们可以通过修改代码来提供帮助， - 将flex: 1 添加到所有三列，即使内容超出 flexbox 指定空间，其他列也会缩小，到避免这种使用溢出：hidden / scroll , flexwrap ..

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：