flex-box 速记表

haoguo 发布于2019-08-30 15:52 / 2751人阅读

启动 flex-box：

父元素设置 display: flex; 或 display:inline-flex;

flex container：父元素显示设置 display: flex

flex item：flex container 中的子元素

flex 容器属性：

flex-direction：控制 flex 元素沿着 main-axis 的排列方向

row：默认值，flex 元素沿着 main-axis 从左到右排列

column：flex 元素将沿着 cross-axis 从上到下垂直排列

row-reverse：flex 元素沿着 main-axis 从右到左排列

column-reverse：flex 元素将沿着 cross-axis 从下到上垂直排列

flex-wrap：指定 flex 元素单行显示还是多行显示

nowrap：默认值，flex 元素在 flex 容器内不换行排列

wrap：flex 元素被打断到多个行中。cross-start 会根据 flex-direction 的值相当于 start 或 before。cross-end 为 cross-start 的相对值

wrap-reverse：和 wrap 的表现一样但是 cross-start 和 cross-end 交替排列

flex-flow：是 flex-direction 和 flex-wrap 的简写

justify-content：定义了浏览器如何分配顺着父容器 main-axis 的 flex 元素之间及其周围的空间

flex-start：默认值，flex 元素靠 main-axis 开始边缘（左对齐）

flex-end：所有 flex 元素靠 main-axis 结束边缘（右对齐）

center：所有 flex 元素排在 main-axis中间（居中对齐）

space-between：除了第一个和最一个 flex 元素的两者间间距相同（两端对齐）

space-around：让每个 flex 元素具有相同的空间

align-items：以与 justify-content 相同的方式在侧轴方向上将当前行上的 flex 元素对齐

stretch：默认值，让所有的 flex 元素高度和 flex 容器高度一样

flex-start：让所有 flex 元素靠 cross-axis 开始边缘（顶部对齐）

flex-end：让所有 flex 元素靠 cross-axis 结束边缘（底部对齐）

center：让 flex 元素在 cross-axis 中间（居中对齐）

baseline：让所有 flex 元素在 cross-axis 上沿着他们自己的基线对齐

align-content：定义弹性容器的侧轴方向上有额外空间时，如何排布每一行，当弹性容器只有一行时无作用

stretch：默认值，拉伸 flex 元素，让他们沿着 cross-axis 适应 flex 容器可用的空间

flex-start：让多行 flex 元素靠 cross-axis开始边缘，沿着 cross-axis 从上到下排列，flex 元素在 flex 容器中顶部对齐

flex-end：让多行 flex 元素靠着 cross-axis 结束位置，让 flex 元素沿着Cross-Axis从下到上排列，即底部对齐

center：让多行 flex 元素在cross-axis中间，在 flex 容器中居中对齐

flex 元素属性：

order：允许 flex 元素在一个 flex 容器中重新排序类似 z-index

flex-grow：控制 flex 元素在容器有多余的空间如何放大（扩展）

flex-shrink：控制 flex 元素在容器没有额外空间又如何缩小

flex-basis：指定了 flex 元素在主轴方向上的初始大小

auto：默认值，flex 元素宽度的计算是基于内容的多少来自动计算

取任何用于 width 属性的任何值，比如 % || em || rem || px等

flex：flex-grow flex-shrink flex-basis 的速记

flex: 0 1 auto; 默认行为

flex: 0 0 auto; 相当于 flex: none; 它基本上是一个固定宽度的元素，其初始宽度是基于 flex 元素中内容大小

flex: 1 1 auto; 相当于 flex: auto; 自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度

flex: "positive number" 将 flex 元素的初始宽度设置为零，伸展元素以填满可用空间并且最后只要有可能就收缩元素

align-self：整体对齐 flex 容器内的所有弹性项目，改变一个 flex 元素沿着侧轴的位置，而不影响相邻的 flex 元素

auto：默认值，设置为父元素的 align-item 值，如果该元素没有父元素的话，就设置为 stretch

flex-start：元素会对齐到 cross-axis 的首端

flex-end：元素会对齐到 cross-axis 的尾端

center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出

baseline：所有的 flex 元素会沿着基线对齐

stretch：将目标元素拉伸，以沿着 cross-axis 填满 flex 容器的可用空间，flex 元素高度和 flex 容器高度一样

超融合服务器私有云速记 excel表导入临时表数据线性表的顺序表c语言表导入 j2ee 表

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

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

二分查找算法速记

摘要：二分查找英语，也称折半搜索英语对数搜索英语，是一种在有序数组中查找某一特定元素的搜索算法。这种搜索算法每一次比较都使搜索范围缩小一半。代码实现参考文章算法通关讲二分查找（英语：binary search），也称折半搜索（英语：half-interval search）对数搜索（英语：logarithmic search，是一种在有序数组中查找某一特定元素的搜索算法。搜索过程从数组的中...

chinafgj 2019-07-01 12:43 评论0 收藏0
19+ 个 JavaScript 快速编程技巧 — SitePoint

摘要：常规写法速记法判断变量是否存在速记法这可能会有些琐碎，但是值得一提。常规写法速记法注意这两个例子并不是完全相等，只要变量是一个真值，该表达式就是成立的。 19+ 个 JavaScript 快速编程技巧 — SitePoint 这确实是一篇针对于基于 JavaScript 语言编程的开发者必读的文章。在过去几年我学习 JavaScript 的时候，我写下了这篇文章，并将其作为 JavaS...

RobinTang 2019-08-20 18:00 评论0 收藏0
19+ 个 JavaScript 快速编程技巧 — SitePoint

摘要：常规写法速记法判断变量是否存在速记法这可能会有些琐碎，但是值得一提。常规写法速记法注意这两个例子并不是完全相等，只要变量是一个真值，该表达式就是成立的。 19+ 个 JavaScript 快速编程技巧 — SitePoint 这确实是一篇针对于基于 JavaScript 语言编程的开发者必读的文章。在过去几年我学习 JavaScript 的时候，我写下了这篇文章，并将其作为 JavaS...

mdluo 2019-08-05 11:37 评论0 收藏0
19+ 个 JavaScript 快速编程技巧 — SitePoint

摘要：常规写法速记法判断变量是否存在速记法这可能会有些琐碎，但是值得一提。常规写法速记法注意这两个例子并不是完全相等，只要变量是一个真值，该表达式就是成立的。 19+ 个 JavaScript 快速编程技巧 — SitePoint 这确实是一篇针对于基于 JavaScript 语言编程的开发者必读的文章。在过去几年我学习 JavaScript 的时候，我写下了这篇文章，并将其作为 JavaS...

wow_worktile 2019-08-01 17:10 评论0 收藏0
flex布局中某个行内元素居右并垂直居中

摘要：首先父盒子设置成子元素行内元素设和水平居右并垂直居中完整的如下水平居右并垂直居中首先父盒子设置成display: flex 子元素(行内元素)设flex: 1和text-align: right 1 2 3 水平居右并垂直居中 .flex-box { display: flex; flex-direction: row; } ...

opengps 2019-08-05 16:49 评论0 收藏0