Skip to content

Instantly share code, notes, and snippets.

@teethnclaws

teethnclaws/flexbox-practice.markdown

Created October 23, 2016 00:11
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 teethnclaws/0aeb34065c0be727f2df1808203b21ea to your computer and use it in GitHub Desktop.
Save teethnclaws/0aeb34065c0be727f2df1808203b21ea to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Practice
Raw
index.html
<!--flexbox example practice-->
<html>
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
<!--for my sponsors bio-->
<div class="flex-item">
<span>Text Text Text Text Text Text Text Text Text Text Text</span><img src="http://placehold.it/100x100">
</div>
<div class="flex-item">
<span>Text Text Text Text Text Text Text Text Text Text Text</span><img src="http://placehold.it/100x100">
</div>
<div class="flex-item">
<span>Text Text Text Text Text Text Text Text Text Text Text</span><img src="http://placehold.it/100x100">
</div>
</div>
</body>
</html>
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
/*for my purposes I will likely use column and play with alignment for logo grid*/
flex-direction: row;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
min-width: 320px;
max-width: 1220px;
}
.flex-item {
height: 120px;
width: 300px;
background-color: #f8ecc9;
border: 2px solid #4f953b;
margin: 3px;
padding: 10px;
display: flex;
align-items: center;
color: #2980b9;
}
.flex-item img {
/*need to play with grow/shrink*/
border: 1px solid #d35400;
flex-grow: 0;
flex-shrink: 0;
}
span {
padding-left: 10px;
padding-right: 10px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment