day18—Flex弹性布局详解(二)
转行学开发,代码100天——2018-04-03
2.6 align-content属性
align-content 属性定义了在交叉轴方向对齐方式和额外空间分配,类似于justify-content的作用。
align-content: stretch ||flex-start||flex-end||center ||space-between ||space-around
3.flex项目属性
3.1 order 属性
order 属性定义项目在容器中的先后顺序
order:1;
3.2 flex-grow属性
flex-grow 属性定义项目的放大比例,其值是一个单位的正整数,表示放大的比例,默认为0。
flex-grow:2;
3.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,负值无效。
flex-shrink:2;
3.4 flex-basis 属性
flex-basis属性定义了项目在分配额外空间之前的缺省尺寸。属性值可以是长度(20%)或者auto。
flex-basis:auto;
3.5 flex 属性
flex是flex-grow flex-shrink flex-basis的简写,默认为0 1 auto;后两个属性可选属性。
flex:none;
3.6 align-self 属性
align-self属性定义项目的对齐方式。默认值是auto,即继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto || flex-start||flex-end||center||baseline||stretch
day18—Flex弹性布局详解(二)的更多相关文章
- day17—Flex弹性布局详解(一)
转行学开发,代码100天——2018-04-02 今天看到一篇大神的文章,关于flex布局的详解,对flex用法介绍的相当详细,非常有助于我等初学者更深入了解这种布局方式. 文章链接 [基础知识]Fl ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- 弹性布局详解——5个div让你学会弹性布局
前 言 JRedu 在网页制作过程中,布局是我们最重要的一个环节.可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍:布局败,则事倍功半. 随着移动互联的到来,响应式网站风靡.这也就兴 ...
- css--flex弹性布局详解和使用
前言 前端开发最基础的能力是根据 ui 设计稿迅速还原页面,拿到设计稿不要急于写代码,首先要对页面进行分析,对页面的整体布局有个大概的了解,然后先实现一个整体的布局,再把布局拆分成逐个小模块,逐个去实 ...
- flex弹性布局属性详解!
详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...
- 弹性盒布局详解(display: flex;)
弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- Grid 网格布局详解
Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...
- Android布局详解之一:FrameLayout
原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...
随机推荐
- 解决:”ssh-keygen 不是内部或外部命令“ 的问题
相信大家在 码云生成/添加SSH公钥的过程中遇到一个比较常见的问题, 在cmd,命令行输入 ssh-keygen -t rsa -C "xxxxx@xxxxx.com" ; xxx ...
- hackinglab 基础关 writeup
地址:http://hackinglab.cn/ 基础关 key在哪里? 很简单,点击过关地址,在新打开的网页中查看网页源代码就能在 HTML 注释中发现 key 再加密一次你就得到key啦~ 明文加 ...
- java类从加载、连接到初始化过程
类加载器 在了解Java的机制之前,需要先了解类在JVM(Java虚拟机)中是如何加载的,这对后面理解java其它机制将有重要作用. 每个类编译后产生一个Class对象,存储在.class文件中,JV ...
- Appium+Python之PO模型(Page object Model)
思考:我们进行自动化测试时,如果把代码都写在一个脚本中,代码的可读性会变差,且后期代码维护也麻烦,最好的想法就是测试对象和测试用例可以分离,可以很快定位问题,代码可读性高,也比较容易理解.这里推荐大家 ...
- css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
- python的继承、重载和重写???
继承语法:<1>单继承:class(父类名)<2>多继承class(父类1,父类2,父类n...) 继承的特点:<1>减少代码量和灵活指定型类<2>子类 ...
- python 导入re模块语法及规则
正则表达式是功能比较强大的模块,应用在很多地方,抓网页,数据分析,数据验证等,下面讲述python 导入re模块语法及规则. 1,re模块语法 re.match 从头开始匹配 re.search 匹配 ...
- ofbiz框架以及核心原理介绍
1. 什么是Ofbiz Ofbiz(Open for business)是一个开源的,基于J2EE和XML规范的,用于构建大型企业级.跨平台.跨数据库.跨应用服务器的多层.分布式电子商务类WEB应用系 ...
- http请求报文格式(请求行、请求头、空行 和 请求包体)和响应报文格式(状态行、响应头部、空行 和 响应包体)
转载 出处 超文本传输协议(Hypertext Transfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一个请求 ...
- php WebService应用
<?php header ( "Content-Type: text/html; charset=gb2312" ); /* * 指定WebService路径并初始化一个We ...