Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>Stupid border tricks.</h1>
  
  <p>When creating a component that adapts to available space <em>without</em> using Media Queries, I found myself in a situation where I had two items and wanted a border between them.</p>
  <p>The border would be left (or right) when items lined up horizontally, but top (or bottom) when the items lined up vertically.</p>
  
  <p>In essence, I wanted <code>border-between</code> or somesuch.</p>
  
  <p>With a little fiddling, I came up with the following solution:</p>
  
  
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  
  
<pre><code>.container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
​
.item {
  flex: 1 1 20em;
  background-color: hotpink;
  border-top: 1px solid purple;
  border-left: 1px solid purple;
  margin-top: -1px;
  margin-left: -1px;
}
</code></pre>
  
 <p>...where the border is always present on top/left, but hidden with negative margins (resize the viewport to see it in action).</p>
  
  <p>Then, I thought, ”wait, I could just use the logical direction keywords (<code>border-block-start</code> vs <code>border-inline-start</code> etc) in modern browsers”, quickly followed by, ”no, I can’t – the logical direction isn’t actually changing.”</p>
  
  <p>Anyway, current status: feeling clever/feeling dirty.</p>
  
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
thatemilpro
0viewers