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是最简单的布局了.所有放在布局里的 ...
随机推荐
- JAVA总结--java基本语法
static :静态的~ static :静态变量.静态方法: 被修饰的成员变量或者方法独立于该类的任何对象,只要该类被加载,被修饰的成员变量或者方法就存在并可以使用. 用public修饰的stat ...
- JavaScript ES6中export、import与export default的用法和区别
前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...
- 2101 可达性统计(拓扑排序/dfs+状态压缩)
[题目描述] 给定一张N个点M条边的有向无环图,分别统计从每个点出发能够到达的点的数量.N,M≤30000. [题目链接] 2101 可达性统计 [算法] 拓扑排序之后逆序计算(感觉dfs更好写而且应 ...
- Mysql8- Public Key Retrieval is not allowed
在使用 MySQL 8.0 时重启应用后提示 com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Public ...
- Linux基础命令一(补充)
echo ls ls–l ---- ll cd / 根目录 cd ~ cd - 返回上一个目录 env ip addr 显示物理网络地址,缩写:ip a /etc/init.d/network ...
- MacBook Pro修改hosts
访达前往:/etc/hosts 将hosts复制到桌面修改保存 替换 附Windows hosts文件位置: C:\windows\System32\drivers\etc
- Java架构师需要掌握的技术栈
- 8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台
基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台 1.板卡概述 板卡由我公司自主研发,基于6UCPCI架构,处理板包含双片TI DSP TMS320C ...
- 了解Greenplum (2)
一.目的 1. 理解Greenplum中的数据分布策略(random 和 distribution),分析不同分布策略的优劣:2. 理解查询执行中的数据广播和数据重分布,分析在何种情况下选择哪种策略, ...
- Firewalld--02 端口访问/转发、服务访问、源地址管理
目录 防火墙端口访问/转发.服务访问.源地址管理 1. 防火墙端口访问策略 2. 防火墙服务访问策略 3.防火墙接口管理 4.防火墙源地址管理 5. 防火墙端口转发策略 防火墙端口访问/转发.服务访问 ...