关于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后会在一行排列
随机推荐
- mysql操作命令梳理（5）-执行sql语句查询即mysql状态说明
在日常mysql运维中,经常要查询当前mysql下正在执行的sql语句及其他在跑的mysql相关线程,这就用到mysql processlist这个命令了.mysql> show process ...
- Centos下部署DRBD+NFS+Keepalived高可用环境记录
使用NFS服务器(比如图片业务),一台为主,一台为备.通常主到备的数据同步是通过rsync来做(可以结合inotify做实时同步).由于NFS服务是存在单点的,出于对业务在线率和数据安全的保障,可以采 ...
- 微信小程序中的组件
前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官 ...
- M2阶段团队个人贡献分
团队个人贡献分: 徐钧鸿:53 张艺:48 黄可嵩:51 徐方宇:47 刘浩然:52 钟毅恒:49 杨伊:50
- 第三个spring冲刺第8天
今天,我们忙于完成精美的背景,还有难度的具体设置,如何达到最理想化,为此我们今天主要是做了开会讨论,但还没有完全确定好结论,明天就应该能做出结论,然后修改后台的难度设置了.
- numpy行转列
>>> a = np.array([1, 2, 3]) >>> a = a.reshape(-1, 1) #-1表示任意行数,1表示1列 >>> ...
- Alpha冲刺随笔集
作业地址 项目名称:高校实验室信息化管理系统 团队成员 学号 姓名 031602636 许舒玲 031602237 吴杰婷 031602220 雷博浩 031602634 吴志鸿 181600107 ...
- HTML的input类型为hidden导致无法reset改字段的value问题
问题关键:根据HTML规范,hidden是非ui类元素,不接受用户处理.所以form的 reset并不影响它. http://stackoverflow.com/questions/6367793/w ...
- Windows10 RedStone 1使用Bash体验
很多年前,记得在Windows Server2008的Feature里发现了Windows Subsystem For Unix,当时也不知道干啥用的,还以为是Samba协议用的呢. 今天,发现Win ...
- Jmeter While Controller 使用${__jexl2(,)}
1. String [] str ={"1","2","3"}; vars.putObject("strArray",s ...