[实用]CSS3 display:flex 使用指南

和泉纱雾丶

已于 2023-05-03 08:28:32 修改

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： html5 css3 前端 css html

于 2022-03-01 23:54:46 首次发布

本文链接：https://blog.csdn.net/qq_29023593/article/details/123219048

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文介绍了CSS display:flex属性的使用，包括flex-direction的方向控制、flex-wrap的换行设置、align-content和justify-content的对齐方式，以及align-items的元素定位。通过实例演示如何在后台页面设计中轻松实现响应式布局。

摘要由CSDN通过智能技术生成

这里是一个喜欢编程的小程序员，KSaMar

📗如果您喜欢此文章，您可以点赞👍 收藏⭐ 一下，这将对我书写有很大的帮助！
📗如果此文章对您有帮助，您可以选择赞助本作作者，让作者有更强的更新文章动力
📗爱发电链接点此访问
📗如果您通过阅读此文章发现了BUG，请及时私信联系我，感谢！
📗原创不易，允许搬运，请标注源地址

前言

简单介绍 CSS 里的 display: flex 的使用

一、display: flex 是什么？

display: flex 对我来说，是一个很好用的前端布局代码(
可以在前端弹性布局UI
配合 Chrome 谷歌浏览器的开发者模式，可以自由实现你所想的页面布局

这是在 Chrome 谷歌浏览器里开发者模式使用 display: flex 的时候
在这里插入图片描述

二、简单使用

1. flex-direction:

这里是选择弹性布局下的元素显示顺序
1、从左到右 2、从上到下 3、从右到左 4、从下到上

2.flex-wrap:

这里是选择弹性布局行的元素开启自动拆行
就是当页面显示此行不是很美观的情况下，开启这个选项，可以美化元素行

3.align-content:

这里是选择弹性布局里的元素的水平对齐模式
1、元素居中 2、元素上居中 3、元素下居中 4、元素环绕上下居中 5、元素上下间隔居中 6、元素上下自动间隔居中

4.justify-content:

这里是选择弹性布局里的元素的垂直对齐模式
1、元素居中 2、元素左居中 3、元素右居中 4、元素环绕左右居中 5、元素左右间隔居中 6、元素左右自动间隔居中

5.align-items:

这里是选择弹性布局里的元素对齐模式
1、水平居中 2、上对齐 3、下对齐 4、从上到下延伸 5、文字对齐

总结

通过 display: flex 可以快速定义一个页面的UI样式
例子：
一个后台页面，用上 display: flex 很简单就实现了
在这里插入图片描述

<!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>Test</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="main">
        <div class="manage-nav bg-primary">
        </div>
        <div class="main-pane">
            <div class="user-nav">
            </div>
            <div class="info-pane">
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</html>

<style>
    *{
    margin:0;
    padding: 0;
    outline: none;
}

html,body,.main{
    width: 100%;
    height: 100%;
}

/* 主页面样式 */
.main{
    display: flex;
}

/* 侧边导航栏样式 */
.manage-nav{
    min-width: 256px;
    max-width: 256px;
    height: 100%;
}

/* 面板样式 */
.main-pane{
    width: 100%;
    height: 100%;
}

/* 用户导航栏样式 */
.user-nav{
    min-width: 100px;
    height: 64px;
    background-color: rgb(248, 248, 248);
}

/* 信息面板样式 */
.info-pane{
    min-width: calc(100% - 256px);
    min-height: calc(100% - 64px);
    background-color: white;
}

</style>