如何使用 Flexbox 对齐 HTML 中的项目

问题描述

我希望我的项目按特定顺序放置，以便标题（带有版权段落的标题）位于页面中间的中央，我的“关于”部分不会被填满我的页面的一半......我试过使用 flex-basis 这样我可以给每个项目一个特定的宽度，但似乎没有用，有什么想法吗？这是页脚部分的代码，我对导航栏和页脚都有这个问题，但我想如果它对一个有用，它通常会起作用另外 PM ：我不知道为什么大多数 html 代码都没有显示代码段，这是它的外观图片 https://imgur.com/4xXP36C

HTML 代码：

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

.container {
  max-width: auto;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
  align-self: start;

}

.bg-dark,.btn-dark {
  background-color: var(--dark-color);
  color: #fff;
}
.footer .Box a{

  margin: 0 5px;
}
.lead {
  font-size: 20px;
}
.py-1 {
  padding: 1rem 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<footer class="footer bg-dark ">
    <div class="container flex lead py-1">
       <div class="Box">
           <h1>About</h1>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum vel praesentium molestias consectetur ea consequuntur a quidem vitae iste?</p>
       </div> 
       <div class="Box">
        <h1>CarolandHousing</h1>
        <p>copyright &copy; 2021</p>
        </div>
        <div class="Box">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="docs.html">Docs</a></li>
                    <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                    <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
                </ul>
            </nav>
        </div>
     </div>
</footer>

Working Domo

解决方法

请根据您的要求在下面找到更新的代码，如下所示：-

flex 中所有三列的宽度相等 (requirements.txt)
可选：链接移除列表样式并右对齐以获得更好的用户界面

33%

.flex {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 100%;
}

.container {
  max-width: auto;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
  align-self: start;
  
}

.flex-basis-3{
  flex-basis: 33%
}

.text-center{
  text-align: center
}

.text-right{
  text-align: right
}

.no-list{
  list-style: none;
}

.bg-dark,.btn-dark {
  background-color: var(--dark-color);
  color: #000;
}
.footer .box a{
  margin: 0;
}
.lead {
  font-size: 20px;
}
.py-1 {
  padding: 1rem 0;
}

flexbox flexbox html text-align