Skip to content

Instantly share code, notes, and snippets.

@seanbreckenridge

seanbreckenridge/flexbox_row_example.html

Created July 10, 2019 19:17
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 seanbreckenridge/98bc7f5a4ce348d60d22df75e9194514 to your computer and use it in GitHub Desktop.
Save seanbreckenridge/98bc7f5a4ce348d60d22df75e9194514 to your computer and use it in GitHub Desktop.
Download ZIP
Basic example using a horizontal flexbox
Raw
flexbox_row_example.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox Example</title>
<style>
.flexbox {
margin: 100px auto 0 auto; /* basic margins */
min-height: 400px; /* minimum height of 500px, as long as the things inside dont grow beyond that */
height: auto; /* if div's inside are larger than 500px, this should 'auto'matically grow */
width: 80%; /* 80% of page next container up (the body, whole page) */
background-color: grey;
border-radius: 5px;
display: flex; /* define this as a flexbox */
flex-flow: row nowrap; /* display children as a row, don't wrap inner boxes if screen size gets small*/
justify-content: space-around; /* make sure space around is the same no matter what screen size is */
align-items: center; /* center vertically */
}
/* basic styles */
/* target any element with "flexbox-row" class inside an element with "flexbox" */
.flexbox .flexbox-row {
background-color: black;
color: white;
font-size: 30px;
padding: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="flexbox">
<div class="flexbox-row">
<p>Text 1</p>
</div>
<div class="flexbox-row">
<p>Text 2</p>
</div>
<div class="flexbox-row">
<p>Text 3</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment