Web制作でfooterを最下部に固定させるflex:1;の原理が知りたいです。

###教えてほしいこと
Web制作でfooterを最下部に固定させるflex:1;の原理が知りたいです。

###調べたこと
ぐぐった結果下記の内容がflex:1;の意味だったのですが、いまいち分からないのでかみ砕いた説明があると嬉しいです。

flex：<正数>
flexと同等：<positive-number> 1 0 flexアイテムをフレキシブルにし、flexの基準をゼロに設定します。その結果、アイテムはflexコンテナ内の指定された割合の空きスペースを受け取ります。フレックスコンテナ内のすべてのアイテムがこのパターンを使用する場合、それらのサイズは指定されたフレックスファクタに比例します。
参照元
https://www.it-mure.jp.net/ja/css/flex%EF%BC%9A1%E3%81%A8%E3%81%AF%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E6%84%8F%E5%91%B3%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/826223144/
###知りたくなったきっかけ

web制作の勉強でfooterをflexで画面の一番下に表示させる方法しているとき、flex:1;という方法があることがわかり、意味が知りたくなったためです。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>フッターを最下部に固定表示 デモ</title>
6        <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- CSS -->
9        <link rel="stylesheet" href="https://unpkg.com/destyle.css@1.0.5/destyle.css">
10        <link href="style.css" rel="stylesheet">
11    </head>
12
13	<body>
14        <article>
15            <h1>自己紹介</h1>
16            <p>
17                Webデザイナー+WebデベロッパーのManaです。
18                日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。
19                カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。
20                現在はWebサイト制作のインストラクターとして教育関連頑張ってます。
21            </p>
22        </article>
23        <footer>
24            <p><small>&copy; 2020 Mana</small></p>
25        </footer>
26	</body>
27</html>
28

css
1html, body {
2    height: 100%;
3}
4body {
5    color: #333;
6    line-height: 1.6;
7    font-family: sans-serif;
8
9    display: flex;
10    flex-direction: column;
11}
12article {
13    flex: 1;
14    padding: 2rem;
15}
16
17h1 {
18    font-size: 1.5rem;
19    margin-bottom: 1.5rem;
20}
21footer {
22    background: #0bd;
23    color: #fff;
24    text-align: center;
25    padding: 2rem 0;
26}

行動規範の内容に同意します

回答2件

まず、そのサイトのたぐいはStackOverflowを機械翻訳にかけただけのものを載せて広告収入を得るためのサイトです。
たいてい文章は意味不明ですし、重要なコメントが抜けていることもあり、見ることはおすすめしません。
きちんとオリジナルを見てください。多くの場合、オリジナルへのリンクは(ひっそりと)あります。
https://stackoverflow.com/questions/37386244/what-does-flex-1-mean
今回の場合「Equivalent to flex: <positive-number> 1 0.」の1文が「:」で切れた上に文末のピリオドが無視されて意味不明になっているのが分かりますね。

投稿2021/08/29 05:04

ikadzuchi

総合スコア3047

https://developer.mozilla.org/ja/docs/Web/CSS/flex

https://www.w3.org/TR/css-flexbox-1/#flex-common

に書いてあるとおり、

Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

flex:1それはflex: 1 1 0と同じ意味です。

投稿2021/08/29 01:25

Ftps

総合スコア288

tomomonX

2021/08/29 05:15

回答ありがとうございます。機械翻訳でなく、自力で翻訳しても同じ文章になるのですが、つまりどういうことでしょうか。 1というのは1行という意味なのかそれともz-indexの優先度のようなものなのか頭を悩ませています。原理がわかればfooterだけでなくheaderやサイドバーにも使えて便利だなと思いました。

ikadzuchi

2021/10/02 21:34

横から口を挟むのもどうかと待っていましたが(そのまま忘れていましたが)Ftpsさんの返事もなく質問が閉じられもしないので… > 機械翻訳でなく、自力で翻訳しても同じ文章になるのですが、つまりどういうことでしょうか。「機械翻訳でなく、自力で翻訳しても」とはどういうことでしょうか。質問文にある「flexと同等：<positive-number> 1 0 flexアイテムをフレキシブルにし、flexの基準をゼロに設定します。」という機械翻訳とあなたが自力で翻訳した文章が同じになるのですか? Ftpsさんの「flex:1それはflex: 1 1 0と同じ意味です。」という(恐らくは機械翻訳ではない)訳文に対してはどのような感想を持っていますか? 私は(おそらくFtpsさんも)「flex:1」の意味が分からなくても「flex: 1 1 0」の意味は調べられるのではないかと思っていたのですが。