problem with flexbox, align-self does not work

Question

I don't understand what im doing wrong with the use of flexbox.

I'd like to have my button on the extreme right of the screen (but that does not happen) and the text input on the left. I'd like to do it using flexbox. here is the code:

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

it works, give an height to the form and see it standing at bottom. align-self is for the vertical placement — G-Cyrillus, Mar 02 '20 at 16:35
Your `main-axis` is `row`. align-self works instead on the `cross-axis` — Fabrizio Calderan, Mar 02 '20 at 16:57

score 1 · Accepted Answer · answered Mar 02 '20 at 16:36

Just use justify-content: space-between; on the parent instead:

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

Alternatively, you can use margin-left: auto on the button:

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

score 0 · Answer 2 · answered Mar 02 '20 at 16:35

Might be looking align-content vs align-self and justify-content in form tag.

<div class="adder-comp">
  <form>
    <input type="text" placeholder="aggiungi compito.." />
    <button>crea</button>
  </form>
</div>

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

form {
  display: flex;
justify-content: space-between;
  background: red;
}

button {
  align-content: flex-end;
  }

score 0 · Answer 3 · answered Mar 02 '20 at 16:44

0

form{
  display: flex;
  background: red;
  justify-content: space-between
}

Just add justify-content: space-between to the form

answered Mar 02 '20 at 16:44

BucksDad

15
3

problem with flexbox, align-self does not work

3 Answers3