关于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后会在一行排列
随机推荐
- CF367C. Hard problem
链接[http://codeforces.com/group/1EzrFFyOc0/contest/706/problem/C] 题意: 他希望它们按词典顺序排序(就像字典中那样),但他不允许交换其中 ...
- Echarts学习求教
有没有人用过百度的Echarts?刚开始接触,下面这段代码怎么理解啊,新手求指教: myChart.showLoading();$.get('data/asset/data/les-miserable ...
- BugPhobia开发终结篇章：Beta阶段第XI次Scrum Meeting
0x01 :Scrum Meeting基本摘要 Beta阶段第十一次Scrum Meeting 敏捷开发起始时间 2015/01/06 00:00 A.M. 敏捷开发终止时间 2016/01/10 0 ...
- github链接
github链接:https://github.com/bjing123 test1:https://github.com/bjing123/test-/blob/master/test1.t ...
- java — 静态绑定和动态绑定
绑定:一个方法的调用与方法所在的类关联起来.java中的绑定分为静态绑定和动态绑定,又被称作前期绑定和后期绑定. 静态绑定:(final.static.private)在程序执行前已经被绑定,也就是说 ...
- git 的安装及使用
一.Git的安装和使用 1.1 Linux下版本库的创建 1.1.1 创建一个版本库 repository,在一个合适的地方创建一个空目录: root@zengyue:/# mkdir -p /hom ...
- css3-弹性盒模型
first <style> .box{width:1024px;height:100px; border:5px solid black; padding:10px; display:-w ...
- shell脚本--内容查找之grep命令
grep命令可以检索文件中包含关键字(可以使用正则)的行,默认区分大小写. ubuntu@ubuntu:~/test$ cat test.txt this is linux this is Linux ...
- poj 2762(强连通分量+拓扑排序)
题目链接:http://poj.org/problem?id=2762 题意:给出一个有向图,判断任意的两个顶点(u,v)能否从u到达v,或v到达u,即单连通,输出Yes或No. 分析:对于同一个强连 ...
- loadrunner测试结果三
结果摘要: 场景执行情况: 该部分给出了本次测试场景的名称.结果存放路径 及 场景的持续时间 统计信息摘要 statistic summary 该部分给出了场景执行结束后并发数.总吞吐量.平均每秒吞吐 ...