将弹性盒定位在末尾答案

【问题标题】：Positioning flex box at the end将弹性盒定位在末尾
【发布时间】：2015-03-03 04:51:32
【问题描述】：

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

代码

<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>

但它也不起作用。

【问题讨论】：

标签： javascript html angularjs css flexbox

【解决方案1】：

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

flex: 1 0 auto

但我无法帮助您将其翻译成角度语法。

a demo

【讨论】：

【解决方案2】：

您是否尝试在两个内部 <div> 之间放置一个空的 <span flex> 元素？

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

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

【讨论】：