如何右键对齐flex项？

8 回答

• 30

  干得好 . 在Flex容器上设置 justify-content: space-between .

  .main { 
      display: flex; 
      justify-content: space-between;
    }
  .a, .b, .c { background: #efefef; border: 1px solid #999; }
  .b { text-align: center; }
  

  <h2>With title</h2>
  <div class="main">
      <div class="a"><a href="#">Home</a></div>
      <div class="b"><a href="#">Some title centered</a></div>
      <div class="c"><a href="#">Contact</a></div>
  </div>
  <h2>Without title</h2>
  <div class="main">
      <div class="a"><a href="#">Home</a></div>
  <!--     <div class="b"><a href="#">Some title centered</a></div> -->
      <div class="c"><a href="#">Contact</a></div>
  </div>
  

  回复于 2024-05-01T09:31:21+08:00
• 13

  更灵活的方法是使用 auto 左边距（flex项处理auto margins与在块格式化上下文中使用时略有不同） .

  .c {
      margin-left: auto;
  }
  

  Updated fiddle:

  .main { display: flex; }
  .a, .b, .c { background: #efefef; border: 1px solid #999; }
  .b { flex: 1; text-align: center; }
  .c {margin-left: auto;}
  

  <h2>With title</h2>
  <div class="main">
      <div class="a"><a href="#">Home</a></div>
      <div class="b"><a href="#">Some title centered</a></div>
      <div class="c"><a href="#">Contact</a></div>
  </div>
  <h2>Without title</h2>
  <div class="main">
      <div class="a"><a href="#">Home</a></div>
      <!--<div class="b"><a href="#">Some title centered</a></div>-->
      <div class="c"><a href="#">Contact</a></div>
  </div>
  <h1>Problem</h1>
  <p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
  

  回复于 2024-05-01T09:31:21+08:00
• 24

  一样容易

  .main { display: flex; flex-direction:row-reverse;}
  

  回复于 2024-05-01T09:31:21+08:00
• 263

  将以下css类添加到样式表：

  .my-spacer { flex: 1 1 auto; }

  在左侧元素和您希望右对齐的元素之间放置一个空元素：

  <span class="my-spacer"></span>

  回复于 2024-05-01T09:31:21+08:00
• 5

  或者你可以使用 justify-content: flex-end

  .main { display: flex; }
  .c { justify-content: flex-end; }
  

  回复于 2024-05-01T09:31:21+08:00
• 1

  如果您需要一个项目左对齐（如 Headers ）但是然后多个项目右对齐（如3个图像），那么您将执行以下操作：

  h1 {
     flex-basis: 100%; // forces this element to take up any remaining space
  }
  
  img {
     margin: 0 5px; // small margin between images
     height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
  }
  

  这就是它的样子（上面的代码段只包含了相关的CSS）

  

  回复于 2024-05-01T09:31:21+08:00
• 20

  如果你想为此使用flexbox，你应该能够这样做（容器上的 display: flex ，项目上的 flex: 1 和 .c 上的 text-align: right ）：

  .main { display: flex; }
  .a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
  }
  .b { text-align: center; }
  .c { text-align: right; }
  

  ...或者（甚至更简单），如果项目不需要满足，您可以在容器上使用 justify-content: space-between 并完全删除 text-align 规则：

  .main { display: flex; justify-content: space-between; }
  .a, .b, .c { background: #efefef; border: 1px solid #999; }
  

  这是Codepen上的demo，允许您快速尝试上述内容 .

  回复于 2024-05-01T09:31:21+08:00
• 849

  您还可以使用填充填充剩余空间 .

  <div class="main">
      <div class="a"><a href="#">Home</a></div>
      <div class="b"><a href="#">Some title centered</a></div>
      <div class="filler"></div>
      <div class="c"><a href="#">Contact</a></div>
  </div>
  
  .filler{
      flex-grow: 1;
  }
  

  我已经用3个不同版本更新了解决方案 . 这是因为讨论了使用附加填料元件的有效性 . 如果你运行代码剪切，你会发现所有解决方案都做了不同的事情 . 例如，在项目b上设置填充类将使此项目填充剩余空间 . 这样做的好处是没有不可点击的“死”空间 .

  <div class="mainfiller">
      <div class="a"><a href="#">Home</a></div>
      <div class="b"><a href="#">Some title centered</a></div>
      <div class="filler"></div>
      <div class="c"><a href="#">Contact</a></div>
  </div>
  
  <div class="mainfiller">
      <div class="a"><a href="#">Home</a></div>
      <div class="filler b"><a href="#">Some title centered</a></div>
      <div class="c"><a href="#">Contact</a></div>
  </div>
  
  
  
  <div class="main">
      <div class="a"><a href="#">Home</a></div>
      <div class="b"><a href="#">Some title centered</a></div>
      <div class="c"><a href="#">Contact</a></div>
  </div>
  
  <style>
  .main { display: flex; justify-content: space-between; }
  .mainfiller{display: flex;}
  .filler{flex-grow:1; text-align:center}
  .a, .b, .c { background: yellow; border: 1px solid #999; }
  </style>
  

  回复于 2024-05-01T09:31:21+08:00