Flexbox 和元素位置

Posted 2023-03-05

【中文标题】Flexbox 和元素位置

【英文标题】：Flexbox & Element Positions

【发布时间】：2021-07-23 02:33:58

【问题描述】：

我正在使用引导程序开发一个 asp.net 核心 MVC Web 应用程序，并尝试创建一个侧边栏和主要内容区域。我在局部视图中创建了下面的代码，然后在 _Layout.cshtml 中引用该代码。这按预期工作，但是我希望将我的主要内容（当前占位符文本）定位在此旁边，而不是在下图中看到的内容被推到侧边栏下方。

这是我想要实现的外观：

本质上是左侧边栏和右侧主要内容的设计，但是可以看出主要内容当前显示在边栏下方。

侧边栏的 HTML：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column text-white bg-dark" style="width: 280px; height: 100vh;">
  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
    <img class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png"  style="height: 60px; width: 150px;" />
  </a>
  <div class="d-flex align-items-center text-light text-decoration-none">

  </div>
</div>

<div class="container d-flex flex-column">
  <main role="main" class="pb-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum.
      Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada
      fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.</p>
  </main>
</div>

如何将主要占位符内容放置在侧边栏旁边而不是其下方？

【问题讨论】：

这能回答你的问题吗？ How to horizontally center an element

将display: flex添加到sidebar和main容器的父元素中

我们需要看到minimal reproducible example。您在此处提供的代码与您的屏幕截图不符。

【参考方案1】：

正确使用 flexbox 可以轻松解决您的问题。这是给你的代码。

HTML：

<div class="wrapper d-flex justify-content-between">
   <div class="item d-flex flex-column text-white bg-dark">
      <a class="d-flex align-items-center justify-content-center text-white text-decoration-none" href="/">
         <img  class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" style="height: 60px; width: 150px;"/>
      </a>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
      </ul>
      <hr>
      <div class="d-flex align-items-center text-light text-decoration-none justify-content-center">
         <ul class="nav-item d-flex">
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="#">
                  <i class="fas fa-paint-roller">
                  </i>
               </a>
            </li>
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="#">
                  <i class="far fa-question-circle">
                  </i>
               </a>
            </li>
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="">
                  <i class="fab fa-github">
                  </i>
               </a>
            </li>
         </ul>
      </div>
   </div>
   <div class="item d-flex flex-column">
      <main class="p-5" role="main">
        <h2>Home</h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum. Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.
         </p>
      </main>
   </div>
</div>

CSS：

<style type="text/css">
    body, html 
        height: 100%;
    
    .wrapper 
        width: 100%;
        height: 100%;
    
    .wrapper .item:nth-child(1) 
        flex: 0.25;
    
    .wrapper .item:nth-child(2) 
        flex: 0.7;
    
</style>

【讨论】：

如何在 OP 的代码没有的地方“正确使用 flexbox”？