弹性盒子 flex-direction

　　使用弹性盒子可以更方便的对页面内容进行布局

　　flex-direction指定了子元素在父元素盒子中的排列方式

　　1.flex-direction:row

　　　　flex默认排列方式，从左到右排列，左对齐

　　2.flex-direction：row-reverse

　　　　与row反向，从右向左排列，右对齐，第一个在最右边

　　3.flex-direction：column

　　　　从上到下依次排列，向上对齐

　　4.flex-direction：column-reverse

　　　　与column相反，从下到上对齐，第一个在最下面

 

　　说明：HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <link rel="stylesheet" href="flex.css">
</head>
<body>
    <div id="content">
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
    </div>
</body>
</html>

　　　　row：

#content
{
    width: 500px;
    height: 500px;
    background: #0395e1;
    display: flex;
    flex-direction: row;
}
#content>div
{
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #e53935;
}

　　　　样式：

　　　　

　　　　row-reverse：

　　　　

#content
{
    width: 500px;
    height: 500px;
    background: #0395e1;
    display: flex;
    flex-direction: row-reverse;
}
#content>div
{
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #e53935;
}

　　　　样式：

　　　　

　　　　column：

　　　　

#content
{
    width: 500px;
    height: 500px;
    background: #0395e1;
    display: flex;
    flex-direction:column;
}
#content>div
{
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #e53935;
}

　　　　样式：

　　　　

　　　　column-reverse：

　　　　

#content
{
    width: 500px;
    height: 500px;
    background: #0395e1;
    display: flex;
    flex-direction:column-reverse;
}
#content>div
{
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #e53935;
}

　　　　样式：

　　　　

posted @ 2019-05-30 13:09  一颗糊涂淡  阅读(2887)  评论(0)  编辑  收藏  举报