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

Question

我希望我的项目按特定顺序放置，以便标题（带有版权段落的 header）居中我的“关于”部分的页面不会填满我页面的一半...我试过使用 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

Answer 1

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

flex 中所有三列的宽度相等 (33%)
可选：链接删除列表样式和右对齐以获得更好的效果UI

.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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>

<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-fluid flex lead py-1">
       <div class="box flex-basis-3">
           <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 flex-basis-3 text-center">
        <h1>CarolandHousing</h1>
        <p>Copyright &copy; 2021</p>
        </div>
        <div class="box flex-basis-3 text-right">
            <div class="display: flex; justify-content: flex-end">
               <span><a href="index.html">Home</a></span>
               <span><a href="features.html">Features</a></span>
               <span><a href="docs.html">Docs</a></span>
            </div>
            <div>
              <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
              <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
            </div>
        </div>
     </div>
</footer>

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

How to align items in HTML using Flexbox

html

css

text-align

flexbox