CSS - właściwości flex-grow
flex-grow: number
| kod |
wynik kodu |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>webatak.pl - CSS - właściwości generowanej treści</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.flex-container {
height: 240px;
width: 320px;
font-size: 30px;
border: 2px solid black;
display: flex;
}
.item1 {
background: yellow;
flex-grow: 1;
}
.item2 {
background: orange;
flex-grow: 3;
}
.item3 {
background: red;
flex-grow: 5;
}
</style>
</head>
<body>
<h2>flex-grow: number</h2>
<div class="flex-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
|
|