如何使用flexbox水平对齐项目？

Question

这里的初学者。出于某种原因，在我编码的网站上，未来的按钮在导航栏上没有水平对齐。我正在使用flexbox，但即使如此，它也没有像我希望的那样对齐它们。代码中似乎也没有任何问题。

.topPart {
  position: fixed;
  overflow: hidden;
  top: 0;
  margin: 0px 15px 30px 15px;
  width: 1790
  padding: 30px;
  border: 2px solid #3cc851;
  background-color: #1f1f1f;
}


.topButtons {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-center;
  height: 15px;
  width: auto;
  padding: 15px;
  background-color: #fff;
  color: #1f1f1f;
}


.topButtons .rightButtons {
  text-align: right;
  margin: auto 2px auto 1500px;
}


.topButtons .leftButtons {
  text-align: left;
  margin: auto 2% auto 2%;
}

html prettyprint-override">   <div class="topPart">
     <h2> Website name I don't want to share </h2> <p> Website slogan I don't want to share </p>
     <!-- later, make it so that the boxes of text are lined up like how it looks in the code using css -->
   <div class="topButtons">
     <div class="leftButtons">
       <a href="index.html" class="home">home<a>
       <a href="" class="mssg">mssg board<a>
       <a href="database.html" class="data">database<a>
       <a href="roleplay.html" class="rp">rp<a>
     </div>
     <div class="rightButtons">
       <a href="" class="dms">dms</a>
       <a class="out">logout</a>
       <a class="acc">acc</a>
     </div>
     </div>
    </div>

右侧按钮似乎比左侧按钮低约5px。在这里我完全不知所措，我的代码中似乎没有任何错误导致这种情况。应该修复它的Flexbox标记也不会做任何事情，例如flex-direction:row 和调整内容。

它看起来像什么。




Answer 1

您可以定义show： flex；，risage-Content： space-inter，amie-Item： center；在topPart类和相等的宽度内div这个flex： 1 1自动；css
我希望下面的片段将帮助你很多。

*,*:before,*:after{box-sizing: border-box;}
body{margin: 0; padding: 0}
.topPart {
  position: fixed;
  overflow: hidden;
  top: 0;
  padding: 30px 20px;
  border-bottom: 2px solid #3cc851;
  background-color: #fff;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.leftButtons {
  flex: 1 1 auto;
  text-align: left;
}
.centerButtons {
  text-align: center;
  flex: 1 1 auto;
}
.rightButtons {
  text-align: right;
  flex: 1 1 auto;
}
.centerButtons a, .rightButtons a{
  display: inline-flex;
  background-color: #ccc;
  padding: 4px 5px;
  text-decoration: none;
  color: #444;
  text-transform: capitalize;
}

<div class="topPart">
  <div class="leftButtons">
    <div>Website Name<br>Website slogan</div>
  </div>
  <div class="centerButtons">
    <a href="index.html" class="home">home</a>
    <a href="#" class="mssg">mssg board</a>
    <a href="database.html" class="data">database</a>
    <a href="roleplay.html" class="rp">rp</a>
  </div>
  <div class="rightButtons">
    <a href="" class="dms">dms</a>
    <a class="out">logout</a>
    <a class="acc">acc</a>
  </div>
</div>

Answer 2

这是由于“.leftButtons”和“.rightButtons”类上的“文本对齐”和“边距”的CSS属性造成的。您不需要使用这些属性，因为您正在使用“.topButtons”类上的“display:flex”。子类的水平和垂直对齐将通过“调整内容：间距和“对齐项目：居中“.topButtons”。

我已经删除了“.leftButtons”和“.rightButtons”类的CSS属性。更新了“调整内容：间距在“.topButtons”上，通过在元素之间留出相等的空间，使子类水平对齐。

我还对您的标记做了一些更正，我发现如下所述：（1）锚（/a）子“.leftButtons”的闭包标记丢失。（2） 在“.topPart”中宽度属性声明后缺少。还增加了宽度值“1790”的“px”。

请检查添加的代码。

            .topPart {
              position: fixed;
              overflow: hidden;
              top: 0;
              margin: 0px 15px 30px 15px;
              width: 1790px;
              padding: 30px;
              border: 2px solid #3cc851;
              background-color: #1f1f1f;
            }

            .topButtons {
              display: flex;
              flex-flow: row wrap;
              /* justify-content: space-around; [old code] */ 
              justify-content: space-between;
              align-items: center;
              height: 15px;
              width: auto;
              padding: 15px;
              background-color: #fff;
              color: #1f1f1f;
            }

            /*---- [old code]----*/
            .topButtons .rightButtons {
              /*text-align: right;
              margin: auto 2px auto 1500px;*/
            }
            
            .topButtons .leftButtons {
              /*text-align: left;
              margin: auto 2% auto 2%;*/
            }

<div class="topPart">
         <h2> The Blood Tundra Kingdom </h2>
         <p> - never talk about the blood tundra kingdom </p>
         <!-- later, make it so that the boxes of text are lined up like how it looks in the code using css -->
           <div class="topButtons">
                 <div class="leftButtons">
                   <a href="index.html" class="home">home</a>
                   <a href="" class="mssg">mssg board</a>
                   <a href="database.html" class="data">database</a>
                   <a href="roleplay.html" class="rp">rp</a>
                 </div>
                 <div class="rightButtons">
                   <a href="" class="dms">dms</a>
                   <a class="out">logout</a>
                   <a class="acc">acc</a>
                 </div>
            </div>
        </div>

Answer 3

div是一个块元素，因此保持auto的宽度基本上是向下推动第二个div的可用空间的100%。

尝试inline-flex或使宽度成为一个设定的数量，而不是自动