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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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

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


效果图如下

关于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. SpringBoot笔记--FastJson

    FastJson配置 ObjectId class ObjectIdSerializer : ObjectSerializer { override fun write(serializer: JSO ...

  2. LInux系统木马植入排查分析 及 应用漏洞修复配置(隐藏bannner版本等)

    在日常繁琐的运维工作中,对linux服务器进行安全检查是一个非常重要的环节.今天,分享一下如何检查linux系统是否遭受了入侵? 一.是否入侵检查 1)检查系统日志 检查系统错误登陆日志,统计IP重试 ...

  3. 读《移山之道-VSTS软件开发指南》

    首先,我选择<移山之道>有几个原因.第一,书的名字给我一种新鲜感,而不是像另外两本书那么平常:第二,作者邹欣是老师推荐的,看一看他的书或许能让我发现老师对他推崇备至的原因,而实际上,读完这 ...

  4. 《Linux内核设计与实现》第十八章学习笔记

    第十八章 调试 [学习时间:1小时 总结博客时间:1小时15分] [学习内容:出现bug的原因.内核调试器gdb.使用Git进行二分查找] 内核级开发的调试工作远比用户级开发艰难,它带来的风险比用户级 ...

  5. Linux内核分析作业六

    1.阅读理解task_struct数据结构 2.分析fork函数对应的内核处理过程sys_clone,理解创建一个新进程如何创建和修改task_struct数据结构: fork进程的代码 #inclu ...

  6. git体会

    刘仙臣个人github链接:http://www.github.com/liuxianchen 这次作业学会了关于git的一些基本操作,学习了到了许多东西,为以后的学习奠定了基础,激发了学习的兴趣.具 ...

  7. solr6.2单机版安装

    1安装solr服务,先安装jdk和tomcat 2去官网(http://archive.apache.org/dist/lucene/solr/)下载solr压缩包,最新版本是6.4.1,下载解压后, ...

  8. Docker中安装Nexus3

    https://blog.csdn.net/sqandczm/article/details/78560710 https://hub.docker.com/r/sonatype/nexus/ htt ...

  9. Ping命令的另一种使用方法

    今天实习结束休息的时候无聊,于是便想看看机房有多少机器,IP是什么,有没有什么小漏洞. 依次使用了netstat.ping.Telnet以后,不小心输入了这样一个东西 当时按下回车以后,心里想的是这样 ...

  10. [cnbeta]iPhone 2018年全球出货2.25亿部：中国区下滑两成

    iPhone 2018年全球出货2.25亿部:中国区下滑两成 2019年01月22日 20:12 501 次阅读 稿源:快科技 0 条评论   https://www.cnbeta.com/artic ...