如何使用 Flexbox 水平对齐内容？答案

【问题标题】：How to align content horizontally using Flexbox?如何使用 Flexbox 水平对齐内容？
【发布时间】：2019-12-13 08:35:07
【问题描述】：

Example Picture 别担心它的外观。我正在尝试使用 flexbox 将输入和锚与徽标水平对齐。附上例子。徽标将在右侧，带有锚点的输入将在左侧，但都是水平的。

<div class="small-12 cell footer-logo-container">
    <a href="#">
        LOGO
    </a>
    <div class="footer-email">
        Sign Up for the Rock River Report Here
        <input class="footer-input" type="email" placeholder="email">
        <a href="#" class="link">
            <div class="link-text">
                SUBSCRIBE
            </div>
        </a>
    </div>

【问题讨论】：

您好，欢迎您！你用 CSS 标记了这个问题，在我看来你需要一个 CSS 解决方案，但你没有添加你的尝试。换句话说 - 你的问题是什么......？
抱歉，我没有任何 CSS。我不担心外观与图片相同，只是想知道如何使用 flexbox 创建它。问题已更改。
好的。首先，您应该在阅读以下内容后修改您的问题：stackoverflow.com/help/how-to-ask。其次，试试看这个developer.mozilla.org/en-US/docs/Web/CSS/…

标签： html css

【解决方案1】：

检查https://css-tricks.com/snippets/css/a-guide-to-flexbox/。对您的大部分 CSS 有用的网站。如果我理解你写的正确，你可以使用这个代码：

    .footer-logo-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    
    .footer-email {
        display: flex;
    }

<div class="small-12 cell footer-logo-container">
      <a href="#">
         LOGO
      </a>
      <div class="footer-email">
        Sign Up for the Rock River Report Here
        <input class="footer-input" type="email" placeholder="email">
        <a href="#" class="link">
            <div class="link-text">
                SUBSCRIBE
            </div>
        </a>
    </div>

【讨论】：

如何在输入上方显示“在此处注册 Rock River 报告”文本，但所有内容都像您的解决方案一样对齐？
使用标签（查看此链接了解如何使用标签developer.mozilla.org/en-US/docs/Web/HTML/Element/label）。将标签和输入都放在一个带有 display: flex; 的 div 中。和 flex-direction: column;

【解决方案2】：

使用以下 css 代码，它应该可以正常工作：

.footer-logo-container{
    display: flex;
    flex-direction: row-revers;
    align-items: center;
    justify-content: space-between;
}

【讨论】：

怎么样？以什么方式？

【解决方案3】：

在 flexbox 中有三个重要的概念：flex-direction、align-items 和 justify-contents。 flex-direction 建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。

在您的情况下，您需要一个具有 display: flex 样式的 flex 容器，并且您需要设置 align-items: center 和 justify-content: space-between。您可以根据您的设计更改 html 中元素的顺序。

CSS：

.footer-logo-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

【讨论】：

【解决方案4】：

<div class="small-12 cell footer-logo-container">
    <a href="#">LOGO</a>
    <div class="footer-email">
        <p>Sign Up for the Rock River Report Here</p>
        <input class="footer-input" type="email" placeholder="email">
        <a href="#" class="link">
             <div class="link-text">SUBSCRIBE</div>
        </a>
    </div>
 </div>

CSS -

.footer-logo-container{
    display: flex;
    flex-direction: row-revers;
    align-items: center;
    justify-content: space-between;
}
.footer-email > p {
    display: inline-block;
 }
.footer-email > input {
   display: inline-block;
 }
.footer-email > a {
   display: inline-block;
 }

jsFiddle

【讨论】：