{"id":21097,"date":"2013-04-17T10:15:13","date_gmt":"2013-04-17T17:15:13","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21097"},"modified":"2022-09-30T11:52:36","modified_gmt":"2022-09-30T18:52:36","slug":"flex-wrap","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-wrap\/","title":{"rendered":"flex-wrap"},"content":{"rendered":"\n

The flex-wrap<\/code> property is a sub-property of the Flexible Box Layout Module<\/a>. It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in, aiding responsiveness layout behavior<\/a> without CSS media queries.<\/p>\n\n\n\n

.flex-container {\n  flex-wrap: wrap;\n}<\/code><\/pre>\n\n\n\n
Reminder: The cross axis is the axis perpendicular to the main axis. Its direction depends on the main axis direction.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
flex-wrap: nowrap | wrap | wrap-reverse<\/code><\/pre>\n\n\n\n
  • Initial value:<\/strong> nowrap<\/code><\/li>
  • Applies to:<\/strong> flex containers<\/li>
  • Inherited:<\/strong> no<\/li>
  • Computed value:<\/strong> as specified<\/li>
  • Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n
    Values<\/h3>\n\n\n
    flex-wrap: nowrap; \/* Default value *\/\nflex-wrap: wrap;\nflex-wrap: wrap-reverse;\n\n\/* Global values *\/\nflex-wrap: inherit;\nflex-wrap: initial;\nflex-wrap: revert;\nflex-wrap: revert-layer;\nflex-wrap: unset;<\/code><\/pre>\n\n\n\n
    • nowrap<\/code> (default):<\/strong> single-line which may cause the container to overflow<\/li>
    • wrap<\/code>: <\/strong>multi-lines, direction is defined by flex-direction<\/code><\/li>
    • wrap-reverse<\/code>:<\/strong> multi-lines, opposite to direction defined by flex-direction<\/code><\/li><\/ul>\n\n\n
      Demo<\/h3>\n\n\n
      In the following demo:<\/p>\n\n\n\n
      • The red list is set to nowrap<\/code><\/li>
      • The yellow list is set to wrap<\/code><\/li>
      • The blue list is set to wrap-reverse<\/code><\/li><\/ul>\n\n\n\n