'Use a flow on bottom

I have 3 different items on the bottom of the screen for my website but they use margins and bump each other up, I want to use a flex for this but don't know how to put this on the bottom of the screen can someone help?

<p style="font-size:12px; position: fixed; bottom: 0; width:100%; text-align: center" id="test"> Auron's website © </p>   <button style="position: fixed; bottom: 0; left: 0; right: auto; top: auto" onclick="playPause()">Play/Pause</button> 
<form style="position: fixed; bottom: 0; left: auto; right: 0; top: auto" action="calc.html">
  <input type="submit" value="Calculator" />
 </form>
htmlcssflexbox


Solution 1:[1]

Try following

html, body {
  margin: 0; 
  padding: 0;
}

div.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  left: 0;
}

div.footer > * {
  margin: 0;
}
<div class="footer">
  <p style="font-size:12px; order: 2;align-self: flex-end" id="test"> Auron's website © </p>
  <button style="order: 1;" onclick="playPause()">Play/Pause</button>
  <form style="order: 3;" action="calc.html">
    <input type="submit" value="Calculator" />
  </form>
</div>

Solution 2:[2]

use this code

.form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.form-wrap p,
.form-wrap button,
.form-wrap form {
  margin: 10px;
}
<div class="form-wrap">
  <p id="test"> Auron's website © </p>
  <button onclick="playPause()">Play/Pause</button>
  <form action="calc.html">
    <input type="submit" value="Calculator" />
  </form>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 m4n0

Related Questions