CSS3 display:flex 使用指南

2024-02-24 16:49:10

文章目录

前言
一、display: flex 是什么？
二、简单使用
总结

前言

简单介绍 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>

码农公寓