A Complete Guide to Flexbox<\/a> on css-trick.com.<\/p>\n\n\n\nSome flexbox properties can be added to parent items (flex containers<\/strong>) while others are to be used on children (flex items<\/strong>).<\/p>\n\n\n\nThe Flex Container<\/h3>\n\n\n\nmain axis<\/strong> – The primary axis along which flex items are placed. Direction may not always be horizontal, depending on the flex-direction<\/code>property.<\/li>main-start | main-end<\/strong> – Flex items appear within the container starting from main-start and going to main-end.<\/li>main size<\/strong> – A flex item’s width or height, whichever is in the main dimension.<\/li>cross axis<\/strong> – The axis perpendicular to the main axis. Its direction depends on the main axis direction.<\/li>cross-start | cross-end<\/strong> – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.<\/li>cross size<\/strong> – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size property.<\/li><\/ul>\n\n\n\nProperties for Flex Containers<\/h3>\n\n\n\n display<\/strong> – defines a container as being flex, inline or block (default). All direct children will have flex context.<\/p>\n\n\n\n.container {\n<\/span> display<\/span>:<\/span> flex;<\/span> \/* or inline-flex *\/\n<\/span>}<\/code><\/pre>\n\n\n\nflex-direction<\/strong> – establishes the main-axis, defining the direction flex items appear in the flex container, either in horizontal rows or vertical columns.<\/p>\n\n\n\n.container {\n flex-direction: row | row-reverse | column | column-reverse;\n}<\/code><\/pre>\n\n\n\nrow<\/code> (default): left to right in ltr<\/code>; right to left in rtl<\/code><\/li>row-reverse<\/code>: right to left in ltr<\/code>; left to right in rtl<\/code><\/li>column<\/code>: same as row<\/code> but top to bottom<\/li>column-reverse<\/code>: same as row-reverse<\/code> but bottom to top<\/li><\/ul>\n\n\n\nflex-wrap<\/strong> – default behavior is for all items to try to fit in one line. This can be overridden by the flex-wrap property:<\/p>\n\n\n\n.container {\n flex-wrap<\/span>:<\/span> nowrap | wrap | wrap-reverse;<\/span>\n}<\/code><\/pre>\n\n\n\nnowrap<\/code> – (default behavior): all flex items will be on one line<\/li>wrap<\/code> – flex items will wrap onto multiple lines, from top to bottom.<\/li>wrap-reverse<\/code> – flex items will wrap onto multiple lines from bottom to top.<\/li><\/ul>\n\n\n\nflex-flow<\/p>\n\n\n\n
justify-content<\/p>\n\n\n\n
align-items<\/p>\n\n\n\n
align-content<\/p>\n\n\n\n
Properties of Flex Items<\/p>\n\n\n\n
order<\/li> flex-grow<\/li> flex-shrink<\/li> flex-basis<\/li> flex<\/li> align-self<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"Flex Basics Flexbox (Flexible Box) is a direction-agnostic layout model which makes it more efficient to arrange and align items within a container. Unlike the direction-specific display of block (vertical) […]<\/p>\n","protected":false},"author":295,"featured_media":0,"parent":358,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"class_list":["post-1715","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/1715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/users\/295"}],"replies":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/comments?post=1715"}],"version-history":[{"count":8,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/1715\/revisions"}],"predecessor-version":[{"id":3107,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/1715\/revisions\/3107"}],"up":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/358"}],"wp:attachment":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/media?parent=1715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2019\/02\/flex-directions.png\")
<\/figure>\n\n\n\n