时间戳

首页 > 解决方案 > 如何使用 Flexbox 对齐 HTML 中的项目

html - 如何使用 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>

工作多摩

标签： htmlcssflexboxtext-align

解决方案

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

  1. flex 中的所有三列都采用相同的宽度 ( 33%)
  2. 可选：链接删除列表样式和右对齐以获得更好的 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>

推荐阅读