最后定位柔性盒

Question

我在弹性盒容器中有两个内盒。正如你在图片上看到的那样

代码

<md-toolbar layout="row" layout-align="space-around center" ng-controller="NavbarCtrl">

  <div layout="row" flex="30" style="border: 1px solid #F39814;">

    <div layout="row" style="border: 1px solid #440044;align-items: flex-start;">
      <h2>Project</h2>
    </div>
    <div layout="row" style="border: 1px solid #ffff00;align-items: flex-end;">
      <p>Sign In</p>
    </div>

  </div>

</md-toolbar>

我想在右侧放置签到框，项目框应该留在左侧。我尝试使用声明align-items: flex-end;在右侧放置登录框，但它不起作用。我做错了什么？

我正在使用棱角材料设计并尝试如下：

<md-toolbar layout="row" layout-align="space-around center" ng-controller="NavbarCtrl">

  <div layout="row" flex="30" style="border: 1px solid #F39814;">

    <div layout="row" layout-align="end center" style="border: 1px solid #440044;">
      <h2>Project</h2>
    </div>

    <div layout="row" layout-align="end center" style="border: 1px solid #ffff00;">
      <p>Sign In</p>
    </div>

  </div>

</md-toolbar>

但它也不起作用。

Answer 1

您可以使用以下css属性在它们之间添加一个空的flex项：

flex: 1 0 auto

但我无法帮你翻译角度语法。

a demo

Answer 2

您是否尝试在内部<span flex>内添加空<div>元素？

这是我分离左/右对齐工具栏工具的方式。

修改：如果您不想在标记中添加额外的<span>标记，您还可以尝试在外部layout-align="space-between"设置<div>。