cssの記述方法による違いはありますか？

Question

以下の2通りののCSSの記述方式を試したところ、結果が異なったため質問いたします。
なぜ結果が変わるのですか？
もちろんセレクタは同一です。

flex-flow: column wrap;

flex-wrap: wrap;
flex-flow: column;

Comments

[m.ts10806]

どう異なったのでしょうか。
これだけでは再現確認ができません。
想像による補完部分が多ければ多いほど問題の本質から離れます。
コピペでご自身が起きた問題を再現できるコードをご提示ください。

[actlikeJohnnys]

この現象が起きているサイトのURLです
https://flowr.is/

このサイトでデベロッパーツールを開き、.flowerの.container箇所でstyleを見ると、この現象を確認することができます。

※以下に手書きでHTMLと、デベロッパーツールstyleの様子を添付させていただきますが、直接サイトをご覧になっていただいた方が明快かと思われます。

こちらが該当HTMLです。

<section class="flower">
<div class="container">
<div class="item title">
<h2>どんなお花が届くの？</h2>
</div>
<div class="item img"></div>
<div class="item body">
<h3>かわいいお花だけ</h3>
<p>色やサイズなど、かわいくおしゃれに飾れるお花にこだわってセレクト。季節やトレンドに合わせてブーケを作っています。</p>
<h3>元気な状態で</h3>
<p>お花は注文を受けてから市場で直接仕入れているから新鮮。お花の元気を保つ専用BOXでお届けします。</p>
<h3>そのまま飾れる</h3>
<p>あらかじめ飾るのに最適な長さに茎をカットしてお届け。箱から出して、そのまま花器に入れるだけでOKです。</p>
</div>
</div>
</section>

以下がデベロッパーツールに表示されているstyleです。
@media screen and (min-width: 767px)
.pages_controller.home_action section.flower .container {
flex-flow: column wrap;
}
そして以下がメディアクエリ適用前のstyleです。
.pages_controller.home_action section.flower .container {
height: 730px;
display: flex;
flex-wrap: wrap;
flex-flow: column;

メディアクエリ適用の画面幅にしたとき、デベロッパーツールにてメディアクエリ適用前のcontainerのflex-wrapとflex-flowに打ち消し線が引かれていて、試しにそちらの打ち消し線を消してみたところ、プロパティと値は同じなはずなのにバラバラな配置になってしまいます。なぜなのでしょう。

Answer 1

flex-flow: column wrap;

は、flex-direction と flex-wrap をまとめて設定するショートハンドプロパティですので下記と同じ意味になります。

  flex-direction: column;
  flex-wrap: wrap;

省略した場合は初期値になりますので(nowrap)、

  flex-wrap: wrap;
  flex-flow: column;

は下記と同じ意味になります。

  flex-wrap: wrap;
  flex-direction: column;
  flex-wrap: nowrap;

CSSは後に記述した設定が優先されますので、nowrap が適用されます。
例えば、下記のように記述すれば、wrapが適用されます。

  flex-flow: column;
  flex-wrap: wrap;

ショートハンドプロパティと通常のプロパティの併用は紛らわしいのでさける方がいいでしょう。

Comments

[maisumakun]

> ショートハンドプロパティと通常のプロパティの併用は紛らわしいのでさける方がいいでしょう。

「左側だけ別の値のマージンを指定したい」ときに、「margin: x x x y;」と同じ値3つになるのも煩雑なので、「margin: x; margin-left: y;」としてしまうことがあります。

[hatena19]

それは私もするかも。場合によりけりですかね。

今回の質問の場合は、併用するメリットはほとんどないと思います。

[actlikeJohnnys]

そうですよね。ただ、オリジナルのサイトのCSSが
そのような記述のされ方をしていたので、それが適切なのかなと思って
いました。
実際のサイトのHTMLやCSSの記述のされ方が適切だとは限らないのでしょうか？

[hatena19]

人間のすることですので、間違いや勘違いはありますよね。