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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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


效果图如下

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

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


效果图如下

关于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. linux RPM manager

    RPM manage:rpm2cpio package_name | cpio -id #将一个rpm包解压至当前目录rpm -qi package_name #查看一个已安装的rpm包信息rpm - ...

  2. SQL基础语句总结

    前言: SQL 是用于访问和处理数据库的标准的计算机语言. 什么是 SQL? SQL 指结构化查询语言SQL 使我们有能力访问数据库SQL 是一种 ANSI 的标准计算机语言编者注:ANSI,美国国家 ...

  3. PHP从入门到精通(六)

    PHP中的错误处理 1.PHP的错误级别:见表格.2.调整PHP错误报告级别:PHP中,调整错误报告级别的方式有两种: ①修改PHP.ini文件的配置项.a.会导致在当前服务器环境下所有PHP文件都受 ...

  4. python-编码-15

    ascii A : 00000010 8位 一个字节 unicode A : 00000000 00000001 00000010 00000100 32位 四个字节 中:00000000 00000 ...

  5. Let the Balloon Rise HDU水题

    题意 让你统计字符串最多的那个串,并输出 分析 直接用map统计,不断更新最大值即可 代码 #include<iostream> #include<algorithm> #in ...

  6. Wannafly挑战赛25 A.因子

    传送门 [https://www.nowcoder.com/acm/contest/197/A] 题意 给你n,m,让你求n!里有多少个m 分析 看这个你就懂了 [https://blog.csdn. ...

  7. 对我们最常用的软件QQ的看法

    QQ聊天软件是我使用的第一款聊天软件,早在我上小学6年级的时候就开始接触这款软件了,可以说是陪伴我最久的一款软件. 相对于其他的聊天软件,QQ更加的方便,使用简单,界面也好操作,所以我爱上了这款软件. ...

  8. 《Linux内核分析》第五周学习笔记

    <Linux内核分析>第五周学习笔记 扒开系统调用的三层皮(下) 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.c ...

  9. HelloWorld.php

    没有写博的习惯,从今天开始.近期学习了下php,分享下我的第一个PHP. 工具:Hbuider+Wampserver 利用Wampserver就可以完成PHP脚本的编写和运行,本人之所以选择安装HBu ...

  10. back

    #include<stdio.h>   int main()   {   int a[5],b[5][5];   int i,j,sum,max,m,n;   printf("输 ...