flex grow and shrink
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"></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: 300px;
border: 2px solid black;
margin: 2px;
display: flex;
flex-direction: row;
}
#violet,
#indigo,
#blue,
#green,
#yellow,
#orange,
#red {
height: 50px;
width: 50px;
/* flex-basis:100px */
}
#violet {
flex-shrink: 3;
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