Question

有人知道如何使用flexbox创建此布局吗？

文本将放在中间，按钮将放在文本和底部之间。

我现在有这个：

＆＃13;

.aligner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

＆＃13;

<div class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <button>BUTTON</button>
</div>

＆＃13;

这会对齐中心的所有内容，但我只希望文本位于中心，而中心和底部之间的按钮。

Answer 1

您可以尝试以下布局：

flex: 1
标题和副标题（标题）
包含display: flex和html, body {height: 100% } * { margin: 0; } .aligner, .below { display: flex; justify-content: center; flex-direction: column; align-items: center; } .aligner { height: 100%; } .aligner::before { content: ''; } .aligner::before, .below { flex: 1; }的元素。

标题上方和下方的元素将占用标题等额的可用空间。所以标题将成为中心。

这些元素也可以是flex容器，您可以根据需要将它们的内容对齐。

<div class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <div class="below">
    <button>BUTTON</button>
  </div>
</div>

.grid-item {
    height: 180px;
    width: 320px;
    overflow: hidden;
}

.grid_zoom {
    width: 105% !important;
}

.grid-item .grid_pic {
    width: 100%;
    height: auto;
    transition-delay: 1s; /* delays for 1 second */
    -webkit-transition-delay: 1s; /* for Safari & Chrome */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

Answer 2

文本将被放置在中心，按钮正在运行放在文本和底部之间。

您可以将auto margins与不可见的弹性项目结合使用来实现布局：

（编辑：我在用示例代码更新问题之前写了这个答案。所以我的代码与问题中的代码不同。但该方法仍适用。）

＆＃13;

<div class="container">
  <div class="box">BUTTON</div><!-- invisible flex item -->
  <div class="box">SUPERMAN</div>
  <div class="box">BUTTON</div>
</div>

＆＃13;

.container > div:nth-child(1) { /* margin-top: auto; */ visibility: hidden; }
.container > div:nth-child(2) { margin-top: auto; }
.container > div:nth-child(3) { margin-top: auto; /* margin-bottom: auto; */ }

＆＃13;

jsFiddle

此外，通过两次微调，底部项目可以与边缘齐平。

justify-content: space-between

jsFiddle

或者，只需使用.container > div:nth-child(1) { visibility: hidden; } /* .container > div:nth-child(2) { margin-top: auto; } */ /* .container > div:nth-child(3) { margin-top: auto; } */ .container { display: flex; flex-direction: column; align-items: center; background-color: yellow; height: 100%; box-sizing: border-box; justify-content: space-between; /* NEW */ }：

bugReport:
path:     /bugReport/{eStatusCode}/{eMessage}
defaults: { _controller: utilisateurBundle:ExceptionReport:bugReport }    
requirements:
    eMessage: .[a-zA-Z1-9\-_\/?;!"`'()`\|{}]+
options:
    expose: true

jsFiddle

有关更多对齐选项，请参阅：Methods for Aligning Flex Items

Flexbox：在底部和中心之间对齐？

2 个答案: