Skip to content

Instantly share code, notes, and snippets.

@frensuren

frensuren/index.html

Created March 31, 2021 17:06
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 frensuren/8df596fe10d6887094f2b408db750f09 to your computer and use it in GitHub Desktop.
Save frensuren/8df596fe10d6887094f2b408db750f09 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>3 Col Flexbox</title>
<style id="jsbin-css">
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid #ccc;
}
[class*='col'] {
padding: 5px;
}
.row {
display: flex;
}
.col-60 {
width: 60%;
flex-grow: 0;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio magni numquam delectus consequatur totam error vero odio doloribus! Facilis inventore, odit sequi in repellat officiis accusantium quia optio ea nulla.</div>
<div class="col-60">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nihil, quaerat consequatur fugiat error ipsum dolore aspernatur, iusto numquam, voluptate quibusdam, molestias rem maxime illum architecto amet repellendus magnam illo!</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente delectus voluptate voluptatum vel provident fugiat nobis architecto quam modi voluptates, perferendis quibusdam dolorem a placeat sint earum alias, doloremque rem.</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid #ccc;
}
[class*='col'] {
padding: 5px;
}
.row {
display: flex;
}
.col-60 {
width: 60%;
flex-grow: 0;
flex-shrink: 0;
}</script>
</body>
</html>
Raw
jsbin.untitled.css
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid #ccc;
}
[class*='col'] {
padding: 5px;
}
.row {
display: flex;
}
.col-60 {
width: 60%;
flex-grow: 0;
flex-shrink: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment