Flex Sizing
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="FlexSizing.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Sizing</title>
</head>
<body>
<div id="outer">
<div id="violet">violet</div>
<div id="indigo">indigo</div>
<div id="blue">Blue</div>
<div id="green">Green</div>
<div id="yellow">Yellow</div>
<div id="orange">Orange</div>
<div id="red">Red</div>
</div>
</body>
</html>
CSS
#outer {
height: 500px;
width: 500px;
border: 2px solid black;
margin: 2px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
#violet, #indigo, #blue, #green, #yellow, #orange, #red {
flex-basis: 100px;
height: 50px;
width: 50px;
}
#violet { background-color: violet; }
#indigo { color: white; background-color: indigo; }
#blue { color: wheat; background-color: blue; }
#green { background-color: green; }
#yellow { background-color: yellow; }
#orange { background-color: orange; }
#red { background-color: red; }
Comments
Post a Comment