Question

我有以下内容将元素对齐

HTML

-exec

CSS

<div class="flex-row">
     <div class="flex-1">
          <button class="el-button el-button--primary">Add File</button>
          <ul class="el-upload">
               <li classs="el-upload">something wider than the button</li>
          </ul>
     </div>
</div>

但是当他的列表内容比按钮更宽时，它会产生这样的结果：

.flex-row {
  display: flex;
  align-items: baseline;

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

如何使它与右边对齐，而不管下面元素的宽度如何？像这样：

-------
|  X  |
-------
-----------------
|               |
-----------------

Answer 1

bootstrap 4有许多现成的类，也适用于弯曲的盒子。请参阅更多https://v4-alpha.getbootstrap.com/utilities/flexbox/以了解可用的内容。

使用类

更新结构的示例

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="flex-row ">
     <div class="row justify-content-end">
          <button class="el-button el-button--primary">Add File</button>
          <ul class="el-upload">
               <li classs="el-upload">something wider than the button</li>
          </ul>
     </div>
</div>

or is it about column ?

<div class="flex-row">
     <div class="row flex-column align-items-end">
          <button class="el-button el-button--primary">Add File</button>
          <ul class="el-upload">
               <li classs="el-upload">something wider than the button</li>
          </ul>
     </div>
</div>
</div>

模拟flex容器，使用.row，.d-flex等类，请参阅前面提供的链接;）...

Answer 2

你需要浮动两个元素

这应该有效

https://codepen.io/dawsonhudson17/pen/GMGPjM

<div class="flex-row">
     <div class="flex-1">
          <button style='float: left;'class="el-button el-button--primary">Add File</button>
          <ul class="el-upload">
               <li style='float: left; margin-left: 20px;'classs="el-upload">something wider than the button</li>
          </ul>
     </div>
</div>

你也可以

<li style='float: right;'classs="el-upload">something wider than the button</li>

将flex-row中的元素对齐到右侧

2 个答案: