如何使用 CSS flex 使两个项目向左浮动，一个向右浮动？ [重复]

问题描述 投票：0回答：1

这个问题与“如何在设置 Html css nav 样式时对齐引用？”无关。

我需要使用 CSS 使两个项目左对齐，一个接一个，第三个项目右对齐。

传统上我会使用 float: left 和 float: right 来实现此目的，但不再推荐。

如何使用 flex 或现代 CSS 属性之一来做到这一点？

我尝试过：

.flex-container {
display: flex;
justify-content: flex-start;
}

这产生了所有东西都漂浮起来的效果。我想将一项向右浮动，但不是全部。

我找到了一个答案，它在第三个元素上执行

 margin-left: auto;
，但看起来像一个丑陋的黑客，这是最好的选择吗？

html css flexbox css-float
1个回答
0
投票

阅读此页面。 （是css中flexbox的完整概述）。

基本上我认为你可以使用align-self来覆盖第三个元素（flex-end）的初始flex（第一个和第二个元素的flex-start）。

编辑1

刚刚在游乐场尝试过

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="src/style.css">
   </head>
   <body>
      <div class="container">
         <div class="card">
            Card 1
         </div>
         <div class="card">
            Card 2
         </div>
         <div class="card alignRight">
            Card 3
         </div>
      </div>
   </body>
</html>

 .container{
     border: 1px solid red;
     width: 50%;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
}
 .card{
     border: 1px solid blue;
     width: 25%;
     padding: 2px 5px;
     background: gray;
     text-align: center;
}
 .alignRight{
     align-self: flex-end;
}

这就是结果

这里是游乐场

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.