2017-03-23 7 views
0

私はこのウェブサイトhttp://flexboxfroggy.com/のFlexboxレイアウトでトレーニングしています。私は順序プロパティを理解していない事があります:フレックスボックスレイアウトのプロパティを注文

は、私はその後、私は順番に適用すでにこの

enter image description here

を持って想像:1;黄色のカエルへのプロパティ。

enter image description here

なぜこれら二つの小さな一緒に右に行くの?私はその行動を期待していないでしょう。私は彼らが右に1歩前進したと思ったが、そうではなかった?

誰かが私に説明できますか?

+1

ここに画像やオフサイトのリンクだけでなく、あなたのコードの例を追加してください、スニペットに、ここで同じコードを配置するのは簡単になります – DaniP

答えて

2

orderプロパティの初期値は、すべてのフレックスアイテムに対して0です。

order: 1をアイテムに適用すると、他のアイテムより先に移動します。


画像のコードから明らかなように、2つの黄色カエルはもともとは、一番上の行の空の緑色の円に位置していました。それは彼らの最初の場所だった。その後、align-self: flex-endはそれらをコンテナの底に移動しました。

align-self: flex-endを1秒間忘れた場合、order: 1は、これらのカエルを一番上の行の最後に移動します。今すぐalign-self: flex-endを戻してください。ここで

orderプロパティの詳細な説明です:https://stackoverflow.com/a/36118012/3597276

関連する問題