Skip to content

Instantly share code, notes, and snippets.

@jaketrent

jaketrent/flexTitleExperiment.css

Created March 23, 2016 22:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jaketrent/05c08570110e85b6eb1c to your computer and use it in GitHub Desktop.
Save jaketrent/05c08570110e85b6eb1c to your computer and use it in GitHub Desktop.
Download ZIP
Flex experiment for horz title bits http://jsbin.com/vebaniteya/edit?css,output
Raw
flexTitleExperiment.css
.container {
display: flex;
height: 75px;
line-height: 75px;
justify-content: flex-start;
margin-bottom: 30px;
}
.container > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 5px;
}
.label {
outline: 1px solid green;
flex-shrink: 0;
}
.name {
outline: 1px solid red;
}
.duration {
outline: 1px solid blue;
flex-shrink: 0;
}
.durationInline {
display: inline-block;
outline: 1px solid purple;
}
.filter {
flex: 1;
text-align: right;
align-self: flex-end;
outline: 1px solid brown;
min-width: 150px;
}
Raw
flexTitleExperiment.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="label">This is a course:</div>
<div class="name">This is the course name that is long</div>
<div class="duration">(This is the time)</div>
<div class="filter">Filter me</div>
</div>
<div class="container">
<div class="label">This is a course:</div>
<div class="name">This is the course name that is the most longest in the world and even more</div>
<div class="duration">(This is the time)</div>
<div class="filter">Filter me</div>
</div>
<div class="container">
<div class="label">This is a course:</div>
<div class="name">
Short course name
<span class="durationInline">(Inline time)</span>
</div>
<div class="filter">Filter me</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment