关于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后会在一行排列
随机推荐
- tmux使用总结
ctrl+b +%:增加垂直分屏 ctlr+b +左右箭头: 在垂直分屏中移动 ctrl+b+c:新建窗口(不分屏) ctrl+b+数字键: 切换窗口 ctrl+b+d: 断开窗口 tmux a : ...
- Git科普来一发：【rebase】与【merge】
rebase 假设你现在基于远程分支"origin",创建一个叫"mywork"的分支. $ git checkout -b mywork origin 现在我 ...
- 软件工程驻足篇章：第十七周和BugPhobia团队漫长的道别
0x01 :序言 I am a slow walker, but I never walk backwards. 成长于被爱,学着爱人 成长的故事 也是年少的星期六结束的故事 就仿佛我和BugPhob ...
- 《Linux内核分析》第八周笔记 进程的切换和系统的一般执行过程
20135132陈雨鑫 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ...
- Linux内核分析 笔记六 进程的描述和进程的创建 ——by王玥
一.知识点总结 (一)进程的描述 1.操作系统内核里有三大功能: 进程管理 内存管理 文件系统 2.进程描述符:task_struct 2.进程描述符——struct task_struct 1. p ...
- Xcode自动选择证书
从xcode3时代习惯了手动选择证书,即 Provisioning Profile和 Code Signing Identify. 而随着团队扩大,应用量增多,需要管理的证书也越来越多,每次从长长的l ...
- [转]Spring通过@Value注解注入属性的几种方式
原文地址:https://blog.csdn.net/csujiangyu/article/details/50945486 ------------------------------------- ...
- vue路由异步组件案例
最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...
- Bash on Ubuntu on Windows 到底想干啥？apt update又能解决啥问题？
- 暂时刷完leetcode的一点小体会
两年前,在实习生笔试的时候,笔试百度,对试卷上很多问题感到不知所云,毫无悬念的挂了 读研两年,今年代笔百度,发现算法题都见过,或者有思路,但一时之间居然都想不到很好的解法,而且很少手写思路,手写代码, ...