第一类：让两个块级元素居于一行中


效果图如下

第二类：让两个块级元素居于一行的两边显示


效果图如下

第三类：让一个块级元素水平居中显示


效果图如下

第四类：让一个块级元素竖直居中显示


效果图如下

第五类：让块级元素水平竖直居中显示


效果图如下

第六类：让左边的块级元素不变，右边的块级元素随着视口变化而变化


效果图如下

注意点：如果此处我写的有误，欢迎你指出来，谢谢。

第七类：让子元素等宽大小


效果图如下

关于flex布局之外，我们经常使用的文字居中有：


关于水平居中


效果图如下

关于flex布局，我大多数常用的几个点的更多相关文章

  1. 2017年总结的前端文章——一劳永逸的搞定 flex 布局

    flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...

  2. 一劳永逸的搞定 FLEX 布局（转）

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  3. 搞定flex布局

    这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求,比如实现水平居中可以使用 margin: 0 auto,实现水平垂直同时居中可以如下设置: .dad { position: relative ...

  4. 一劳永逸的搞定 flex 布局

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  5. flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...

  6. css相关，flex布局全通！

    寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中. 记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文 ...

  7. flex布局常用属性

    最近喜欢flex布局,它可以完美的实现响应式布局,下边我总结了它的一些常用属性,喜欢的,也可以练习写一下,很好用~~~ 注意:使用了flex布局,对于子元素的float.clear和vertical- ...

  8. flex布局－常用布局

    在使用flex布局,老是需要去查资料,很多常用的,知道大概,可还是需要去过一遍,这里记录一下几个常用的flex布局 一个div,内容垂直居中 html <div className='topHe ...

  9. flex布局以及常用属性。

    (1)flex布局排列 会消除块状属性,所有与块状相关的属性将失效,比如块状元素会独占一行,如图2,设置flex后会在一行排列

随机推荐

  1. 自从硬派网倒闭后,就没有什么好看的IT硬件网站了

    RT

  2. MFS+Keepalived双机高可用热备方案操作记录

    基于MFS的单点及手动备份的缺陷,考虑将其与Keepalived相结合以提高可用性.在Centos下MooseFS(MFS)分布式存储共享环境部署记录这篇文档部署环境的基础上,只需要做如下改动: 1) ...

  3. 《Linux及安全》课程实践二

    编译生成新内核 一.实践原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率很高,但可扩展 ...

  4. <构建之法>10,11,12章的读后感

    第十章:典型用户和场景 问题 :什么是典型用户? 第十一章:软件设计与实现 问题 :开发人员的标准工作流程就是不断的发现BUg,修改bug来完善功能,在此过程中要等待同伴复审,在这阶段中,开发者应该如 ...

  5. Python学习笔记（一）——初学Python

    1.Python环境配置 本人配置Python2.7及Python3.6版本 将Python3.6环境配置在线,因此默认为Python3.6版本 Python2.7及Python3.6共存 2.简单操 ...

  6. 13.14.15.16.17&《一个程序猿的生命周期》读后感

    13.TDS 的标准是什么,怎么样才能认为他是一个标准的TDS?? 14.软件的质量包括哪些方面,如何权衡软件的质量? 15.如何解决功能与时间的矛盾,优秀的软件团队会发布有已知缺陷的软件么? 16. ...

  7. Knowledge-Defined Networking

    知识定义的网络(Knowledge-Defined Networking) 来源:ACM SIGCOMM Computer Communication Review 年份:2017 是什么:容纳和利用 ...

  8. [buaa-SE-2017]个人项目

    个人项目 Part1:github https://github.com/Aria-K-Alethia/Sudoku Part2:解题思路描述 关于数独的解法 我选择的是暴力搜索算法. (1)关于 - ...

  9. nodefs模块的使用demo

    为什么要使用递归?因为stat本身就是一个异步的函数所有存在异步问题不能够进行循环遍历. 在使用该种方法时候需要注意的一点是必须要在箭头标记处进行数据数组的存取.否则会由于异步问题导致输出空或者其他问 ...

  10. 临时关闭Mysql ONLY_FULL_GROUP_BY

    /** * @author lcc807@ikoo8.com * * 临时关闭Mysql ONLY_FULL_GROUP_BY */ function closeSqlFullMode(){ DB:: ...