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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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

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


效果图如下

关于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. OpenDaylight（Oxygen）安装feature出现错误的解决方案

    在使用OpenDaylight控制器时,初次进入karaf命令行下都需要先进行feature的安装 在使用Nitrogen版本(0.7.x)时,组件的安装可以类似 feature:install od ...

  2. NodeMCU学习(二) : 如何使用NodeMCU进行开发

    NodeMCU的GPIO口 Arduino的引脚号与NodeMCU的GPIO口直接对应,NodeMCU的GPIO函数pinMode,  digitalWrite, DigitalRead也是和Ardu ...

  3. Linux运维笔记-日常操作命令总结（2）

    回想起来,从事linux运维工作已近5年之久了,日常工作中会用到很多常规命令,之前简单罗列了一些命令:http://www.cnblogs.com/kevingrace/p/5985486.html今 ...

  4. linux及安全第八周总结

    进程的调度时机与进程的切换 操作系统原理中介绍了大量进程调度算法,这些算法从实现的角度看仅仅是从运行队列中选择一个新进程,选择的过程中运用了不同的策略而已. 对于理解操作系统的工作机制,反而是进程的调 ...

  5. shell脚本--shift参数左移

    参数左移什么意思呢?这个参数指的是在运行脚本时,跟在脚本名后面的参数,前面已经讲过,可以使用$#来获取参数的个数,使用$*来获取所有的参数,而参数左移的含义是这样的:有个指针指向参数列表第一个参数,左 ...

  6. jQuery empty() vs remove()

    https://stackoverflow.com/questions/3090662/jquery-empty-vs-remove http://www.cnblogs.com/yeer/archi ...

  7. Enterprise Integration Patterns

    https://camel.apache.org/enterprise-integration-patterns.html 企业集成模式,各种模式算法,挺棒的. https://camel.apach ...

  8. [cnbeta]华为值多少钱，全世界非上市公司中估值最高的巨头

    华为值多少钱,全世界非上市公司中估值最高的巨头 https://www.cnbeta.com/articles/tech/808203.htm   小米.美团都曾表达过不想.不急于上市,但没人信,所以 ...

  9. [转帖]linux 内存管理——内核的shmall 和shmmax 参数

    (转)linux 内存管理——内核的shmall 和shmmax 参数   内核的 shmall 和 shmmax 参数 SHMMAX= 配置了最大的内存segment的大小 ------>这个 ...

  10. Pyhton语句

    一.if条件语句 1.python 并不支持 switch 语句 num = 5 if num == 3: # 判断num的值 print 'boss' elif num == 2: print 'u ...