理解 Flexbox:你需要知道的一切

2017/04/12 · CSS · 3
评论 ·
Flexbox

原文出处:
大漠   

这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备。

不受控制的 position:fixed

2017/08/15 · CSS ·
position

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用。它的作用是:

position:fixed 的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。

但是,在许多特定的场合,指定了 position:fixed 的元素却无法相对于屏幕视口进行定位。这是为何呢?

图片 1

2018 年 2 月 15 个有意思的 JavaScript 和 CSS 库

2018/02/27 · CSS,
JavaScript ·

原文出处: Georgi
Georgiev   译文出处:开源中国   

我们在Tutorialzine上的任务就是让你了解最新最酷的Web发展趋势。这就是为什么我们每个月都会发布一些我们偶然发现并认为值得你关注的最佳资源的缘由。

图片 2

学习Flexbox的曲线

@PhilipRoberts在Twitter上发了一个推:

图片 3

学习Flexbox可不是件很有趣的事情,因为它将挑战你所知道的CSS布局方面的知识。当然这也是非常正常的,因为一切知识都是值得学习的。

另外你要认值对待Flexbox。因为它是现代Web布局的主流方式之一,不会很快就消失。它也成为一个新的W3C标准规范。既然如此,那让我们张开双臂,开始拥抱它吧!

失效的 position:fixed

在许多情况下,position:fixed 将会失效。MDN 用一句话概括了这种情况:

当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。

What!还有这种操作?可能有部分同学还没 get
到上面这句话的意思,通俗的讲就是指定了 position:fixed 的元素,如果其祖先元素存在非
none 的 transform 值
,那么该元素将相对于设定了 transform 的祖先元素进行定位。

那么,为什么会发生这种情况呢?说好的相对视口(Viewport)定位呢?

这个问题,就牵涉到了 Stacking Context
,也就是堆叠上下文的概念了。解释上面的问题分为两步:

  1. 任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking
    Context)和包含块(Containing Block)的创建。
  2. 由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于
    viewport 定位,而是基于这个父元素。

Direction Reveal (方向展示)

该插件检测光标进入或离开块时的方向,允许你使用各种酷炫特效和过渡。它提供了一些开箱即用的CSS动画,让你可以轻松创建自己的CSS动画。

图片 4

你将学习

我将带你先了解Flexbox的一些基础知识。我想这是开始尝试学习Flexbox的必经阶段。

图片 5

学习基础知识是件很有意思的事情,更有意思的是可以通过学习这些基础理论知识,在实际的应用程序中使用Flexbox。

我将带您亲历很多“小知识点”之后,在文章末尾,使用Flexbox来做一个音乐应用程序的布局(UI界面布局)。

图片 6

看上去是不是棒棒的?

在开始进入学习Flexbox构建音乐应用程序的布局之前,你还将需要了解Flexbox在响应式Web设计中所起的作用。

我将会把这一切都告诉你。

图片 7

上图是@Jona Dinges设计的

在你开始构建音乐应用程序界面之前,我将一起陪你做一些练习。这看起来可能很无聊,但这是让你彻底掌握Flexbox必经的过程,只有这样才能让你很擅长的使用Flexbox。

说了这么多的废话,那我们赶紧的开始吧!(难怪篇幅长,原来开始有这么的…(^_^))

Stacking Context — 堆叠上下文

好的嘛,好的嘛,又冒出新的名词了,堆叠上下文(又译作层叠上下文),又是什么?

堆叠上下文(Stacking Context):堆叠上下文是 HTML
元素的三维概念,这些 HTML
元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z
轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

概念比较抽象,简单理解,记住 生成了 Stacking Context
的元素会影响该元素的层叠关系与定位关系

关于 生成了 Stacking Context 的元素会影响该元素的层叠关系
这一点,具体可以看看这篇文章 层叠顺序(stacking
level)与堆栈上下文(stacking
context)知多少?

而本文提到了生成了 Stacking Context 的元素会影响该元素定位关系
。按照上面的说法,堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了
position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。

那么问题来了,是否所有能够生成堆叠上下文的元素,都会使得其子元素的
position:fixed 相对它,而不是相对视口(Viewport)进行定位呢?

Carbon

Carbon允许你创建并分享代码组成的美丽图像。你所需要做的就是将你的代码粘贴到编辑器中,或直接自己编写代码。你可以通过更改字体样式、编辑器主题、语法高亮和甚至窗口按钮来自定义图像的外观。

图片 8

简介

图片 9

CSS在过去的几年里已发生了很大的变化。CSS中引入了设计师喜欢的filterstransitionstransforms等。但有些东西已经消失了,可是我们都渴望这些东西能一直存在。

使用CSS制作智能的、灵活的页面布局一直以来都是CSSer想要的,也有很人使用各种不同的CSS黑魔法去实现智能的页面布局。

我们总是不得不忍受floatdisplay:table这些布局方式带来的痛苦。如果你完写过一段时间的CSS,你可能有相关体会。如果你没有写过CSS,那你是幸运的,在这也欢迎你来到CSS布局中一个更美好的世界中!

似乎设计师和前端开发人员的这次祈祷终于被上帝听到了。而且这一次,在很大的风格上做出了改变。

现在我们可以抛弃老司机们常用的CSS布局的黑魔法。也可以和float以及display:table说拜拜。

是时候去拥抱一个更简洁的制作智能布局的现代语法。欢迎CSS
Flexbox模块的到来。

创建堆叠上下文的方式

为此,首先要找到所有能够使元素生成堆叠上下文的方法。

So,如何触发一个元素形成 堆叠上下文 ?方法如下(参考自
MDN):

  1. 根元素 (HTML),
  2. z-index 值不为 “auto”的 绝对/相对定位,
  3. 一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素
    display: flex|inline-flex,
  4. opacity 属性值小于 1 的元素(参考 the specification for opacity),
  5. transform 属性值不为 “none”的元素,
  6. mix-blend-mode 属性值不为 “normal”的元素,
  7. filter值不为“none”的元素,
  8. perspective值不为“none”的元素,
  9. isolation 属性被设置为 “isolate”的元素,
  10. position: fixed
  11. 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
  12. -webkit-overflow-scrolling 属性被设置 “touch”的元素

接下来,我们要验证,是否所有设置了上面属性样式之一的元素,都有使其子元素的
position: fixed 失效的能力?

为此我做了下面一个小实验,基于最新的 Blink 内核。可戳:

层叠上下文对 fixed
定位的影响(不同内核下表现可能不一致)

图片 10

我们设置两个父子 div,子元素 fixed
定位,通过修改父元素生成层叠上下文,观察子元素的 fixed
定位是否不再相对视口。

XHTML

<div class=”container”> <div class=”fixed”> </div>
</div>

1
2
3
<div class="container">
  <div class="fixed"> </div>
</div>

最初的 CSS :

CSS

.container { width:10vw; height: 10vw; background: rgba(255, 100, 100,
.8); } .fixed { position: fixed; top: 1vw; left: 1vw; right: 1vw;
bottom: 1vw; background: rgba(100, 100, 255, .8); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
    width:10vw;
    height: 10vw;
    background: rgba(255, 100, 100, .8);
}
 
.fixed {
    position: fixed;
    top: 1vw;
    left: 1vw;
    right: 1vw;
    bottom: 1vw;
    background: rgba(100, 100, 255, .8);
}

Аxios

Axios为处理HTTP请求提供了一个现代化的JavaScript解决方案。它有一个基于Promise的API,在处理async调用时使你的代码更加结构化。该库可以在浏览器中工作,也可以在node.js环境中工作。

图片 11

Flexbox是什么

根据规范中的描述可知道,Flexbox模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调整和分配元素和空间两者之关的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

这样听起来是不是太官方了,其实我也明白这种感觉。

一探 position:fixed 失效的最终原因

通过上面的试验,在最新的 Blink
内核下,发现并不是所有能够生成层叠上下文的元素都会使得 position:fixed
失效,但也不止 transform 会使 position:fixed 失效。

所以,MDN 关于 position:fixed 的补充描述不够完善。下述 3
种方式目前都会使得 position:fixed 定位的基准元素改变(本文重点):

  1. transform 属性值不为 none 的元素
  2. perspective 值不为 none 的元素
  3. will-change 中指定了任意 CSS 属性

Jarvis

一款基于Webpack仪表板的智能浏览器,它可以给你显示你在webpack构建所需的所有重要信息。它向你展示了你的资源在12种不同的连接类型中的表现如何,你项目中所有包的大小,并拥有一个漂亮的错误输出。它仍处于beta版本,预计会增加许多新功能。

图片 12

如何开始使用Flexbox

这是每个人都会问的第一个问题,答案是比你预想的要简单得多。

开始使用Flexbox时,你所要做的第一件事情就是声明一个Flex容器(Flex
Container)。

比如一个简单的项目列表,我们常常看到的HTML形式如下所示:

XHTML

<ul> <!–parent element–> <li></li>
<!–first child element–> <li></li> <!–second
child element–> <li></li> <!–third child
element–> </ul>

1
2
3
4
5
6
7
8
9
<ul>
    <!–parent element–>
    <li></li>
    <!–first child element–>
    <li></li>
    <!–second child element–>
    <li></li>
    <!–third child element–>
</ul>

一眼就能看出来,这就是一个无序列表(ul)里有三个列表元素(li)。

你可以把ul称为父元素,li称为子元素。

要开始使用Flexbox,必须先让父元素变成一个Flex容器。

你可以在父元素中显式的设置display:flex或者display:inline-flex。就这么的简单,这样你就可以开始使用Flexbox模块。

实际是显式声明了Flex容器之后,一个Flexbox格式化上下文(Flexbox
formatting context)就立即启动了。

告诉你,它不是像你想像的那么复杂。

图片 13

使用一个无序列表(ul)和一群列表元素(li),启动Flexbox格式化上下文的方式如下:

/* 声明父元素为flex容器 */ ul { display:flex; /*或者 inline-flex*/ }

1
2
3
4
/* 声明父元素为flex容器 */
ul {
    display:flex; /*或者 inline-flex*/
}

给列表元素(li)添加一点基本样式,这里你可以看到发生了什么。

li { width: 100px; height: 100px; background-color: #8cacea; margin:
8px; }

1
2
3
4
5
6
li {
    width: 100px;
    height: 100px;
    background-color: #8cacea;
    margin: 8px;
}

你将看到的效果如下图所示:

图片 14

你可能没有注意到,但事实上已经发生了变化。现在已经是一个Flexbox格式化上下文。

记住,默认情况下,div在CSS中垂直堆栈的,也就是说从上到下排列显示,就像下图这样:

图片 15

上面的图是你希望的结果。

然而,简单的写一行代码display:flex,你立即就可以看到布局改变了。

现在列表元素(li)水平排列,从左到右。就像是你使用了float一样。

图片 16

Flexbox模块的开始,正如前面的介绍,在任何父元素上使用display:flex

你可能不明白为什么这一变化就能改变列表元素的排列方式。但我可以负责任的告诉你,你深入学习之后就能明白。现在你只需要信任就足够了。

理解flex display是使用Flexbox的一个开始。

还有一件事情,我需要提醒您注意。

一旦你显式的设置了display属性的值为flex,无序列表ul就会自动变成Flex容器,而其子元素(在本例中是指列表元素li)就变成了Flex项目。

这些术语会一次又一次的提到,我更希望你通过一些更有趣的东西来帮助你学习Flexbox模块。

我使用了两个关键词,我们把重点放到他们身上。了解他们对于理解后面的知识至关重要。

  • Flex容器(Flex Container):父元素显式设置了display:flex
  • Flex项目(Flex Items):Flex容器内的子元素

图片 17

这些只是Flexbox模块的基础。

不同内核的不同表现

完了吗?没有!我们再看看其他内核下的表现。
图片 18

上面也谈到了,上述结论是在最新的 Chrome
浏览器下(Blink内核),经过测试发现,在 MAC 下的 Safari
浏览器(WebKit内核,Version 9.1.2 (11601.7.7))和 IE Trident/ 内核及
Edge 浏览器下,上述三种方式都不会改变 position: fixed 的表现!

所以,当遇到 position: fixed
定位基准元素改变的时候,需要具体问题具体分析,多尝试一下,根据需要兼容适配的浏览器作出调整,不能一概而论。

Toast UI编辑器

这是一个markdown和WYSIWYG编辑器,允许你在编码时轻松地在markdown和所见即所得模式之间切换。它提供了渲染后HTML的实时预览,即时语法错误检查以及markdown和预览模式之间的同步滚动。该编辑器还支持强大的扩展,如颜色选择器、图表代码块、UML代码块等。

图片 19

Flex容器属性

flex-direction || flex-wrap || flex-flow || justify-content ||
align-items || align-content

1
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

图片 20

通过上面的内容,我们了解了一些基础知识。知道了Flex容器和Flex项目是什么,以及如何启动Flexbox模块。

现在是一个好好利用它们的时间了。

有设置一个父元素作为一个Flex容器,几个对齐属性可以使用在Flex容器上。

正如你的块元素的width设置了200px,有六种不同的属性可以用于Flex容器。

好消息是,定义这些属性不同于你以往使用过的任何一种方法。

position:fixed 的其他问题

当然,position: fixed 在移动端实现头部、底部模块定位。或者是在 position: fixed 中使用了
input
也会存在一些问题,这个有很多文章都描述过并且存在很多解决方案,本文不讨论这块问题。

这方面的问题,可以看看这篇文章:移动端web页面使用position:fixed问题总结

Micron.js

Micron是一个允许你为DOM元素添加不同的CSS增强动画的库。其中交互可以通过HTML数据属性或通过链接JavaScript方法来设置速度、消除和其他选项来控制。它支持不同的交互,如摇晃、褪色、反弹、摇摆(shake,
fade, bounce, swing)等等。

图片 21

flex-direction

flex-direction属性控制Flex项目沿着主轴(Main Axis)的排列方向。

它具有四个值:

/* ul 是一个flex容器 */ ul { flex-direction: row || column ||
row-reverse || column-reverse; }

1
2
3
4
/* ul 是一个flex容器 */
ul {
    flex-direction: row || column || row-reverse || column-reverse;
}

简单点来说,就是flex-direction属性让你决定Flex项目如何排列。它可以是行(水平)、列(垂直)或者行和列的反向。

从技术上讲,水平垂直Flex世界中不是什么方向(概念)。它们常常被称为主轴(Main-Axis)侧轴(Cross-Axis)。默认设置如下所示。

图片 22

通俗的说,感觉Main-Axis就是水平方向,从左到右,这也是默认方向。Cross-Axis是垂直方向,从上往下。

默认情况下,flex-direction属性的值是row。它让Flex项目沿着Main-Axis排列(从左向右,水平排列)。这就解释了本文开始部分时无序列表的表现效果。

尽管flex-direction属性并没有显式的设置,但它的默认值是row。Flex项目将沿着Main-Axis从左向右水平排列。

图片 23

如果把flex-direction的属性值修改成column,这时Flex项目将沿着Cross-Axis从上到下垂直排列。不再是从左向右排列。

图片 24

最后

系列 CSS
文章汇总在我的 Github ,持续更新,欢迎点个
star 订阅收藏。

好了,本文到此结束,希望对你有帮助 🙂

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

lit

Lit是一个非常小和响应式CSS框架。它包含12列响应式网格、不同的排印风格、自定义输入、三种按钮类型以及CSS框架应该提供的所有功能。Lit适用于所有现代浏览器,以及IE11等一些较旧的浏览器

图片 25

flex-wrap

flex-wrap属性有三个属性值:

ul { flex-wrap: wrap || nowrap || wrap-reverse; }

1
2
3
ul {
    flex-wrap: wrap || nowrap || wrap-reverse;
}

我将通过一个例子来解释如何使用flex-wrap属性。首先在前面的无序列表的HTML结构中多添加几个列表项li

将Flex容器设置适合大小以适合放置更多的列表项目或者说让列表项目换行排列。这两种方式,你是怎么想的?

XHTML

<ul> <!–parent element–> <li></li>
<!–first child element–> <li></li> <!–second
child element–> <li></li> <!–third child
element–> <li></li> <li></li>
<li></li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <!–parent element–>
    <li></li>
    <!–first child element–>
    <li></li>
    <!–second child element–>
    <li></li>
    <!–third child element–>
    <li></li>
    <li></li>
    <li></li>
</ul>

幸运的是,新添加的Flex项目刚好适合Flex容器大小。也就是Flex项目能刚好填充Flex容器。

图片 26

再深入一点。

继续给Flex容器内添加Flex项目,比如说添加到10个Flex项目。这个时候会发生什么?

图片 27

同样的,Flex容器还是能容纳所有的子元素(Flex项目)排列,即使浏览器出现了水平滚动条(当Flex容器中添加了很多个Flex项目,至使Flex容器的宽度大于视窗宽度)。

这是每一个Flex容器的默认行为。Flex容咕噜会在一行内容纳所有的Flex项目。这是因为flex-wrap属性的默认值是nowrap。也就是说,Flex项目在Flex容器内不换行排列。

ul { flex-wrap: nowrap; /*Flex容器内的Flex项目不换行排列*/ }

1
2
3
ul {
    flex-wrap: nowrap; /*Flex容器内的Flex项目不换行排列*/
}

no-wrap不是不可改变的。我们可以改变。

当你希望Flex容器内的Flex项目达到一定数量时,能换行排列。当Flex容器中没有足够的空间放置Flex项目(Flex项目默认宽度),那么Flex项目将会换行排列。把它(flex-wrap)的值设置为wrap就有这种可能:

ul { flex-wrap: wrap; }

1
2
3
ul {
    flex-wrap: wrap;
}

现在Flex项目在Flex容器中就会多行排列。

在这种情况下,当一行再不能包含所有列表项的默认宽度,他们就会多行排列。即使调整浏览器大小。

就是这样子。注意:Flex项目现在显示的宽度是他们的默认宽度。也没有必要强迫一行有多少个Flex项目。

图片 28

除此之外,还有一个值:wrap-reverse

是的,你猜对了。它让Flex项目在容器中多行排列,只是方向是反的。

图片 29

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 30
图片 31

1 赞 2 收藏
评论

Minimal Mistakes

Minimal
Mistakes是一个灵活的双列Jekyll主题,可用于个人网站、博客及其若干组合。它是完全可定制的,100%响应式的和针对搜索引擎优化的。它具有九种不同的颜色变化,几种响应式布局以及大量内置和可随时使用的组件。

图片 32

flex-flow

flex-flowflex-directionflex-wrap两个属性的速记属性。

你还记得使用border的速记写法?border: 1px solid red。这里的概念是相同的,多个值写在同一行,比如下面的示例:

ul { flex-flow: row wrap; }

1
2
3
ul {
    flex-flow: row wrap;
}

图片 33

相当于:

ul { flex-direction: row; flex-wrap: wrap; }

1
2
3
4
ul {
    flex-direction: row;
    flex-wrap: wrap;
}

除了这个组合之外,你还可以尝试一些其它的组合。flex-flow: row nowrapflex-flow: column wrapflex-flow: column nowrap

我相信你了解这些会产生什么样的效果,要不尝试一下。

关于作者:chokcoco

图片 34

经不住流年似水,逃不过此间少年。

个人主页 ·
我的文章 ·
63 ·
   

图片 35

Tachyons

使用Tachyons,你可以制作漂亮且响应速度快的界面,并且几乎不需要CSS。它很容易使用和定制,移动优先,并能很好地与React、Ember、Angular和其他框架配合使用。更重要的是,它非常轻量级,并且具有非常详细的文档,你可以在其中找到所需的一切。

justify-content

Flexbox模块真得很好。如果你仍然不相信它的魅力,那么justify-content属性可能会说服你。

justify-content属性可以接受下面五个值之一:

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

1
2
3
ul {
    justify-content: flex-start || flex-end || center || space-between || space-around
}

justify-content属性又能给我们带来什么呢?提醒你一下,你是否还记得text-align属性。其实justify-content属性主要定义了Flex项目在Main-Axis上的对齐方式。

来看一个简单的例子,还是考虑下面这个简单的无序列表:

XHTML

<ul> <li>1</li> <li>2</li>
<li>3</li> </ul>

1
2
3
4
5
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

添加一些基本样式:

ul { display:flex; border: 1px solid red; padding: 0; list-style: none;
background-color: #e8e8e9; } li { background-color: #8cacea; width:
100px; height: 100px; margin: 8px; padding: 4px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    background-color: #e8e8e9;
}
li {
    background-color: #8cacea;
    width: 100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
}

你将看到的效果是这样:

图片 36

通过justify-content属性,可以让Flex项目在整个Main-Axis上按照我自己的欲望设置其对齐方式。

可能会有以下几种类型。

图片 37

flex-start

justify-content的默认属性值是flex-start

flex-start让所有Flex项目靠Main-Axis开始边缘(左对齐)。

ul { justify-content: flex-start; }

1
2
3
ul {
    justify-content: flex-start;
}

图片 38

Wiki.js

Wiki.js 是一个强大的Wiki
App,基于Node.js、Git和Markdown开发。你可以使用内置编辑器用Markdown格式来写作,并且可以自动同步到你的Git仓库。Wiki.js
有完整的访问控制和配置管理,但只占用很少的CPU资源。

flex-end

flex-end让所有Flex项目靠Main-Axis结束边缘(右对齐)。

ul { justify-content: flex-end; }

1
2
3
ul {
    justify-content: flex-end;
}

图片 39

图片 40

center

和你预期的一样,center让所有Flex项目排在Main-Axis中间(居中对齐)。

ul { justify-content: center; }

1
2
3
ul {
    justify-content: center;
}

图片 41

Phaser

Phaser是一个快速的开源框架,可以开发为运行在桌面浏览器或手机浏览器的HTML5游戏。你也可以为iOS、Android和其他不同的本地应用程序创建游戏。Phaser有对开发人员非常友好的API,并且Phaser的团队也积极开发和维护。最近,在Phaser
3.0版本中发布了很多新的特性和功能。

图片 42

space-between

space-between让除了第一个和最一个Flex项目的两者间间距相同(两端对齐)。

ul { justify-content: space-between; }

1
2
3
ul {
    justify-content: space-between;
}

图片 43

你注意到有什么不同?看看下图的描述:

图片 44

SweetAlert 2

SweetAlert2
是一个可以创建漂亮和可响应弹出框的库。SweetAlert2是高度可定制的,100%响应式并且在所有屏幕尺寸上都能有很好的显示效果。使用SweetAlert2 你可以创建各种不同的拥有惊艳的风格、显示效果和动画的弹出框。

图片 45

space-around

最后,space-around让每个Flex项目具有相同的空间。

ul { justify-content: space-around; }

1
2
3
ul {
    justify-content: space-around;
}

图片 46

space-between有点不同,第一个Flex项目和最后一个Flex项目距Main-Axis开始边缘和结束边缘的的间距是其他相邻Flex项目间距的一半。看看下图的描述:

图片 47

千万不要觉得这些练习太多,这些练习可以帮助熟悉Flexbox属性的语法。也能更好的帮助你更好的理解它们是如何影响Flex项目沿着Main-Axis的对齐方式。

Rekit

Rekit是一款可帮助你使用React、Redux和React-router创建出色的响应式Web应用程序的工具包。该框架提供了两个用于处理框架的强大工具
— 一个名为Rekit
Studio的全功能IDE,以及一个用于在终端上工作的扩展命令行界面。

图片 48

align-items

align-items属性类似于justify-content属性。只有理解了justify-content属性,才能更好的理解这个属性。

align-items属性可以接受这些属性值:flex-start || flex-end || center || stretch || baseline

ul { align-items: flex-start || flex-end || center || stretch ||
baseline }

1
2
3
ul {
    align-items: flex-start || flex-end || center || stretch || baseline
}

它主要用来控制Flex项目在Cross-Axis对齐方式。这也是align-itemsjustify-content两个属性之间的不同之处。

下面是不同的值对Flex项目产生的影响。不要忘记这些属性只对Cross-Axis轴有影响。

Nerd字体

这是一个流行字体和图标的集合。它包含39个补充字体系列,以及来自诸如Font
Awesome、Devicons、Octicons等流行图标集的1300多个图形和图标。所有字体在Linux、macOS和Windows上兼容。

图片 49

stretch

align-items的默认值是stretch。让所有的Flex项目高度和Flex容器高度一样。

图片 50

Kutt.it

Kutt是一个免费的可以用来缩短你的URL、管理链接和设置自定义域的开源库。它有一个易于使用的API,并允许你创建和删除URL,以及使用详细统计信息跟踪它们。

1 赞 3 收藏
评论

图片 35

flex-start

正如你所希望的flex-start让所有Flex项目靠Cross-Axis开始边缘(顶部对齐)。

图片 52

flex-end

flex-end让所有Flex项目靠Cross-Axis结束边缘(底部对齐)。

图片 53

center

center让Flex项目在Cross-Axis中间(居中对齐)。

图片 54

baseline

让所有Flex项目在Cross-Axis上沿着他们自己的基线对齐。

图片 55

结果看上去有点像flex-start,但略有不同。那“baseline”到底是什么呢?下图应该能帮助你更好的理解。

图片 56

发表评论

电子邮件地址不会被公开。 必填项已用*标注