week7-1-1.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Week 7-1</title>

	<style type="text/css">
		
		div{display: flex; border: 1px solid; width: 800px;}
		p{width:100px;height: 100px;
			background-color: cyan;
			border: 1px solid;
			box-sizing: border-box;}

		/*p:nth-child(1),
		p:nth-child(3),
		p:nth-child(4){flex-grow: 1;} final width 180px

		p:nth-child(2){flex-grow: 2;} final width 260px*/

		/*p:nth-child(1){flex-grow: 2;}

		p:nth-child(2),
		p:nth-child(4){flex-grow: 1;}*/

		div{width: 300px;}

		p:nth-child(1),
		p:nth-child(4){flex-shrink: 2;}
		p:nth-child(2)
		p:nth-child(3){flex-shrink: 1;}
		


	</style>
</head>
<body>
<div>
	<p>1</p><p>2</p><p>3</p><p>4</p>
</div>
</body>
</html>