Flex div 不会左对齐而是右对齐答案

【问题标题】：Flex div won't align to the left but to the rightFlex div 不会左对齐而是右对齐
【发布时间】：2020-12-08 18:31:44
【问题描述】：

我有一个 bootstrap 4 标头，我在其中使用 flex 进行一些自定义布局。

这里是html：

<nav class="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="">
    </a>
    <div class="box">
      <div class="title">TITLE HERE</div>
      <div class="flex-inline-container">
        <div class="icon"><img src="icon1.png" alt="" /></div>
        <div class="icon"><img src="icon2.png" alt="" /></div>
        <div class="icon"><img src="icon3.png" alt="" /></div>
        <div class="icon"><img src="icon4.png" alt="" /></div>
        <div class="icon"><img src="icon5.png" alt="" /></div>
      </div>
    </div>
  </div>
</nav>

还有 CSS：

.box {
  display: flex;
  border-right: 2px solid #bfbfbf;
  width: min-content;
  flex-direction: column;
}

.box .flex-inline-container {
  display: inline-flex;
}

.box .icon {
  margin-right: 20px;
  cursor: pointer;
}

.box .title {
  position: relative;
  left: 7px;
  font-size: 1.40rem;
  font-weight:300;
  color: #727272 !important;
}

我的问题是"flex-inline-container" div 一直向右移动，我需要它在左侧。

如何让它向左移动？

【问题讨论】：

你能简单地画出你期望它的样子吗？

标签： css twitter-bootstrap flexbox

【解决方案1】：

引导程序的.container-fluid 类具有Justify-content:space-between 属性。它均匀地分配项目（第一个项目与开始齐平，最后一个与末端齐平）。

在您的情况下，<a class="navbar-brand"><a> 将移至第一个，<div class="box"></div> 中的元素将移至最后。

如果你想覆盖 .Container-fluid 的 Justify-content 属性并移动到左边，然后添加 .justify-content-start 和 .Container-fluid。

【讨论】：

【解决方案2】：

.box {
  display: flex;
  border-right: 2px solid #bfbfbf;
  width: min-content;
  flex-direction: column;
}

.box .flex-inline-container {
  display: inline-flex;
}

.box .icon {
  margin-right: 20px;
  cursor: pointer;
}

.box .title {
  position: relative;
  left: 7px;
  font-size: 1.40rem;
  font-weight:300;
  color: #727272 !important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<nav class="navbar">
  <div class="container-fluid flex-row-reverse">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="">
    </a>
    <div class="box">
      <div class="title">TITLE HERE</div>
      <div class="flex-inline-container">
        <div class="icon"><img src="icon1.png" alt="" /></div>
        <div class="icon"><img src="icon2.png" alt="" /></div>
        <div class="icon"><img src="icon3.png" alt="" /></div>
        <div class="icon"><img src="icon4.png" alt="" /></div>
        <div class="icon"><img src="icon5.png" alt="" /></div>
      </div>
    </div>
  </div>
</nav>

【讨论】：

标志移到了右边。我首先需要徽标，然后是任何框，.box 浮动到左侧（因为可能有多个 .box div）