relaxedtomato/css

## css
.parent {
  width: 100%;
  height: 350px;
  outline: 1px solid black;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* align-items: baseline; */
  /* flex-wrap: wrap-reverse; */
  flex-flow: row nowrap;
}

.child {
  /* width: 200px; */
  flex-basis: 50px;
  flex-grow: 1;
  flex-shrink: 1;
  flex: 50px 1 1
  order: 0;
  align-self: flex-start;
  height: 50px;
  outline: 1px solid orange;
}

.child-3 {
  flex-grow: 3;
  order: 1;
  align-self: stretch;
}

.child-1 {
  flex-grow: 2;
  order: 2;
}

.child-2 {
  flex-shrink: 3;
}

## html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="parent">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child child-3">3</div>
  <div class="child child-4">4</div>
  <div class="child child-5">5</div>
  <div class="child child-6">6</div>
</body>
</html>
	.parent {
	width: 100%;
	height: 350px;
	outline: 1px solid black;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	/* align-items: baseline; */
	/* flex-wrap: wrap-reverse; */
	flex-flow: row nowrap;
	}

	.child {
	/* width: 200px; */
	flex-basis: 50px;
	flex-grow: 1;
	flex-shrink: 1;
	flex: 50px 1 1
	order: 0;
	align-self: flex-start;
	height: 50px;
	outline: 1px solid orange;
	}

	.child-3 {
	flex-grow: 3;
	order: 1;
	align-self: stretch;
	}

	.child-1 {
	flex-grow: 2;
	order: 2;
	}

	.child-2 {
	flex-shrink: 3;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body class="parent">
	<div class="child child-1">1</div>
	<div class="child child-2">2</div>
	<div class="child child-3">3</div>
	<div class="child child-4">4</div>
	<div class="child child-5">5</div>
	<div class="child child-6">6</div>
	</body>
	</html>