View source for CSS flex-box layout

{{short description|CSS3 web layout mode}}
'''CSS flex-box layout''' is a CSS3 web layout model. It is in the W3C's candidate recommendation (CR) stage.<ref>{{Cite web|url=https://www.w3.org/TR/css-flexbox-1/|title=CSS Flexible Box Layout Module Level 1|website=www.w3.org|access-date=2016-07-23}}</ref> The flex layout allows [[Responsive web design|responsive]] elements within a container to be automatically arranged  depending upon screen size (or device).
{{CSS}}

==Concepts==
One of the most defining features of the flex layout is its ability to form-fit, based on its viewing environment. Flex boxes can adjust in size—either decreasing, to avoid unnecessarily monopolizing space, or increasing to make room for contents to be constrained within its boundaries. Moreover, the flex layout is less restrictive in terms of content flow than those, for example, of the block and inline display types, which are generally uni-directional. Indeed, not only can flex directional flow be specified, at the style level, as rightwards, leftwards, upwards, or downwards; individual items within a flex container may also be automatically reordered and rearranged to suit the available layout space.<ref>{{Cite web|url=http://dev.w3.org/csswg/css-flexbox/|title=CSS Flexible Box Layout Module Level 1|website=dev.w3.org|access-date=2016-07-23}}</ref>

== History ==

In the 2000s the intensive Internet access by mobile agents motivated "liquid layouts" and [[Responsive web design#History|responsive elements]] for the growing variety of screen sizes.  
In the 2010s, the intensive use of popular JavaScript layout frameworks, such as [[Software:Bootstrap (front-end framework)|Bootstrap]], inspired CSS flex-box and grid layout  specifications.<ref>https://github.com/kvdmolen/grid-flexbox-sass</ref><ref>https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/</ref>

==Terminology==
Following are a few terms associated with the flex layout model

===Flex container===
:Parent element that holds all flex items. Using the CSS display property, the container can be defined as either flex or inline-flex.

===Flex item===
:Any child element held within the flex container is considered a flex item. Any text within the container element is wrapped in an unknown flex item.

===Axes===
:Each flex box contains two axes: the main and cross axes. The '''main axis''' is the axis on which the items align with each other. The '''cross axis''' is perpendicular to the main axis.
'''Flex-direction'''
:Establishes main axis. Possible arguments: row (default), row-reverse, column, column-reverse.
'''Justify-content'''
:Determines how content gets placed on the main axis on the current line. Optional arguments: left, right, center, space-between, space-around.
'''Align-items'''
:Determines the default for how flex items get placed on the cross axis on each line.

'''Align-content'''
:Determines the default for how cross axis lines are aligned.

'''Align-self'''
:Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.

===Directions===
:The '''main-start/main-end''' sides determine where to start placing flex items within the flex container, starting from the main-start end and going to the main-end end. The '''cross-start/cross-end''' sides determine where flex lines get filled with flex items from cross-start to cross-end.
'''Order'''
:Places elements in groups and determines which order they are to be placed in within the container.
'''Flex-flow'''
:Shorthands flex-direction and flex-wrap to place the flex content.

===Lines===
:Flex items can either be placed on a singular line or on multiple lines as defined by the flex-wrap property, which controls both the direction of the cross axis and how lines stack within the container.

===Dimensions===
:'''Main size''' and '''cross size''' are essentially the height and width of the flex container, each dealing with the main and cross axes respectively.

==Designate a flex box==
Designating an element as a flex element is relatively easy. All that is necessary is to set the display property to either flex or inline-flex as follows:
:<pre>display: flex;</pre>

Or:
:<pre>display: inline-flex;</pre>
By setting the display to one of the two values above, an element becomes a flex container and its children flex items. Setting the display to flex makes the container a [[HTML element#Block elements|block-level element]], while setting the display to inline-flex makes the container an [[HTML element#Inline elements|inline-level element]].<ref>[https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes Using CSS flexible boxes – Web developer guide | MDN<!-- Bot generated title -->]</ref>

== Align to center ==
One of flexbox's advantages is the ability to easily align items within the container to the center of a page, both vertically and horizontally.<source lang="css">
display: flex;
align-items: center;
justify-content: center;
</source>

== Align Specific Child Elements Differently from its Siblings ==
Using "margin-left" and "margin-right", specific child elements within a flex container can be aligned differently on the main axis compared to its siblings that are aligned using the "justify-content" setting<ref>{{Cite web|url=http://www.javascriptkit.com/dhtmltutors/css-flexbox.shtml|title=CSS Flexbox 101- Introduction and sample patterns|last=Chiang|first=George|date=|website=|archive-url=|archive-date=|dead-url=|access-date=}}</ref>.

In the following example, all of the flex children are aligned to the start of the flex container, except the last child, which is right aligned, using "margin-left:auto":
 <style>
 
 ul{
   list-style: none;
   padding: 10px;
   margin: 0;
   background: black;
   display: flex;
   justify-content: flex-start;
 }
 
 li{
   display: inline;
   background: white;
   text-align: center;
   font-weight: bold;
   font-size: 2em;
   width: 70px;
   height: 70px;
 }
 
 #three{
   margin-left: auto; /* right align this child and those that follow in the source */
 }
 
 
 </style>
 
 <nowiki><ul></nowiki>
 <nowiki><li id="one">1</li></nowiki>
 <nowiki><li id="two">2</li></nowiki>
 <nowiki><li id="three">3</li></nowiki>
 <nowiki></ul></nowiki>
The following variation aligns all the flex children to the end of the flex container, except the last one, which is left aligned thanks to "margin-right:auto":
 ul{
   list-style: none;
   padding: 10px;
   margin: 0;
   background: green;
   display: flex;
   justify-content: flex-end;
 }
 
 li{
   display: inline;
   background: white;
   text-align: center;
   font-weight: bold;
   font-size: 2em;
   width: 70px;
   margin-right: 2px;
   height: 70px;
 }
 
 #one{
   margin-right: auto; /* left align this child and those that proceed it in the source */
 }

==References==
<references />
<!--- After listing your sources please cite them using inline citations and place them after the information they cite. Please see http://en.wikipedia.org/wiki/Wikipedia:REFB for instructions on how to add citations. --->

[[Category:Cascading Style Sheets| ]]
[[Category:Web design]]
[[Category:World Wide Web Consortium standards]]

{{Sourceattribution|CSS flex-box layout|1}}