关于flex布局，我大多数常用的几个点
第一类：让两个块级元素居于一行中
效果图如下
第二类：让两个块级元素居于一行的两边显示
效果图如下
第三类：让一个块级元素水平居中显示
效果图如下
第四类：让一个块级元素竖直居中显示
效果图如下
第五类：让块级元素水平竖直居中显示
效果图如下
第六类：让左边的块级元素不变，右边的块级元素随着视口变化而变化
效果图如下
注意点：如果此处我写的有误，欢迎你指出来，谢谢。
第七类：让子元素等宽大小
效果图如下
关于flex布局之外，我们经常使用的文字居中有：
关于水平居中
效果图如下
关于flex布局，我大多数常用的几个点的更多相关文章
- 2017年总结的前端文章——一劳永逸的搞定 flex 布局
flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...
- 一劳永逸的搞定 FLEX 布局（转）
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...
- 搞定flex布局
这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求,比如实现水平居中可以使用 margin: 0 auto,实现水平垂直同时居中可以如下设置: .dad { position: relative ...
- 一劳永逸的搞定 flex 布局
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...
- flex 布局学习
flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...
- css相关，flex布局全通！
寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中. 记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文 ...
- flex布局常用属性
最近喜欢flex布局,它可以完美的实现响应式布局,下边我总结了它的一些常用属性,喜欢的,也可以练习写一下,很好用~~~ 注意:使用了flex布局,对于子元素的float.clear和vertical- ...
- flex布局－常用布局
在使用flex布局,老是需要去查资料,很多常用的,知道大概,可还是需要去过一遍,这里记录一下几个常用的flex布局 一个div,内容垂直居中 html <div className='topHe ...
- flex布局以及常用属性。
(1)flex布局排列 会消除块状属性,所有与块状相关的属性将失效,比如块状元素会独占一行,如图2,设置flex后会在一行排列
随机推荐
- 为小米(红米)6A解锁_ROOT_安装天下游虚拟定位教程_已亲身验证通过！附图
第一步骤: 把TeamViewer发给客户 第二步骤: 在自己电脑上购买小米账号:http://shop1.91kami.com/UXWHTEY9KN?cid=1200 要求:(购买邮箱注册账号,需要 ...
- Linux下FTP环境部署梳理（vsftpd和proftpd）
在日常运维工作中,常部署到的FTP是vsftpd和proftd.之前写了Linux下FTP虚拟账号环境部署总结,下面简单说下本地用户下的FTP环境部署过程: 简单梳理下FTP主动和被动两种工作模式: ...
- better-scroll的参数和方法
格式:let obj = new BScroll(object,{[option1,],.,.}); 注意,如果在某一个组件内创建了一个BScroll的实例,在组件生命周期结束前要注意调用destro ...
- hdu 3038 给区间和，算出多少是错的
参考博客 How Many Answers Are Wrong Problem Description TT and FF are ... friends. Uh... very very good ...
- 《Linux内核分析》第五周学习笔记
<Linux内核分析>第五周学习笔记 扒开系统调用的三层皮(下) 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.c ...
- 作业二 —— 分布式版本控制系统Git的安装与使用
作业要求源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103 1.安装Git,配置用户名与邮箱. 安装Windows版的Git ...
- Spring IOP 面向切面编程
Spring IOP 面向切面编程 AOP操作术语 Joinpoint(连接点):所谓连接点是指那些被拦截到的点.在spring中,这些点指的是方法,因为spring只支持方法类型的连接点.(类里面 ...
- HDU 2081 手机短号
Problem Description 大家都知道,手机号是一个11位长的数字串,同时,作为学生,还可以申请加入校园网,如果加入成功,你将另外拥有一个短号.假设所有的短号都是是 6+手机号的后5位,比 ...
- add (db.collection.add)添加数据
db.collection('cheshi').add({ data: { cheshi:4, } }).then((res) => { console.log(res) })
- 关于flask 上直接使用py.test测试框架进行测试
这个周末基本上都在研究这玩意儿中度过了,虽然效率不高,英文文档看得晕头转向,但是好歹弄出来了 有个结果测试也通过了现在粗略总结一下有时间补上更多详细的例子. 首先使用py.test测试框架,可以做最简 ...