Flex 弹性布局——笔记
将容器指定为Flex布局
display:flex ——>d-flex
display:-webkit-flex /*Safari*/
*float clear vertical-align失效
行内元素
display:inline-flex ->d-inline-flex ||.d-sm-flex
六个容器上的属性
*flex-direction 项目排列方向
*flex-wrap 换行方式
*flex-flow 上面两个的缩写
*justify-content 横向对齐方式
*align-items 单行的垂直对齐方式
*align-content 多行的对齐方式
flex-direction 决定项目的排列方向
*row 从左向右 ->flex-row
*row-reverse 从右向左 ->flex-row-reverse
*column 从上到下 ->flex-column
*column-reverse 从下到上 ->flex-column-reverse
当为竖向对齐时 下margin自动 ->mb-auto
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
上margin自动 -> mt-auto
flex-wrap 换行方式
*nowrap 不换行 ->flex-nowrap
*wrap 顺序换行 ->flex-wrap
*wrap-reverse 换行之后的在上方
flex-flow 上面两个的缩写
justify-content 横向对齐方式
*flex-start 左对齐 ->justify-content-start
*flex-end 右对齐 ->justify-content-end
*center 居中 ->justify-content-center
*space-between 两端对齐 项目间隔相等 ->justify-content-between
*space-around 两端留出空白 项目之间的间隔比两端的空白大一倍 justify-content-around
*当justify-content为默认左对齐时 可以使用自动margin
*mr-auto 自动将右margin填满 将自身右边的元素挤到旁边去
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
*ml-auto
align-items 垂直对齐方式
*stretch 占满容器 ->align-items-stretch
*flex-start 上方对齐
*flex-end 下方对齐
*center 居中对齐
*baseline 第一行文字对齐
align-content
*stretch 轴线占满真个交叉轴
*flex-start 交叉轴的起点 -> align-content-start
*flex-start 交叉轴的终点
*center 交叉轴的中点
*space-between 交叉轴的两端对齐 轴线间隔平均分布
*space-around 两端留出空白 项目之间的间隔比两端的空白大一倍
六个项目上的属性
*order 排列顺序
*flex-grow 放大比例
*flex-shrink 缩小比例
*flex-basis 横向空间
*flex 上面三个简称
*align-self 垂直对齐的属性
order 项目的排列顺序
*默认为0 数值越大 越往后排 ->order-3
flex-grow 项目放大比例
*默认为零
*2比1 的空间大一倍
flex-shrink 缩小比例
默认为1 空间不足会缩小
0 空间不足不会缩小
flex-basis 项目占据横向的空间
*auto
*length 长度 多少px
flex 上面三个的简称
*0 1 auto
*auto (1 1 auto)
*none (0 0 auto)
align-self 单个元素垂直对齐的属性
可继承align-items
单独设置时 单独生效
*stretch 占满容器 align-self-stretch
*flex-start 上方对齐
*flex-end 下方对齐
*center 居中对齐
*baseline 第一行文字对齐
Flex 弹性布局——笔记的更多相关文章
- 记一下flex弹性布局
flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...
- CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...
- flex弹性布局心得
概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...
- flex弹性布局属性详解!
详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...
- java基础之Flex弹性布局、JSP错误处理以及Log4J
一.Flex弹性布局 1.产生的比较晚,目前在移动网页开发中可以使用,而且逐渐成为主流. 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 2.开启方法: 在容器标签上加上 dis ...
- flex弹性布局,好用
一直不太喜欢自己布局前端页面,都是扒别人的页面 ,最近在练习小程序,页面无处可扒,只有自己布局 发现flex弹性布局真好用,布局起来很简单,实现的效果也很好,赞 以后可以自己写一点前端了,哈哈
- flex弹性布局的基本介绍
最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
随机推荐
- ETC的发展演变
ETC是不停车电子收费系统,ETC专用车道是给那些装了ETC车载器的车辆使用的,采用电子收费方式. ETC( Electronic Toll Collection ) 不停车收费系统是目前世界上最 ...
- 了解Serverless架构
1 概述 Serverless中文译为“无服务”是一种新兴起的架构模式,公司ESB产品引入Rest微服务服务机制过程,笔者刚好参与其中,其中Serverless作为一个新起的概念,跟微服务架构相关,为 ...
- Javascript高级编程学习笔记(24)—— 函数表达式(2)闭包
昨天的文章中主要记录了,函数表达式与函数声明的区别 以及在JS中如何安全地使用递归 那么既然要深入地理解JS中的函数,闭包就是一个绕不开的概念 闭包 JS高编一书中对闭包的概念定义如下: 闭包是指有权 ...
- 移动端调试神器-vConsole
什么是vConsole? 官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...
- Kali学习笔记23:Web渗透简介
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 我这里先说几句: 其实从缓冲区溢出到Web渗透之间还有 ...
- [Postman]查找替换(5)
在邮差中查找和替换 在Postman中快速轻松地查找和替换API项目中的文本.Postman应用程序使您能够执行全局查找和替换操作,该操作可在其各种组件(如集合,环境,全局和打开选项卡)中无缝工作.这 ...
- 使用token和redis怎样判断账户是否失效和异地登录
思路: 将token作为value,账户的id作为key 每次登录都去redis中查询该账户的登录是否过期,没有过期则删掉原来的id,token,将新生成token作为value存入redis中.过期 ...
- Anaconda下载地址
Anaconda installer archive:地址1: https://repo.continuum.io/archive/地址2:https://mirrors.tuna.tsinghua. ...
- android用OkHttp和okio包通信的坑--气死我了
今天新建了个项目,想要用用okhttp包来实现Android和tomcat的通信, 于是就根据记忆,把以前可以用的代码复制过来了,然后呢,出现这个.... 图有点大,不知到怎么调小 很莫名其妙,我看了 ...
- android WebView详解,常见漏洞详解和安全源码
这篇博客主要来介绍 WebView 的相关使用方法,常见的几个漏洞,开发中可能遇到的坑和最后解决相应漏洞的源码,以及针对该源码的解析. 转载请注明出处:http://blog.csdn.net/se ...