Skip to content

Instantly share code, notes, and snippets.

@sivajankan

sivajankan/flexboxtrial.html

Last active September 28, 2019 12:57
Show Gist options
  • Save sivajankan/aa53e7ba09c88f7c3ef3a2cf487ea674 to your computer and use it in GitHub Desktop.
Save sivajankan/aa53e7ba09c88f7c3ef3a2cf487ea674 to your computer and use it in GitHub Desktop.
Download ZIP
Flex box trial for linksocial app
Raw
flexboxtrial.html
<!DOCTYPE html>
<!-- initial set was from https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap8 -->
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
div {
width: 100%;
align-self: center;
background-color: #f1f1f1;
}
.logo-flex-container {
display:flex;
flex-wrap: wrap;
flex-direction: column;
border: 2px dotted red;
}
.status-flex-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 2px dotted yellow;
}
.status-action-flex-container {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
border: 2px dotted violet;
}
.right-side-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 2px dotted red;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div class="logo-flex-container">
<div>G</div>
<div>Google</div>
</div>
<div class="right-side-container">
<div class="status-action-flex-container">
<div class="status-flex-container">
<div>LINK</div>
<div>Connected</div>
</div>
<div>DISCONNECT</div>
</div>
<div>email@gmail.com</div>
</div>
</div>
<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment