CSS3 display:flex 使用指南
2022/3/2 6:17:35
本文主要是介绍CSS3 display:flex 使用指南,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 前言
- 一、display: flex 是什么?
- 二、简单使用
- 1. flex-direction:
- 2.flex-wrap:
- 3.align-content:
- 4.justify-content:
- 5.align-items:
- 总结
前言
简单介绍 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>
这篇关于CSS3 display:flex 使用指南的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南