时间戳

首页 > 解决方案 > flexbox 的问题，align-self 不起作用

html - flexbox 的问题，align-self 不起作用

问题描述

我不明白我在使用 flexbox 时做错了什么。

我想让我的按钮在屏幕的最右边（但这不会发生），文本输入在左边。 我想用 flexbox 来做。这是代码：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

form {
  display: flex;
  background: red;
}

button {
  align-self: flex-end;
  }
<div class="adder-comp">
  <form>
    <input type="text" placeholder="aggiungi compito.." />
    <button>crea</button>
  </form>
</div>

标签： htmlcssflexbox

解决方案

只需 justify-content: space-between;在父级上使用：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

form {
  display: flex;
  background: red;
  justify-content: space-between;
}
<div class="adder-comp">
  <form>
    <input type="text" placeholder="aggiungi compito.." />
    <button>crea</button>
  </form>
</div>

或者，您可以margin-left: auto在按钮上使用：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

form {
  display: flex;
  background: red;
}

button {
  margin-left: auto;
}
<div class="adder-comp">
  <form>
    <input type="text" placeholder="aggiungi compito.." />
    <button>crea</button>
  </form>
</div>

推荐阅读