Flexboxで横並び- リキッドレイアウト

flex: 1;

flexプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティのショートハンド（省略形）

flex-growプロパティ

flex-growの値は整数値のみで、flexアイテムが伸びる比率を指定します
flex-growは、親要素のflexコンテナの余っているスペースを、子要素のflexアイテムに分配して、flexアイテムを伸ばすプロパティです

flex-shrinkプロパティ

flex-shrinkも値は整数値のみで、flexアイテムを縮める比率を指定します
flex-shrinkは、親要素のflexコンテナからはみ出した分を元に、子要素のflexアイテムを縮めるプロパティです。

flex-basisプロパティ

flex-basisは、flexアイテムの基準となる幅を設定するプロパティです
flex-basisは、widthまたはheightプロパティと同じ値を使用でき、px、em などの単位付きの数値や、親要素のflexコンテナに対するパーセンテージを指定します
デフォルトは auto で、コンテンツの内容に応じて自動サイズ設定されます

flexプロパティ

指定する値の数や単位あり/なしで、意味が変わってきます

指定する数値の数	単位あり / なし	プロパティの意味	例
１つ	単位なし	flex-grow	flex: 1;
１つ	単位あり	flex-basis	flex: 10em; flex: 30%;
２つ	単位なし	flex-grow, flex-shrink	flex: 2 2;
２つ	単位あり(１つ目の値は整数値)	flex-grow, flex-basis	flex: 1 30px;
３つ	単位あり(１つ目と２つ目の値は整数値)	flex-grow, flex-shrink, flex-basis	flex: 2 2 10%;

「flex: 1;」は「flex-grow: 1;」として解釈されます
「flex: 1;」は、「flex-grow: 1; flex-shrink: 1; flex-basis: 0;」と同じ意味になり、flexプロパティで3つ値を指定する「flex: 1 1 0;」とも同じです
flex-shrinkのデフォルト値は1のため、そのまま「flex-shrink: 1;」になります
flex-basisのデフォルト値はautoですが、省略時のデフォルト値は0のため、「flex-basis: 0;」扱いになります
概ねのケースでは、flexアイテムを伸ばすために「flex: 1;」と指定されることが多いため、その場合は「flex-grow: 1;」を指定しても同じ動作になります

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Liquid Layout</title>
<style>
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  text-align: center;
}
.main {
  flex: 1;
  height: 300px;
  background-color: #46beff;
}
.side {
  flex-basis: 200px;
  background-color: #e57373;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="main">
    main領域(残り)
  </div><!-- /.main -->
  <div class="side">
    side領域(固定)
  </div><!-- /.side -->
</div><!-- /.wrapper -->
</body>
</html>