flex-direction

来源：互联网发布：淘宝宝贝分类编辑：程序博客网时间：2024/05/17 02:18
<!doctype html><html><head>    <style>        #main1         {            width:200px;            height: 300px;            border:1px solid black;            display: flex;            flex-direction:row;        }        #main2         {            width:200px;            height: 300px;            border:1px solid black;            display: flex;            flex-direction:row-reverse;        }        #main3         {            width:200px;            height: 300px;            border:1px solid black;            display: flex;            flex-direction:column;        }        #main4         {            width:200px;            height: 300px;            border:1px solid black;            display: flex;            flex-direction:column-reverse;        }    </style></head><body><h4>This is an example for flex-direction:row(default)</h4><div id="main1">    <div style="background-color:red;">RED</div>    <div style="background-color:lightblue;">BLUE</div>    <div style="background-color:lightgreen;">GREEN</div></div><h4>This is an example for flex-direction:row-reverse</h4><div id="main2">    <div style="background-color:red;">RED</div>    <div style="background-color:lightblue;">BLUE</div>    <div style="background-color:lightgreen;">GREEN</div></div><h4>This is an example for flex-direction:column</h4><div id="main3">    <div style="background-color:red;">RED</div>    <div style="background-color:lightblue;">BLUE</div>    <div style="background-color:lightgreen;">GREEN</div></div><h4>This is an example for flex-direction:column-reverse</h4><div id="main4">    <div style="background-color:red;">RED</div>    <div style="background-color:lightblue;">BLUE</div>    <div style="background-color:lightgreen;">GREEN</div></div></body></html>
row
row-reverse
column
column-reverse
0 0