Skip to content

Instantly share code, notes, and snippets.

@Marianissimus

Marianissimus/flex-ex-1.markdown

Last active September 19, 2017 19:00
Show Gist options
  • Save Marianissimus/7c1e8b1b370d0cc29c251c10fd11f094 to your computer and use it in GitHub Desktop.
Save Marianissimus/7c1e8b1b370d0cc29c251c10fd11f094 to your computer and use it in GitHub Desktop.
Download ZIP
flex ex 1
Raw
index.html
<html>
<head>
<title>Flex exercise 1</title>
</head>
<body>
<div id="container">
<header>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
</ul>
</header>
<main>
<div class="card">Card No 1</div>
<div class="card">Card No 2</div>
<div class="card">Card No 3</div>
<div class="card">Card No 4</div>
</main>
<div id="sidebar">
This will be the sidebar.
</div>
</div>
</body>
</html>
Raw
style.css
#container {
display: flex;
flex-wrap: wrap;
}
header {
background: Moccasin;
overflow: hidden;
flex: 0 0 100%;
}
header ul li {
list-style-type: none;
display: inline-block;
border: 5px solid orange;
margin: 5px 0;
padding: 3px;
}
main {
background: pink;
flex-grow: 4;
display: flex;
flex-wrap: wrap;
overflow: hidden;
height: 330px;
justify-content: space-evenly;
}
/*pentru popular dubleaza inaltimea containerului
*/
.card {
flex: 1 0 33%;
border: 1px solid green;
margin: 10px;
padding: 5px;
min-width: 300px;
max-width: 400px;
height: 300px;
background: LemonChiffon;
}
#sidebar {
background: brown;
flex-grow: 1;
}
@media screen and (max-width: 1500px) {
#sidebar {
order: 1;
flex: 0 0 100%;
}
main {
order: 3;
}
header {
order: 2;
}
}
@media screen and (max-width: 500px) {
.card {
flex-basis: 90%;
min-width: 90%;
}
}
@Marianissimus
Copy link
Author

CSS Flexbox exercise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment