Skip to content

Instantly share code, notes, and snippets.

@lajlev
Created December 10, 2012 11:26
Show Gist options
  • Save lajlev/4250085 to your computer and use it in GitHub Desktop.
Save lajlev/4250085 to your computer and use it in GitHub Desktop.
A CodePen by Michael Lajlev.
h1 This is why I want flex box so badly
p Makes it possible to have a element take out the remaining space, without having a fixed width on the first element (in this case the button).
br
br
#flexbox
div
input type="button" value="Search"
div
input type="search" placeholder="Type your search here"
#flexbox
div
input type="button" value="A very loooooong word for saying search in french"
div
input type="search" placeholder="Type your search here"
@import "compass";
body {
margin: 40px;
background: #efefef;
}
#flexbox {
padding: 10px;
background: #fff;
display: -webkit-box;
-webkit-box-orient: horizontal;
div {
&:first-child {
margin-right: 10px;
}
&:last-child {
-webkit-box-flex: 1;
}
}
input {
box-sizing: border-box;
height: 40px;
padding: 10px;
&[type=search] {
width: 100%;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment