フレックスアイテムに対して使用できるプロパティについて【CSSを書いていこう】

フレックスアイテムのalign-self、orderの使い方について

前回は溢れた要素を折り返す方法についてみてきました。

今回はflex itemに対して使用できるプロパティについての学んでいきます。

個々の要素に対して使用することが出来るので今回の場合はboxに対してスタイリングをしていく形になります。

フレックスアイテムを交差軸方向の揃えを指定するプロパティについて学んで行きましょう。

これは横に要素が並んでいる場合は個々の要素を立て移動させることができます。

今回もコンテンツに高さが必要になってくるのでheightと指定しておきます。

値がflex-start（フレックススタート）のとき交差軸の始点、つまり上に揃えられます。

値が flex-end（フレックスエンド）だったら交差軸の終点、つまり下に揃えられます。値がcenter（センター）のときは真ん中になります。

順番を指定するためのプロパティです。フレックスアイテムに使います。

初期値は０なので値を１にすると最後に並び替えられます。値を−１にすると一番前に並べられます。

個別に指定してあげれば、任意の並びにすることができるので並べたい順番で指定してあげても大丈夫です。

例えば一番最後に並んでいるbox3に対してorder: -1;と指定すると優先されるので並び順が3,1,2となります。

以上

この記事が気に入ったら
いいねまたはフォローしてね！

よかったらシェアしてね！