Skip to content

Instantly share code, notes, and snippets.

@nikhilknoldus

nikhilknoldus/flex_flow_row_column

Created August 1, 2017 10:13
Show Gist options
  • Save nikhilknoldus/5d2d9cc73e613fd6188464940461f442 to your computer and use it in GitHub Desktop.
Save nikhilknoldus/5d2d9cc73e613fd6188464940461f442 to your computer and use it in GitHub Desktop.
Download ZIP
Flex Properties: Flow: row & column examples
Raw
flex_flow_row_column
<!DOCTYPE html>
<html>
<head>
<title>FlexBox: Row and Column</title>
<style>
/*flex containers*/
.fx-flow-row {
display: flex;
flex-direction: row;
height:150px;
background-color:grey;
}
.fx-flow-row-reverse {
display: flex;
flex-direction: row-reverse;
height:150px;
background-color:grey;
}
.fx-flow-column {
display: flex;
flex-direction: column;
height:150px;
background-color:grey;
}
.fx-flow-column-reverse {
display: flex;
flex-direction: column-reverse;
height:150px;
background-color:grey;
}
.child{
width: 50px;
margin:10px;
background-color: orange;
}
</style>
</head>
<body>
<!--
row-reverse - If the writing-mode (direction) is left to right, the flex items will be laid out right to left
column - If the writing system is horizontal, the flex items will be laid out vertically
column-reverse - Same as column, but reversed
-->
<h4>Coming in a row</h4>
<div class="fx-flow-row">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
<h4>Coming in a row reverse</h4>
<div class="fx-flow-row-reverse">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
<h4>Coming in a coloumn</h4>
<div class="fx-flow-column">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
<h4>Coming in a column reverse</h4>
<div class="fx-flow-column-reverse">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment