css弹性盒模型详解----flex-direction

最新推荐文章于 2024-02-28 14:48:26 发布

旧城空巷旧心

最新推荐文章于 2024-02-28 14:48:26 发布

阅读量859

点赞数

分类专栏： css 文章标签：弹性盒模型 flex-direction

本文链接：https://blog.csdn.net/qq_34451947/article/details/103047793

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本篇文章详细介绍flex-direction

	flex-direction 是控制盒模型容器下一级子元素的排列方式的属性 一共有四种
		row（默认值）：主轴为水平方向，起点在左端。
		row-reverse：主轴为水平方向，起点在右端。
		column：主轴为垂直方向，起点在上沿。
		column-reverse：主轴为垂直方向，起点在下沿。

//第一种属性  flex-direction:row  该属性默认存在即创建了盒模型就会是默认这一条  行排列 靠左
<style>
    .flex-box{
         display: flex;
     }
    
     .box1{
         width: 100px;
         height: 100px;
         background-color: red;
     }.box2{
         width: 100px;
         height: 100px;
         background-color: purple;
     }
 </style>
<div class="flex-box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
效果演示如下： //在演示中可以看出来两个盒子box1和box2 没有浮动 没有定位也没有改变作用域 就在一行显示

flex-direction:row

//第二种属性 flex-direction: row-reverse;：主轴为水平方向，起点在右端。  该 行排列 靠右
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            display: flex;
            flex-direction: row-reverse;
        }
       
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }.box2{
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

效果演示如下：

flex-direction: row-reverse;

//第三种属性 flex-direction: column：主轴为垂直方向，起点在左端。   列排序 由上向下正常排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            display: flex;
            flex-direction: column;
        }
       
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
    </div>
</body>
</html>

效果演示如下：

在这里插入图片描述

//第四种属性 flex-direction: column-reverse：主轴为垂直方向，起点在左端。    列排序 由下向上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            display: flex;
            flex-direction:column-reverse;
        }
       
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 10px;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
    </div>
</body>
</html>

效果演示如下：

在这里插入图片描述

旧城空巷旧心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css弹性盒模型详解----flex-direction

本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性一共有四种 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。//第一种属性 flex-direct...
复制链接

扫一扫