Flexbox Magic: Responsive Sign-Up Form

Apr 4, 2020  ⬪   1 min read

#css

A cool trick by Adam Argyle to create a responsive signup form with flexbox in very few lines of code:

form {
  display: flex;
  flex-wrap: wrap;

  & > input {
    flex: 1 1 10ch;
    margin: 0.5rem;

    &[type="email"] {
      flex: 3 1 30ch;
    }
  }
}