プログラミング

flex-flowでフレックスアイテムの配置方向・折り返しを指定【CSS】

flex-flowプロパティは、フレックスアイテムの配置方向と折り返しをまとめて指定できるショートハンドプロパティです。

{flex-flow: 配置方向 折り返し;}

flex-flowプロパティで指定できる値は、「flex-direction」、「flex-wrap」プロパティと同じで、値は半角スペースで区切って指定します。

値は任意の順番で指定できますが、省略した場合は各プロパティの初期値が指定されます。

次の2つのコードは同じ意味です。

ul {
 flex-direction: row-reverse;
 flex-wrap: wrap-reverse;
}
ul {
 flex-flow: row-reverse wrap-reverse;
}
  • box1
  • box2
  • box3
  • box4
  • box5
  • box6

関連記事
flex-directionでフレックスアイテムの配置方向を指定【CSS】
flex-wrapでフレックスアイテムの折り返しを指定【CSS】

Leave a Comment