CSS弹性盒模型——display:flex

最新推荐文章于 2024-06-14 09:42:20 发布

I'm Mr.C

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量351

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44849271/article/details/114803406

版权

CSS 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

弹性盒模型

弹性盒模型也叫flex布局

弹性盒模型是CSS属性

flex使用方式

选择器{
	display:flex;
}

直接上Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            display:flex;
            border: 1px solid black;
        }
        li{
            width: 20%;
            height: 200px;
            list-style: none;
        }
        #one{
            background-color: red;
        }
        #two{
            background-color: aqua;
        }
        #three{
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <li id="one"></li>
        <li id="two"></li>
        <li id="three"></li>
    </div>
</body>
</html>

效果图：
在这里插入图片描述
可以看见，div标签是li标签的父标签，而且div是弹性盒模型，弹性盒模型内的元素自然排列是横排，块级元素在弹性盒模型内也是横排显示

使用flex布局的元素可以使用一些关于弹性盒模型的属性。

flex-direction属性

设置主轴的反向。

row——默认，主轴从左到右

div{
    display:flex;
    flex-direction: row;
}

效果图：
在这里插入图片描述
row-reverse——主轴从右向左布局

div{
	display:flex;
	flex-direction:row-reverse;
}

效果图：
在这里插入图片描述
column——主轴纵向排列

div{
	display:flex;
	flex-direction:column;
}

效果图：
在这里插入图片描述
column-reverse——反向的主轴纵向布局

div{
	display:flex;
	flex-direction:column-reverse;
}

效果图：
在这里插入图片描述

justify-content属性

内容元素根据主轴布局

flex-start——内容位于主轴开始位置

div{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
}

效果图：
在这里插入图片描述
flex-end——内容位于主轴尾部

div{
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
}

效果图:
在这里插入图片描述
center——内容位于主轴中间

div{
	display:flex;
	flex-direction:row;
	justify-content:center;
}

效果图：
在这里插入图片描述

space-between——平均分布，第一个与最后一个内容元素紧贴父元素

div{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

效果图：
在这里插入图片描述
space-around——平均分布，但第一个与最后一个内容元素并非紧贴父元素

div{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
}

效果图：
在这里插入图片描述

align-items属性

内容元素根据副轴布局

flex-start——内容元素位于副轴的开头

div{
	display:flex;
	flex-direction:row;
	align-items:flex-start;
}

效果图: 在这里插入图片描述

flex-end——内容元素位于副轴的尾部

div{
	display:flex;
	flex-direction:row;
	align-items:flex-end;
}

效果图：
在这里插入图片描述
center——内容元素位于副轴的中间

div{
	display:flex;
	flex-direction:row;
	align-items:center;
}

效果图：
在这里插入图片描述

flex-wrap属性

设置内容元素是否多行

nowrap——内容元素即使宽过父元素也是单行

div{
	display:flex;
	flex-direction: row;
	flex-wrap:nowrap;
}

效果图：
在这里插入图片描述
warp——内容元素宽于父元素时，多余的内容元素会在第二行

div{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
}

效果图：
在这里插入图片描述

wrap-reverse——内容元素宽于父元素时，多余的内容元素会在第二行，但是翻转的

div{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap-reverse;
}

效果图：
在这里插入图片描述

弹性盒模型常用的属性就写到这里~

欢迎大家补充~

I'm Mr.C

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS弹性盒模型——display:flex

弹性盒模型弹性盒模型也叫flex布局
复制链接

扫一扫

专栏目录