Flexbox で Flex プロパティを全く指定しない場合の動作 - CSS

Flexbox で Flex プロパティを全く指定しない場合にどのような動作になるのか紹介します。

コード

下記のコードを記述します。

no-flex-value.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="no-flex-value.css" />
</head>
<body>
  <div class="container">
    <div class="frameA">1番目のコンテンツ<br />あいうえお<br />かきくけこ</div>
    <div class="frameB">2番目のコンテンツ<br />αβγ<br /></div>
    <div class="frameC">3番目のコンテンツ<br />ABCDE<br />FGHIJK</div>
    <div class="frameD">4番目のコンテンツ<br />いろはに<br />ほへと</div>
    <div class="frameE">5番目のコンテンツ<br />12345<br />67890</div>

  </div>
</body>
</html>

no-flex-value.css

.container {
    display: flex;
}

.frameA {
    border: 1px solid #e9006b;
}

.frameB {
    border: 1px solid #ff6a00;
}

.frameC {
    border: 1px solid #d0b106;
}

.frameD {
    border: 1px solid #4aae20;
}

.frameE {
    border: 1px solid #01b9b3;
}

解説

display: flex; プロパティを設定した container クラスのdivタグ内に5つのdiv枠を配置しています。枠のクラスはそれぞれ、"frameA", "frameB", "frameC", "frameD", "frameE" としています。container 内部の枠には、flexプロパティ(flex-grow, flex-shrink, flex-basis) の値は設定しないものとします。