flex-direction - CSS: Cascading Style Sheets
the flex-direction css property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
... syntax /* the direction text is laid out in a line */ flex-direction: row; /* like <row>, but reversed */ flex-direction: row-reverse; /* the direction in which lines of text are stacked */ flex-direction: column; /* like <column>, but reversed */ flex-direction: column-reverse; /* global values */ flex-direction: inherit; flex-direction: initial; flex-direction: unset; values the following values are accepted: row the flex container's main-axis is defi...
... accessibility concerns using the flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and dom order.
...class="box" style="background-color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">a</div> <div class="box1" style="background-color:lightblue;">b</div> <div class="box1" style="background-color:yellow;">c</div> </div> css #content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: column-reverse; } .box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row-reverse; } .box1 { width: 50px; height: 50px; } result specifications specification status comment css flexible box layout modulethe definition of 'flex-direction' in that specification.

Basic concepts of flexbox - CSS: Cascading Style Sheets
the main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.
... the main axis the main axis is defined by flex-direction, which has four possible values: row row-reverse column column-reverse should you choose row or row-reverse, your main axis will run along the row in the inline direction.
... the cross axis the cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.
...And 10 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
the cross axis the align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if flex-direction is row and along the row if flex-direction is column.
... changing the main axis so far we have looked at the behaviour when our flex-direction is row, and while working in a language written top to bottom.
... if we change our flex-direction to column, align-items and align-self will align the items to the left and right.
...And 8 more matches

Ordering Flex Items - CSS: Cascading Style Sheets
reverse the display of the items the flex-direction property can take one of four values: row column row-reverse column-reverse the first two values ​​keep the items in the same order that they appear in the document source order and display them sequentially from the start line.
...the specification continues with a warning not to use reordering to fix issues in your source: “authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.” note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers.
...if you change the order using flex-direction you can see how the tab order continues to follow the order that the items are listed in the source.
...And 4 more matches

Flexbox - Learn web development
flexbox provides a property called flex-direction that specifies what direction the main axis runs in (what direction the flexbox children are laid out in) — by default this is set to row, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an english browser).
... try adding the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we added any css.
...first of all, try changing your flex-direction property value to row-reverse — now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.
...And 2 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
@media (min-width: 700px) { .wrapper { grid-template-columns: 1fr 4fr 1fr; grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer" } nav ul { flex-direction: column; } } the three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track size.
... @media (min-width: 700px) { .main-nav { grid-column: col-start / span 2; grid-row: 2 / 4; } .content { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .side { grid-column: col-start 11 / span 2; grid-row: 2; } .ad { grid-column: col-start 11 / span 2; grid-row: 3; } .main-footer { grid-column: col-start / span 12; } nav ul { flex-direction: column; } } once again the grid inspector is useful to help us see how our layout has taken shape.
...i set the list item to display: flex and the flex-direction to column.
...And 2 more matches

Box alignment in Flexbox - CSS: Cascading Style Sheets
the axes and flex-direction flexbox respects the writing mode of the document, therefore if you are working in english and set justify-content to flex-end this will align the items to the end of the flex container.
... if you are working with flex-direction set to row, this alignment will be in the inline direction.
... however, in flexbox you can change the main axis by setting flex-direction to column.
...therefore it is easiest to think about the main and cross axis when working in flexbox like so: the main axis = direction set by flex-direction = alignment via justify-content the cross axis = runs across the main axis = alignment via align-content, align-self/align-items main axis alignment justify-content cross axis alignment align-self align-items align-content there is no justify-self in flexbox on the main axis, flexbox deals with our content as a group.

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } //using this mixin %flexbox { @include flexbox; } @mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } %inline-flex { @include inline-flex; } flexbox direction the flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis.
... values: row (default) | row-reverse | column | column-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-direction-property @mixin flex-direction($value: row) { @if $value == row-reverse { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-direction: reverse; -moz-box-orient: horizontal; } @else if $value == column { -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-box-direction: normal; -moz-box-orient: vertical; } @else if $value == column-reverse { -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-direction: reverse; -moz-box-orient: vertical; } @else { -webkit-box-direction: normal; -webkit-box-ori...
...ent: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; } -webkit-flex-direction: $value; -ms-flex-direction: $value; flex-direction: $value; } // shorter version: @mixin flex-dir($args...) { @include flex-direction($args...); } flexbox wrap the flex-wrap property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.
... -webkit-flex-wrap: $value; @if $value == nowrap { -ms-flex-wrap: none; } @else { -ms-flex-wrap: $value; } flex-wrap: $value; } flexbox flow (shorthand) the flex-flow property is shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes.

Index - MDN Web Docs Glossary: Definitions of Web-related terms
94 cross axis css, glossary, cross axis, flexbox the cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns.
... 260 main axis css, glossary, main axis, flexbox the main axis in flexbox is defined by the direction set by the flex-direction property.
... there are four possible values for flex-direction.

Main Axis - MDN Web Docs Glossary: Definitions of Web-related terms
the main axis in flexbox is defined by the direction set by the flex-direction property.
... there are four possible values for flex-direction.
... learn more property reference flex-basis flex-direction flex-grow flex-shrink justify-content flex further reading css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex container css flexbox guide: controlling ratios of flex items along the main axis ...

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
for example, if i have a 500 pixel-wide container, flex-direction is row, and i have three flex items each 100 pixels wide, then i have 200 pixels of positive free space, which could be distributed between the items if i wanted them to fill the container.
... in the following examples i am working with flex-direction set to row, therefore the size of items will always come from their width.
...you could equally try out each example with flex-direction: column.

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
there is however the ability to wrap flex items onto new lines, creating new rows if flex-direction is row and new columns if flex-direction is column.
... wrapping and flex-direction wrapping works as you might expect when combined with flex-direction.
... if flex-direction is set to row-reverse then the items will start from the end edge of the container and lay themselves out in reverse ordered lines.

flex-flow - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: flex-direction flex-wrap syntax /* flex-flow: <'flex-direction'> */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* flex-flow: <'flex-wrap'> */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* flex-flow: <'flex-direction'> and <'flex-wrap'> */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; /* global values */ ...
...flex-flow: inherit; flex-flow: initial; flex-flow: unset; values see flex-direction and flex-wrap for details on the values.
... formal definition initial valueas each of the properties of the shorthand:flex-direction: rowflex-wrap: nowrapapplies toflex containersinheritednocomputed valueas each of the properties of the shorthand:flex-direction: as specifiedflex-wrap: as specifiedanimation typediscrete formal syntax <'flex-direction'> | <'flex-wrap'> examples setting column-reverse and wrap element { /* main-axis is the block direction with reversed main-start and main-end.

Cross Axis - MDN Web Docs Glossary: Definitions of Web-related terms
the cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns.
... learn more property reference align-content align-items align-self flex-wrap flex-direction flex further reading css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex container css flexbox guide: mastering wrapping of flex items ...

CSS Box Alignment - CSS: Cascading Style Sheets
when aligning items on the inline axis you will use the properties which begin with justify-: justify-items justify-self justify-content when aligning items on the block axis you will use the properties that begin align-: align-items align-self align-content flexbox adds an additional complication in that the above is true when flex-direction is set to row.
...working in a horizontal top to bottom writing mode such as english, with flex-direction as row the items start on the far left and any available space after displaying the items is placed after the items.