资讯专栏INFORMATION COLUMN

笔记:flex 的完备性与正交性

MingjunYang / 698人阅读

摘要:笔记布局很容易与其他布局方式包括布局嵌套在一起,实际上它是一个独立的盒子,这个盒子由一个元素称为容器及其直接的子元素称为项目构成。这个容器外部以及这些项目内部都不会受布局的影响。

笔记:

flex 布局很容易与其他布局方式(包括 flex 布局)嵌套在一起,实际上它是一个独立的盒子,这个盒子由一个元素(称为容器)及其直接的子元素(称为项目)构成。这个容器外部以及这些项目内部都不会受 flex 布局的影响。

一个元素可以定义成两种 flex 布局,第一种是块级 flex 布局:

.flex-block-box {
  display: flex;
}

另一种是行内 flex 布局:

.flex-inline-box {
  display: inline-flex;
}

这两种 flex 布局的区别是,块级 flex 布局的容器是一个块级盒子(block),而行内 flex 布局的容器是一个行内盒子(inline-block)。

容器的属性主要用于排列和对齐项目,项目的属性主要用于实现弹性和覆盖容器所定义的对齐方式:

容器属性:

排列:

方向:flex-direction: row | column | row-reverse | column-reverse

换行:flex-wrap: nowrap | wrap | wrap-reverse

合写:flex-flow: row nowrap

对齐:

justify-content: flex-start | center | flex-end | space-between | space-around

align-items: flex-start | center | flex-end | baseline | stretch

align-content: flex-start | center | flex-end | space-between | space-around

项目属性:

order: 0 | 1 | ...

控制弹性:

flex-grow: 0 | 1 | ...

flex-shrink: 0 | 1 | ...

flex-basis: auto | 100px | 50% | ...

flex: 0 1 auto

auto: 1 1 auto

none: 0 0 auto

initial: 0 1 auto

align-self: auto | flex-start | center | flex-end | baseline | stretch

另参见:http://www.ruanyifeng.com/blo...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112699.html

相关文章

  • 正交设计

    摘要:为了实现高内聚,低耦合的软件设计,袁英杰提出了正交设计的方法论。正交设计正交是一个数学概念所谓正交,就是指两个向量的内积为零。鸣谢正交设计的理论原则及其方法论出自前软件大师袁英杰先生。 Design is there to enable you to keep changing the software easily in the long term. -- Kent Beck. 设...

    TwIStOy 评论0 收藏0
  • 什么是好API设计?

    摘要:什么是我们只要是在进行编程我们就需要不停的设计。不易误用这一点很重要,要减少使用者的心智负担。尽量少的外部依赖减少使用者的成本。良好的命名尽量做到自描述。 什么是API? 我们只要是在进行编程我们就需要不停的设计API。 API简单来讲可以是一个调用的函数,一个接口。 抽象来说,接口是一个内聚系统暴漏给外部的一切信息,包含但不限于: 调用方式:比如通过lib库或者http接口等。 调...

    mudiyouyou 评论0 收藏0
  • Hu矩正交不变理论推导

    摘要:矩正交不变性的理论推导在和上查阅了很多资料,大家都只介绍了矩的计算方法和应用场景和,却没有人说清楚为什么矩能作为平移,选择,尺度变换下均不变的图像特征。笔者自己调研了提出矩的原始论文。同时,作者还构建了一个正交不变量的完备系统。 ...

    张春雷 评论0 收藏0
  • 人工智能术语表

    摘要:如果你对算法实战感兴趣,请快快关注我们吧。加入实战微信群,实战群,算法微信群,算法群。 作者:chen_h微信号 & QQ:862251340微信公众号:coderpai简书地址:https://www.jianshu.com/p/b5c... 介绍一些人工智能技术的术语,如果你还有术语补充,请访问 Github English Terminology 中文术语 neur...

    pingan8787 评论0 收藏0
  • 面向对象接口多态

    摘要:多态的前提是必须有子父类关系或者类实现接口关系,否则无法完成多态。具体格式如下父类引用指向子类对象就是多态的定义格式。多态的转型分为向上转型与向下转型两种向上转型当有子类对象赋值给一个父类引用时,便是向上转型,多态本身就是向上转型的过程。 第3天 面向对象 今日内容介绍 接口 多态 笔记本案例今日学习目标 写出定义接口的格式 写出实现接口的格式...

    wangdai 评论0 收藏0

发表评论

0条评论

MingjunYang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<