Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-flow trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha {border:1px solid red; display: flex; min-height:100px; height:auto; margin-bottom:10px; background:#ddd}
.divcha div {border:1px solid blue;width:180px;height:30px}
.divcha p {border:1px solid blue;}
</style>
</head>
<body>

<h1>Code Thuộc tính flex-flow trong CSS</h1>

<div class="divcha" style="flex-flow: row nowrap;">
	<div>row nowrap;(1)</div>
    <div>row nowrap;(2)</div>
    <div>row nowrap;(3)</div>
    <div>row nowrap;(4)</div>
    <div>row nowrap;(5)</div>
    <div>row nowrap;(6)</div>
    <div>row nowrap;(7)</div>
</div>

<div class="divcha" style="flex-flow: row-reverse nowrap;">
	<div>row-reverse nowrap;(1)</div>
    <div>row-reverse nowrap;(2)</div>
    <div>row-reverse nowrap;(3)</div>
    <div>row-reverse nowrap;(4)</div>
    <div>row-reverse nowrap;(5)</div>
    <div>row-reverse nowrap;(6)</div>
    <div>row-reverse nowrap;(7)</div>
</div>

<div class="divcha" style="flex-flow: column nowrap;">
	<div>column nowrap;(1)</div>
    <div>column nowrap;(2)</div>
    <div>column nowrap;(3)</div>
    <div>column nowrap;(4)</div>
    <div>column nowrap;(5)</div>
    <div>column nowrap;(6)</div>
</div>

<div class="divcha" style="flex-flow: column-reverse nowrap;">
	<div>column-reverse nowrap;(1)</div>
    <div>column-reverse nowrap;(2)</div>
    <div>column-reverse nowrap;(3)</div>
    <div>column-reverse nowrap;(4)</div>
    <div>column-reverse nowrap;(5)</div>
    <div>column-reverse nowrap;(6)</div>
</div>

<div class="divcha" style="flex-flow: row-reverse wrap;">
	<div>row-reverse wrap;(1)</div>
    <div>row-reverse wrap;(2)</div>
    <div>row-reverse wrap;(3)</div>
    <div>row-reverse wrap;(4)</div>
    <div>row-reverse wrap;(5)</div>
    <div>row-reverse wrap;(6)</div>
</div>

<div class="divcha" style="flex-flow: column wrap;">
	<div>column wrap;(1)</div>
    <div>column wrap;(2)</div>
    <div>column wrap;(3)</div>
    <div>column wrap;(4)</div>
    <div>column wrap;(5)</div>
    <div>column wrap;(6)</div>
</div>

<div class="divcha" style="flex-flow: column-reverse wrap;">
	<div>column-reverse wrap;(1)</div>
    <div>column-reverse wrap;(2)</div>
    <div>column-reverse wrap;(3)</div>
    <div>column-reverse wrap;(4)</div>
    <div>column-reverse wrap;(5)</div>
    <div>column-reverse wrap;(6)</div>
</div>

<div class="divcha" style="flex-flow: row wrap-reverse;">
	<div>row wrap-reverse;(1)</div>
    <div>row wrap-reverse;(2)</div>
    <div>row wrap-reverse;(3)</div>
    <div>row wrap-reverse;(4)</div>
    <div>row wrap-reverse;(5)</div>
    <div>row wrap-reverse;(6)</div>
</div>

<div class="divcha" style="flex-flow: row-reverse wrap-reverse;">
	<div>row-reverse wrap-reverse;(1)</div>
    <div>row-reverse wrap-reverse;(2)</div>
    <div>row-reverse wrap-reverse;(3)</div>
    <div>row-reverse wrap-reverse;(4)</div>
    <div>row-reverse wrap-reverse;(5)</div>
    <div>row-reverse wrap-reverse;(6)</div>
</div>

<div class="divcha" style="flex-flow: column wrap-reverse;">
	<div>column wrap-reverse;(1)</div>
    <div>column wrap-reverse;(2)</div>
    <div>column wrap-reverse;(3)</div>
    <div>column wrap-reverse;(4)</div>
    <div>column wrap-reverse;(5)</div>
    <div>column wrap-reverse;(6)</div>
</div>

<div class="divcha" style="flex-flow: column-reverse wrap-reverse;">
	<div style="width:250px">column-reverse wrap-reverse;(1)</div>
    <div style="width:250px">column-reverse wrap-reverse;(2)</div>
    <div style="width:250px">column-reverse wrap-reverse;(3)</div>
    <div style="width:250px">column-reverse wrap-reverse;(4)</div>
    <div style="width:250px">column-reverse wrap-reverse;(5)</div>
    <div style="width:250px">column-reverse wrap-reverse;(6)</div>
</div>

</body>
</html>

Code Thuộc tính flex-flow trong CSS nằm trong bài viết Thuộc tính flex-flow trong CSS