了解 Flexbox:你需求知道的悉数

这篇文章介绍了Flexbox模块悉数根本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章十分的长,你要有所预备。

学习Flexbox的曲线

@Philip Roberts在Twitter上发了一个推:

学习Flexbox可不是件很风趣的作业,由于它将应战你所知道的CSS布局方面的常识。当然这也是十分正常的,由于悉数常识都是值得学习的。

别的你要认值对待Flexbox。由于它是现代Web布局的干流方法之一,不会很快就消失。它也成为一个新的W3C规范规范。已然如此,那让咱们翻开双臂,开端拥抱它吧!

你将学习

我将带你先了解Flexbox的一些根底常识。我想这是开端测验学习Flexbox的必经阶段。

学习根底常识是件很有意思的作业,更有意思的是能够经过学习这些根底理论常识,在实践的运用程序中运用Flexbox。

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

看上去是不是棒棒的?

在开端进入学习Flexbox构建音乐运用程序的布局之前,你还将需求了解Flexbox在呼应式www.188bet.com中所起的效果。

我将会把这悉数都告知你。

上图是@Jona Dinges规划的

在你开端构建音乐运用程序界面之前,我将一同陪你做一些操练。这看起来或许很无聊,但这是让你彻底把握Flexbox必经的进程,只需这样才干让你很拿手的运用Flexbox。

说了这么多的废话,那咱们赶忙的开端吧!(难怪篇幅长,本来开端有这么的…(^_^))

简介

CSS在曩昔的几年里已发作了很大的改动。CSS中引入了规划师喜爱的filterstransitionstransforms等。但有些东西现已消失了,但是咱们都巴望这些东西能一向存在。

运用CSS制造智能的、灵敏的页面布局一向以来都是CSSer想要的,也有很人运用各种不同的CSS黑魔法去完结智能的页面布局。

咱们总是不得不忍耐floatdisplay:table这些布局方法带来的苦楚。假如你完写过一段时刻的CSS,你或许有相关领会。假如你没有写过CSS,那你是走运的,在这也欢迎你来到CSS布局中一个更夸姣的国际中!

好像规划师和前端开发人员的这次祈求总算被天主听到了。而且这一次,在很大的风格上做出了改动。

现在咱们能够扔掉老司机们常用的CSS布局的黑魔法。也能够和float以及display:table说拜拜。

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

Flexbox是什么

依据规范中的描绘可知道,Flexbox模块供给了一个有用的布局方法,即便不知道视窗巨细或许不知道元素状况之下都能够智能的,灵敏的调整和分配元素和空间两者之关的联系。简略的了解,便是能够主动调整,核算元素在容器空间中的巨细。

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

怎样开端运用Flexbox

这是每个人都会问的榜首个问题,答案是比你料想的要简略得多。

开端运用Flexbox时,你所要做的榜首件作业便是声明一个Flex容器(Flex Container)。

比方一个简略的项目列表,咱们常常看到的HTML方法如下所示:

<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)就当即发动了。

告知你,它不是像你想像的那么杂乱。

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

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

给列表元素(li)增加一点根本款式,这儿你能够看到发作了什么。

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

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

你或许没有留意到,但事实上现已发作了改动。现在现已是一个Flexbox格式化上下文。

记住,默许状况下,div在CSS中笔直库房的,也便是说从上到下摆放显现,就像下图这样:

上面的图是你期望的成果。

但是,简略的写一行代码display:flex,你当即就能够看到布局改动了。

现在列表元素(li)水平摆放,从左到右。就像是你运用了float相同。

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

你或许不了解为什么这一改动就能改动列表元素的摆放方法。但我能够担任任的告知你,你深化学习之后就能了解。现在你只需求信赖就满足了。

了解flex display是运用Flexbox的一个开端。

还有一件作业,我需求提示您留意。

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

这些术语会一次又一次的说到,我更期望你经过一些更风趣的东西来协助你学习Flexbox模块。

我运用了两个关键词,咱们把关键放到他们身上。了解他们关于了解后边的常识至关重要。

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

这些仅仅Flexbox模块的根底。

Flex容器特点

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

经过上面的内容,咱们了解了一些根底常识。知道了Flex容器和Flex项目是什么,以及怎样发动Flexbox模块。

现在是一个好好运用它们的时刻了。

有设置一个父元素作为一个Flex容器,几个对齐特点能够运用在Flex容器上。

正如你的块元素的width设置了200px,有六种不同的特点能够用于Flex容器。

好消息是,界说这些特点不同于你以往运用过的任何一种方法。

flex-direction

flex-direction特点操控Flex项目沿着主轴(Main Axis)的摆放方向。

它具有四个值:

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

简略点来说,便是flex-direction特点让你决议Flex项目怎样摆放。它能够是行(水平)、列(笔直)或许行和列的反向。

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

浅显的说,感觉Main-Axis便是水平方向,从左到右,这也是默许方向。Cross-Axis是笔直方向,从上往下。

默许状况下,flex-direction特点的值是row。它让Flex项目沿着Main-Axis摆放(从左向右,水平摆放)。这就解说了本文开端部分时无序列表的体现效果。

虽然flex-direction特点并没有显式的设置,但它的默许值是row。Flex项目将沿着Main-Axis从左向右水平摆放。

假如把flex-direction的特点值修正成column,这时Flex项目将沿着Cross-Axis从上到下笔直摆放。不再是从左向右摆放。

flex-wrap

flex-wrap特点有三个特点值:

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

我将经过一个比方来解说怎样运用flex-wrap特点。首要在前面的无序列表的HTML结构中多增加几个列表项li

将Flex容器设置适宜巨细以适宜放置更多的列表项目或许说让列表项目换行摆放。这两种方法,你是怎样想的?

<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容器。

再深化一点。

持续给Flex容器内增加Flex项目,比方说增加到10个Flex项目。这个时分会发作什么?

相同的,Flex容器仍是能包容悉数的子元素(Flex项目)摆放,即便阅读器呈现了水平翻滚条(当Flex容器中增加了许多个Flex项目,至使Flex容器的宽度大于视窗宽度)。

这是每一个Flex容器的默许行为。Flex容咕噜会在一行内包容悉数的Flex项目。这是由于flex-wrap特点的默许值是nowrap。也便是说,Flex项目在Flex容器内不换行摆放。

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

no-wrap不是不行改动的。咱们能够改动。

当你期望Flex容器内的Flex项目到达必定数量时,能换行摆放。当Flex容器中没有满足的空间放置Flex项目(Flex项目默许宽度),那么Flex项目将会换行摆放。把它(flex-wrap)的值设置为wrap就有这种或许:

ul {
    flex-wrap: wrap;
}

现在Flex项目在Flex容器中就会多行摆放。

在这种状况下,当一行再不能包括悉数列表项的默许宽度,他们就会多行摆放。即便调整阅读器巨细。

便是这姿态。留意:Flex项目现在显现的宽度是他们的默许宽度。也没有必要逼迫一行有多少个Flex项目。

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

是的,你猜对了。它让Flex项目在容器中多行摆放,仅仅方向是反的。

flex-flow

flex-flowflex-directionflex-wrap两个特点的速记特点。

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

ul {
    flex-flow: row wrap;
}

适当于:

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

除了这个组合之外,你还能够测验一些其它的组合。flex-flow: row nowrapflex-flow: column wrapflex-flow: column nowrap

我信任你了解这些会发作什么样的效果,要不测验一下。

justify-content

Flexbox模块真得很好。假如你仍然不信任它的魅力,那么justify-content特点或许会压服你。

justify-content特点能够承受下面五个值之一:

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

justify-content特点又能给咱们带来什么呢?提示你一下,你是否还记住text-align特点。其实justify-content特点首要界说了Flex项目在Main-Axis上的对齐方法。

来看一个简略的比方,仍是考虑下面这个简略的无序列表:

<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;
}

你将看到的效果是这样:

经过justify-content特点,能够让Flex项目在整个Main-Axis上依照我自己的愿望设置其对齐方法。

或许会有以下几种类型。

flex-start

justify-content的默许特点值是flex-start

flex-start让悉数Flex项目靠Main-Axis开端边际(左对齐)。

ul {
    justify-content: flex-start;
}

flex-end

flex-end让悉数Flex项目靠Main-Axis完毕边际(右对齐)。

ul {
    justify-content: flex-end;
}

center

和你预期的相同,center让悉数Flex项目排在Main-Axis中心(居中对齐)。

ul {
    justify-content: center;
}

space-between

space-between让除了榜首个和最一个Flex项目的两者距离离相同(两头对齐)。

ul {
    justify-content: space-between;
}

你留意到有什么不同?看看下图的描绘:

space-around

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

ul {
    justify-content: space-around;
}

space-between有点不同,榜首个Flex项目和终究一个Flex项目距Main-Axis开端边际和完毕边际的的距离是其他相邻Flex项目距离的一半。看看下图的描绘:

千万不要觉得这些操练太多,这些操练能够协助了解Flexbox特点的语法。也能更好的协助你更好的了解它们是怎样影响Flex项目沿着Main-Axis的对齐方法。

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
}

它首要用来操控Flex项目在Cross-Axis对齐方法。这也是align-itemsjustify-content两个特点之间的不同之处。

下面是不同的值对Flex项目发作的影响。不要忘掉这些特点只对Cross-Axis轴有影响。

stretch

align-items的默许值是stretch。让悉数的Flex项目高度和Flex容器高度相同。

flex-start

正如你所期望的flex-start让悉数Flex项目靠Cross-Axis开端边际(顶部对齐)。

flex-end

flex-end让悉数Flex项目靠Cross-Axis完毕边际(底部对齐)。

center

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

baseline

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

成果看上去有点像flex-start,但略有不同。那“baseline”究竟是什么呢?下图应该能协助你更好的了解。

align-content

还记住前面谈论的wrap特点吗?咱们在Flex容器中增加了更多的Flex项目。让Flex容器中的Flex项目多行摆放。

align-content特点用于多行的Flex容器。它也是用来操控Flex项目在Flex容器里的摆放方法,摆放效果和align-items值相同,但除了baseline特点值。

align-items特点相同,它的默许值是stretch。你现在应该了解这些值。那它又是怎样影响Flex容器里的10个Flex项目多行摆放方法。

stretch

运用stretch会拉伸Flex项目,让他们沿着Cross-Axis习惯Flex容器可用的空间。

你看到的Flex项目间的距离,是Flex项目本身设置的margin值。

flex-start

之前你看到过flex-start。这次是让多行Flex项目靠Cross-Axis开端边际。沿着Cross-Axis从上到下摆放。因而Flex项目在Flex容器中顶部对齐。

flex-end

flex-end刚好和flex-start相反,让多行Flex项目靠着Cross-Axis完毕方位。让Flex项目沿着Cross-Axis从下到上摆放,即底部对齐。

center

你猜到了,center让多行Flex项目在Cross-Axis中心。在Flex容器中居中对齐。

这是Flex容器的终究一个特点。你现在知道怎样运用各种Flex容器特点。你能够在作业中实践这些特点。

Flex项目特点

order || flex-grow || flex-shrink || flex-basis

在前一节中,我解说了Flex容器及其对齐特点。

的确美丽。我想你也找到了感觉。现在咱们把留意力从Flex容器转移到Flex项目及其对齐特点。

像Flex容器,对齐特点也能够用在悉数的Flex项目。那咱们开端吧。

order

答应Flex项目在一个Flex容器中从头排序。根本上,你能够改动Flex项目的次序,从一个方位移动到另一个当地。

这不会影响源代码。这也意味着Flex项目的方位在HTML源代码中不需求改动。order特点的默许值是0。它能够承受一个正值,也能够承受一个负值。

值得留意的是,Flex项目会依据order值从头排序。从底到高。

要阐明总得需求一个比方。考虑下面这个无序列表:

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

默许状况下,悉数Flex项目的order值都是0。把前面给列表的款式运用过来。看到的效果如下:

Flex项目显现是按HTML源代码中的次序来显现,Flex项目1234

假如由于某些原因,在不改动HTML文档源码状况之下,想把Flex项目一从1变成终究。不能修正HTML文档源码意思是你不能把HTML代码改成:

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

这个时分就需求order特点。这个时分你需求把Flex项目一的order值设置比其他Flex项目值更大。

假如你曾经运用过z-index特点,那你就能更好的了解这个特点。

li:nth-child(1){
    order: 1; /*设置一个比0更大的值*/
}

Flex项目就从头进行了摆放,从低到高摆放。不要忘掉了,默许状况下,Flex项目2、3、4的order值为0。现在Flex项目1的order值为1

Flex项目2、3和4的order值都是0。HTML源代码次序并没有修正过。假如给Flex项目2的order设置为2呢?

是的,你猜对了。它也增加库房。现在代表Flex项目的最高的order值。

当两个Flex项目具有相同的order值呢?鄙人面的示例中,把Flex项目1和3设置相同的order值。

li:nth-child(1) {
    order: 1;
}
li:nth-child(3) {
    order: 1;
}

现在仍是从低到高摆放。这次Flex项目3排在Flex项目1后边,那是由于在HTML文档中Flex项目3呈现在Flex项目1后边。

假如两个以下Flex项目有相同的order值时,Flex项目从头排序是依据HTML源文件的方位进行排序。这个特点就不做过多的解说。接下来持续介绍其他的特点。

flex-grow 和 flex-shrink

Flex项目最优异的一点便是灵敏性flex-growflex-shrink特点答应咱们玩这个灵敏性。

flex-growflex-shrink特点操控Flex项目在容器有剩下的空间怎样扩大(扩展),在没有额定空间又怎样缩小。

他们或许承受0或许大于0的任何正数。0 || positive number

接下来论述它们的运用。运用一个简略的无序列表做为比方,它只包括一个列表项。

<ul>
    <li>I am a simple list</li>
</ul>
ul {
    display: flex;
}

增加更多的款式,看起来像这样:

默许状况下,flex-grow特点值设置为0。表明Flex项目不会增加,填充Flex容器可用空间。取值为0便是一个开和关的按钮。表明flex-grow开关是封闭的。

假如把flex-grow的值设置为1,会发作:

现在Flex项目扩展了,占有了Flex容器悉数可用空间。也便是说开关翻开了。假如你试着调整你阅读器的巨细,Flex项目也会缩小,以习惯新的屏幕宽度。

为什么?默许状况下,flex-shrink的值是1,也便是说flex-shrink开关也是翻开的。

能够细心看看flex-growflex-shrink特点在各种状况下的效果,这样能更好的协助你了解。

flex-basis

记住前面我说过,Flex项目是当我没有的。但咱们也能够操控。

flex-basis特点能够指定Flex项目的初始巨细。也便是flex-growflex-shrink特点调整它的巨细以习惯Flex容器之前。

前面介绍的是十分生要的,所以咱们需求花一点时刻来加强对他们的了解。

flex-basis默许的值是autoflex-basis能够取任何用于width特点的任何值。比方 % || em || rem || px等。

留意:假如flex-basis特点的值是0时,也需求运用单位。即flex-basis: 0px不能写成flex-basis:0

这儿相同运用只需一个列表项的列表做为示例。

<ul>
    <li>I am a simple list</li>
</ul>

ul {
    display: flex
}
li {
    padding: 4px; /*some breathing space*/
}

默许状况,Flex项目的初始宽度由flex-basis的默许值决议,即:flex-basis: auto。Flex项目宽度的核算是依据内容的多少来主动核算(很显着,加上了padding值)。

这意味着,假如你增加Flex项目中的内容,它能够主动调整巨细。

<ul>
    <li>I am a simple list AND I am a simple list</li>
</ul>

但是,假如你想将Flex项目设置一个固定的宽度,你也能够这样做:

li {
    flex-basis: 150px;
}

现在Flex项目的宽度受到了约束,它的宽度是150px

它变得愈加风趣。

flex速记

flexflex-growflex-shrinkflex-basis三个特点的速记(简写)。

在恰当的时分,我主张你运用flex,这样比运用三个特点便利。

li {
    flex: 0 1 auto;
}

上面的代码适当于:

li {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

留意它们之间的次序。flex-grow榜首,然后是flex-shrink,终究是flex-basis。缩写成GSB,能够协助你更好的回忆。

假如flex特点值中少一个值,会发作什么呢?

假如你只设置了flex-growflex-shrink值,flex-basis或许是默许值0。这便是所谓的必定flex项目。只需当你设置了flex-basis,你会得到一个相对flex项目。

/* 这是一个必定的Flex项目 */
li {
    flex: 1 1; /*flex-basis 默许值为 0*/
}
/* 这是一个相对的Flex项目 */
li {
  flex-basis: 200px; /* 只设置了flex-basis的值 */
}

我知道你在想什么。你必定想知道相对和必定的Flex项目是什么?我将在后边答复这个问题。你只需求再次盲目信赖就满足了。

让咱们看看一些十分有用的flex值。

flex: 0 1 auto

li {
    flex: 0 1 auto;
}

这适当于写了flex默许特点值以及悉数的Flex项目都是默许行为。

很简略了解这一点,首要看看flex-basis特点。flex-basis设置为auto,这意味着Flex项目的初始宽度核算是依据内容的巨细。

了解了?

把留意力放到下一个特点,flex-grow设置为0。这意味着flex-grow不会改动Flex项目的初始宽度。也便是说,flex-grow的开关是封闭的。

flex-grow操控Flex项目的增加,假如其值设置为0,Flex项目不会扩大以习惯屏幕(Flex容器巨细)。

终究,flex-shrink的值是1。也便是说,Flex项目在必要时会缩小。

运用到Flex项目效果便是这姿态:

留意:Flex项目没有增加(宽度)。假如有必要,假如调整阅读器(调小阅读器宽度),Flex项目会主动核算宽度。

flex: 0 0 auto

li {
    flex: 0 0 auto;
}

这个适当于flex: none

仍是老规矩:宽度是被主动核算,不过弹性项目不会扩展或许缩短(由于二者都被设置为零)。扩展和缩短开关都被关掉了。

它根本上是一个固定宽度的元素,其初始宽度是依据弹性项目中内容巨细。

看看这个 flex 简写是怎样影响两个弹性项目的。一个弹性项目会比另一个包容更多内容。

应该留意到的榜首件作业是,这两个弹性项目的宽度是不同的。由于宽度是依据内容宽度而主动核算的,所以这是意料得到的。

试着缩放一下阅读器,你会留意到弹性项目不会缩短其宽度。它们从父元素中杰出来了,要看到悉数内容,有必要横向翻滚阅读器。

不要着急,稍后我会展现怎样处理这种乖僻的行为。

在缩放阅读器时,弹性项目不会缩短,而是从弹性容器中杰出来了。

flex: 1 1 auto

这与 flex: auto 项目相同。

仍是按我前面立的规矩。即,主动核算初始化宽度,但是假如有必要,会扩展或许缩短以习惯整个可用宽度

扩展和缩短开关翻开了,宽度主动被核算。

此刻,项目会填满可用空间,在缩放阅读器时也会随之缩短。

flex: “positive number”

这儿正数能够代表任何正数(没有引号)。这与 flex: “正数” 1 0 相同。

flex: 2 1 0 与写为 flex: 2 是相同的,2表明任何正数。

li {
    flex: 2 1 0; / *与 flex: 2相同 */
}

与前面我立的规矩相同,即,将弹性项目的初始宽度设置为零(嗯?没有宽度?),扩展项目以填满可用空间,而且终究只需有或许就缩短项目

弹性项目没有宽度,那么宽度该怎样核算呢?

这个时分 flex-grow 值就起效果了,它决议弹性项目变宽的程度。由它来担任没有宽度的问题。

当有多个弹性项目,而且其初始宽度 flex-basis 被设置为依据零的任何值时,比方 0px,运用这种 flex 简写更有用。

实践发作的是,弹性项目的宽度被依据 flex-grow 值的份额来核算。

考虑如下两个列表项符号及 CSS:

<ul>
    <li>I am One</li>
    <li>I am Two</li>
</ul>

ul {
    display: flex;
}

/* 榜首个弹性项目 */
li:nth-child(1) {
    flex: 2 1 0; /* 与写成 flex: 2 相同*/
}

/* 第二个弹性项目 */
li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

记住设置 flex-grow : 1,会让弹性项目填满可用空间。扩展开关翻开了。

这儿有两个弹性项目。一个的 flex-grow 特点值是 1,另一个是 2,那么会呈现啥状况呢?

两个项目上的扩展开关都翻开了。不过,扩展度是不同的,12

二者都会填满可用空间,不过是按份额的。

它是这样作业的:前一个占 1/3 的可用空间,后一个占 2/3 的可用空间。

知道是我怎样得到这成果的么?

是依据根本的数学份额。”单项份额 / 总份额”,我期望你没有漏过这些数学课。

看到呈现啥状况了么?

即便两个弹性项目内容相同大(近似),它们所占空间仍是不同。宽度不是依据内容的巨细,而是扩展值。一个是另一个的约两倍。

有关于flex-growflex-basisflex-shrink之间的具体核算,能够点击@Chris Wright写的《Flexbox adventures》博文。译文能够点击这儿

align-self

align-self 特点更进一步让咱们更好地操控弹性项目。

你现已看到 align-items 特点是怎样有助于全体对齐弹性容器内的悉数弹性项目了。

假如想改动一个弹性项目沿着侧轴的方位,而不影响相邻的弹性项目,该怎样办呢?

这是 align-self 特点大展拳脚的当地了。

该特点的取值能够是这些值之一:auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

这些值你现已了解过了,不过作为回忆,如下是它们怎样影响特定方针项目。这儿是容器内的榜首个项目。方针弹性项目是赤色的。

flex-end

flex-end将方针项目(Flex项目)对齐到Cross-Axis的结尾。

center

center将方针项目(Flex项目)对齐到Cross-Axis的中心。

stretch

stretch会将方针项目拉伸,以沿着Cross-Axis填满Flex容器的可用空间(Flex项目高度和Flex容器高度相同)。

baseline

baseline将方针项目沿着基线对齐。它与flex-start的效果看起来是相同的,不过我信任你了解了基线是什么。由于前面现已解说过。

auto

auto 是将方针Flex项目的值设置为父元素的 align-items值,或许假如该元素没有父元素的话,就设置为 stretch

鄙人面的状况下,弹性容器的 align-items 值为 flex-start。这会把悉数弹性项目都对齐到Cross-Axis的最初。方针Flex项目现在承继了 flex-start 值,即父元素的 align-item 值。

如下是上面Flex项目的根底款式。这样你能够对发作的作业了解得更好点。

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start;  /* 影响悉数弹性项目 */
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

现在你差不多现已为风趣的部分做好预备了

必定和相对Flex项目

前面了解了一些根本概念,但重要的是要弄清一些重要的概念。那必定和相对Flex项目之间究竟有啥差异呢?二者之间首要的差异在于距离及怎样核算距离。

一个相对Flex项目内的距离是依据它的内容巨细来核算的。而在必定Flex项目中,只依据 flex 特点来核算,而不是内容。

考虑如下的符号:

<ul>
    <li>
        This is just some random text  to buttress the point being explained.
    Some more random text to buttress the point being explained.
    </li>

    <li>This is just a shorter random text.</li>
</ul>

两个列表项元素,一个比另一个的文本多得多。

加点款式:

ul {
    display: flex; /*触发弹性盒*/
}

li {
    flex: auto; /*记住这与 flex: 1 1 auto; 相同*/
    border: 2px solid red;
    margin: 2em;
}

如下是成果:

假如你现已忘了的话,flex: 1 1 auto 是与 flex-grow: 1flex-shrink: 1flex-basis: auto 相同的。

Flex项目的初始宽度是被主动核算的(flex-basis: auto),然后会扩展以习惯可用空间(flex-grow: 1)。

当Flex项目由于被设置为 flex-basis: auto,而导致宽度被主动核算时,是依据Flex项目内包括的内容的巨细而核算。

上面示例中Flex项目的内容巨细不相同。因而,Flex项目的巨细就会不持平。

已然各个宽度开端就不是持平的(它是依据内容的),那么当项目扩展时,宽度也坚持不持平。

上面示例中的Flex项目是相对Flex项目。

下面咱们把Flex项目变成必定的, 便是说这次它们的宽度是依据 flex特点,而不是内容的巨细。一行代码就能够出奇观。

li {
    flex: 1 ; /*与 flex: 1 1 0 相同*/
}

效果如下:

这次看到两个Flex项目的宽度相同了吗?

Flex项目的初始宽度是零(flex-basis: 0),而且它们会扩展以习惯可用空间。当有两到多个Flex项目的 flex-basis 取值为0时,它们会依据 flex-grow值同享可用空间。

这个之前就谈论过了。现在宽度不会依据内容巨细而核算,而是依据指定的 flex 特点值来核算。这样你就了解了吧。对么?

必定Flex项目的宽度只依据 flex 特点,而相对Flex项目的宽度依据内容巨细

Auto-margin 对齐

留神Flex项目上的 margin: auto 对齐。当在Flex项目上运用 margin: auto 时,作业看起来就很乖僻了。

你需求了解会发作什么。它会导致不行意料的成果,不过我计划解说解说。

当在Flex项目上运用 margin: auto 时,值为 auto 的方向(左、右或许二者都是)会占有悉数剩下空间。

这玩意有点难了解。下面我来阐明一下。

考虑如下的导航栏符号以及 CSS 款式:

<ul>
    <li>Branding</li>
    <li>Home</li>
    <li>Services</li>
    <li>About</li>
    <li>Contact</li>
</ul>

ul {
    display: flex;
}
li {
    flex: 0 0 auto;
}

你能够看到如下的效果:

这儿有几件作业要留意:

  • flex-grow 值为设置为0。这就解说了为什么列表项不会扩展。
  • Flex项目向Main-Axis的最初对齐(这是默许行为)。
  • 由于项目被对齐到Main-Axis最初,右边就有一些剩下的空间。看到了吧?

现在在榜首个列表项(branding)上运用 margin: auto,看看会出啥状况。

li:nth-child(1) {
    margin-right: auto; /*只运用到右外边距*/
}

刚刚发作了什么?之前的剩下空间现在现已被分配到榜首个Flex项目的右边了。

还记住我前面说的话吧?当在Flex项目上运用 margin: auto 时,值为 auto 的方向(左、右或许二者都是)会占有悉数剩下空间

假如想让一个Flex项目的两头都用主动外边距对齐,该怎样办呢?

/* 假如愿意的话,也能够用 margin 简写来设置两个边 */
li:nth-child(1) {
    margin-left: auto;
    margin-right: auto
}

现在空白被分配到Flex项目的两头了。

那么,这是不是对很帅的主动外边距对齐的一种折衷计划呢?看起来是。假如没留意的话,它也或许是受挫之源。当在一个Flex项目上运用主动外边距(margin: auto)时,justify-content 特点就不起效果了。

例如,在上面的Flex容器上经过 justify-content特点,设置不同的对齐选项时,对布局没有影响。

ul {
    justify-content: flex-end;
}

Flexbox实战

导航体系是每个网站或许运用程序的重要组成部分。这个国际上的每个网站都会有某种导航体系。

下面咱们看看这些抢手网站,以及它们是怎样完结其导航体系的。你看到Flexbox是怎样协助你更高效地创立这些布局吗?

也细心看看哪里会用得上主动外边距特性。

Bootstrap导航

AirBnB PC端导航

Twitter PC端导航

主张你自己写代码。试着自己完结这些导航体系。现在你现已把握了所需的悉数常识。你所需求的是一点勇气去开端写。

下一节再会。期望在你现已完结了导航体系操练之后。

切换flex-direction会发作什么?

提示一下:将会有一些乖僻的东东呈现

鄙人手学习Flexbox时,这个部分是最动火的。我估量许多弹性国际的新手也会发现如此。

还记住我说过默许的Main-Axis方向是从左到右,Cross-Axis方向是从上到下吧?

好吧,现在你也能够改动这个方向。

正如在较早的末节中所描绘的那样,用 flex-direction: column 时,的确是这样。

当用 flex-direction: column 时,Main-Axis和Cross-Axis会向如下所看到的那样改动:

假如曾用英语写过文字,那么你就知道英语是从左到右,从上到下来写的。

Flexbox的默许Main-Axis和Cross-Axis也是选用相同的方向。

不过,假如将 flex-direction 切换为 column,它就不再遵从英语的范式,而是日语的范式!

是的,日语。

假如你用日语写过文字,那么应该很了解了。(郑重声明,我从没用过日语写过文字)。

日文通常是从上到下写的!没那么怪,对吧?

这就解说了为嘛这对英语写作者或许有点动火。

看看下面这个比方。规范无序列表(ul),带有 3 个列表项(li)。不过这次我要改动一下flex-direction

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul {
    display: flex;
    flex-direction: column;
}

如下是方向改动之前的姿态:

如下是方向改动之后的姿态:

出啥事了?

现在文字是以日语风格写的:沿Main-Axis从上到下

我很愿意指出,你会发现一些风趣的作业。

你会看到项目的宽度填满了空间,对吧?

假如在之前要变成这姿态,得处理 flex-basis 以及 flex-grow 特点。

下面来看看这些会怎样影响新的布局。

li {
    flex-basis: 100px;
}

下面是你会得到的。

什么?高度是被影响了,但是宽度没有啊?我之前说过,flex-basis 特点界说每个Flex项目的初始宽度。

我是错的,或许这样说更好:我是用英语来考虑。下面咱们权且切换到用日语考虑。而且总是得有宽度。

在切换 flex-direction 时,请留意,影响Main-Axis的每一个特点现在会影响新Main-Axis。像 flex-basis 这种会影响Main-Axis上Flex项目宽度的特点,现在会影响项目的高度,而不是宽度。

方向现已被切换了!

所以,即便你运用 flex-grow 特点,它也是影响高度。本质上,每个效果于横向轴(即Main-Axis)上的 flex 特点,现在都会效果于纵向上的新Main-Axis。它仅仅在方向上的一个切换。

这儿再来一个比方。我立誓在这个比方之后你会有更好的了解。削减之前看到过的Flex项目的宽度,它们就不再填满整个空间了:

li {
    width: 200px;
}

假如想把列表项移到屏幕中心该怎样办呢?

在英语中,这是你到现在为止处理弹性容器的方法。便是说, 把Flex项目移到Main-Axis的中心 。

所以,你会用 justify-content: center。但是这样做不起效果。由于方向变了,中心是沿着Cross-Axis,而不是Main-Axis。

再来看看:

所以请用日语文字来考虑。Main-Axis是从上到下,你不需求这样。Cross-Axis是从左到右。形似是你所要的

你需求 把Flex项目移到Cross-Axis的中心 。这儿想起哪个Flex容器特点了么?

是的,align-items 特点。align-items 特点处理Cross-Axis上的对齐。

所以要把这些项目移到中心,得这样做:

li {
    align-items: center;
}

瞧瞧!Flex项目现已居中了吧。

是有点悬乎,我知道。假如需求,就再温习一遍好了。在研讨Flexbox时,我发现许多 CSS 书都略过了这一部分。

用日语文字来考虑一下会有很大协助。咱们有必要了解,悉数Flexbox特点都是依据适宜的 flex-direction 起效果。

信任你又学到了一点新东西。我很高兴解说这些,期望你也很高兴。

我的天啦,弹性盒处理了那问题了?

许多规划师用 CSS 时遇到的一些典型问题现已被Flexbox垂手可得处理了。

@Philip Walton 在其 Flexbox处理了的问题这个项目 列出了 6 种典型的问题(到本文编写时)。

他全面谈论了之前用 CSS 的约束,以及现在Flexbox供给的处理计划。主张在完结本文后看一看。

在接下来的实践环节中,在开端用弹性盒创立一个音乐运用布局时,我会解说他提出的一些概念。

Flex 不兼容阅读器的坑

假如你不是在梦中写 CSS 的那一类人的话,就或许想看看这个 Github 库房

有些比我聪明的人在这儿保护了一个Flexbox的 bug 列表及其变通方法。当有些作业没有按预期起效果时,这是我看的榜首个当地。我也会在后边的实践环节中带你踩踩一些显眼的坑。

@Philip Walton早前专门写了一篇有关于处理Flexbox跨阅读器兼容Bug的文章《Normalizing Cross-browser Flexbox Bugs》,对应的译文能够点击这儿阅览

用弹性盒创立一个音乐运用的布局

在学习完了庸俗谨慎的根底常识之后,该有一些风趣的项目了。是时分玩玩实践的比方,并把刚取得的Flexbox技术用上去。

想出一个好项目花了我好几天。由于缺少创造性的挑选,我想出了一个猫玩的音乐运用布局。我称它为 catty music 。

或许到了 2036 年,咱们就能让猫在火星上的某个当地唱摇滚。如下是完结了的布局看起来的姿态,而且彻底是用Flexbox布局的。

能够在线上看,在这儿

假如在移动设备上看,外观会略微有点不同。这是在本文呼应式规划一节中要处理的问题。

不过,有件事我得率直。我现已做了许多人以为是过错的作业。我彻底用Flexbox创立整个布局。

出于多种理由,这样做或许并非那么抱负。但是在这种状况下是成心的。我仅仅想用一个项目,向你展现悉数能够用Flexbox做的作业。

假如你猎奇什么时分运用Flexbox是对的,什么时分是错的,那你能够读读我写的一篇文章。

Flexbox 很棒,不过它在这儿不受欢迎 Flexbox 毋庸置疑是咱们大多数人遇到的最好的东西(假如你写 CSS 的话),不过它是不是适宜悉数状况呢…

这儿,我心里的石头总算落地了。现在我信任在读完这个之后,没人会对我大呼小叫了。

Catty Musci 中的悉数都是用Flexbox布局, 这是成心尽或许地炫技

所以下面咱们开端把这个玩意建成!关于任何略微合理一点的项目来说,有点规划对防止功率低下是有协助的。就让我带你看看创立 Catty Music 布局的规划方法。

从哪里开端?

只需用Flexbox创立布局,就应该从找出布局中哪一个部分会作为Flex容器开端。然后才干够运用Flexbox供给的强壮对齐特点。

剖析

你能够让整个包括体作为Flex容器(下图中被包括在赤色边框内的部分),并把布局的其它部分分红Flex项目(Item 1Item 2)。

这样做彻底说得通,让 Item 1 包括布局中除了脚注以外的每个部分。脚注部分用来包括音乐操控按钮。

你知道Flex项目也能够成为Flex容器吗?是的,是或许的!

你想嵌套多深就嵌套多深(不过沉着的做法是坚持一个合理的水平)。所以,依据这个新启示就有了这个…

Item 1(榜首个Flex项目)也能够弄成一个Flex容器。然后,侧边栏(Item 1b)和主栏目(Item 1a)就成了 Item 1 的Flex项目。

你仍然与我同在,对吧?像这样拆分布局,会给你一个适当不错的心思模型来处理。

在用Flexbox开端创立更为杂乱的布局时,你会看到这有多重要。当然,你并不需求一个像上面那样巨大上的图画。在纸上画一个简略的草图就满足了。

记住我说过能够想嵌套多深就嵌套多深吧?形似这儿还能够再来一个嵌套。

看看上面的主栏目(Item 1a)。它也能够变成一个Flex容器,以包容如下高亮度的部分:Item 1a — AItem 1a — B

或许你会决议不把主栏目(Item 1a)变成Flex容器,只在其内部放入两个 div 来包容高亮度部分。

是的,这样做没问题,由于 “Item 1a — A” 和 “Item 1a — B” 是笔直堆积的。

默许状况下,div 是笔直堆积的。这是盒模型的作业原理。假如挑选把主栏目变成一个Flex容器,就有了随时可你供调遣的强壮对齐特点。

Flexbox中的 Flex 是指弹性、灵敏。Flex容器默许是弹性的,跟呼应式有点相似。这或许是运用Flex容器,而不是一般 div 的另一个原因。不过,这取决于实践状况。

在你创立 Catty Music 时我会论及一些作业作业。你现在应该去写点代码了。

HTML结构

从如下的根底 HTML 设置开端。

<!DOCTYPE html>
<html>
    <head>
        <title>Catty Music</title>
    </head>
    <body>

        <main></main> <!--用来包括运用的主栏目-->

        <footer></footer> <!--用来包括音乐操控按钮和歌曲细节-->

    </body>
</html>

然后为它设置款式:

html,
body {
    height: 100%; /*显式设置这,是很重要的*/
}

body {
    display: flex; /*flex 超能力被激活了! */
    flex-direction: column; /*笔直而不是水平堆积弹性项目(主栏目和脚注元素)*/
}

运用Flexbox的榜首个过程便是确认一个Flex容器。

这正好是上面代码所做的。它将 body 元素的 display 特点设置为 flex。现在有了一个Flex容器,即 body 元素。

Flex项目也被界说了(item 1item 2):跟前面剖析中所做的相同。

留意,假如你对这个概念仍是有点含糊,就应该再看看我在之前开端剖析时展现的图画。

盯着终究的图画,你应该让弹性项目作业起来。

让脚注吸附在底部。让放音乐操控的脚注吸附在页面的底部,一起让主栏目填满剩下空间。

你怎样完结?

main {
    flex: 1 0 auto; /*填满剩下空间*/
}

footer {
    flex: 0 0 90px; /*不会扩大或许缩短 - 只会固定在 90px 高度。*/
}

请看上面列出的代码中的注释。多亏了 flex-grow 特点,它让主栏目填满整个空间相对很简略。只需将 flex-grow 特点的值设置为 1 即可。还应该把 flex-shrink 特点设置为 0。为什么呢?

由于 flex-direction 没有改动,所以原因或许不很显着。

在有些阅读器中,会有一个 bug,答应Flex项目缩短后比其内容尺度小。这是个很乖僻的行为。

处理这个 bug 的变通计划是把 flex-shrink 的特点值设置为 0,而不是默许值 1,一起,把 flex-basis 特点设置为 auto

就像是说:请主动核算Flex项目的巨细,但是不要缩短。有了这个简写值,就能够得到Flex项目的默许行为。

Flex项目会跟着阅读器缩放那个缩短。缩放不是依据 flex-shrink特点,而是依据主动对Flex项目的宽度从头核算(flex-basis: auto)。

这会导致Flex项目至少与它的宽度或许高度(假如声明晰)或许默许内容尺度相同大。请不要忘掉我在剖析 flex 简写特点时建立的准则。后边会有更多简写的东西。

现在作业聚集到一同了,下面咱们放点款式来界说距离和色彩。

body {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
}

footer {
    flex: 0 0 90px;
    padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
}

仍然没有啥奇观。你将看到的效果如下图所示:

看看作业是怎样开端初具规模,你会让它变得更好一点。

固定侧边栏

假如你是跟着写代码,就更新一下你的 HTML 文档。

<main>
    <aside> <!--这代表侧边栏,其间包括了来自 font-awesome 的图标集-->
        <i class="fa fa-bars"></i>
        <i class="fa fa-home"></i>
        <i class="fa fa-search"></i>
        <i class="fa fa-volume-up"></i>
        <i class="fa fa-user"></i>
        <i class="fa fa-spotify"></i>
        <i class="fa fa-cog"></i>
        <i class="fa fa-soundcloud"></i>
    </aside>

    <section class="content"> <!--这一部分会包容除侧边栏以外的悉数东西-->
    </section>
</main>

上面的代码列体现已解说的很清楚了。

至于图标设置,我用了抢手的 Font Awesome 库。这样用你想要的图标就简略到只需增加一个 CSS 类即可。这便是我在 aside 符号中所做的作业。

正如之前解说过的,上面的 main 部分也会成为一个Flex容器。侧边栏(用 aside 符号表明) 以及 section会成为Flex项目。

main {
  flex: 1 0 auto; /* 变成一个弹性项目*/
  display: flex; /*只包括这一行,现在就有一个弹性容器,带有弹性项目:侧边栏和主内容区*/
}

很好,越来越有意思了,嘿嘿。

现在,主栏目是一个Flex容器了。下面咱们来处理它的Flex项目之一,侧边栏。跟让脚注吸附到页面底部相同,你还会想让侧边栏吸附到页面的左面。

aside {
    flex: 0 0 40px; /*不会扩大或许缩小。固定在 40px*/ 
}

侧边栏应该让图标笔直堆积。能够让侧边栏变成Flex容器,给它设一个 flex-direction,让悉数图标笔直堆积。然后运用一个对齐特点,让图标就位。

鄙人面的代码列表中,看看你或许会怎样做。

aside {
    /* ...  */
    display: flex; /*现在也是一个弹性容器*/
    flex-direction: column; /*笔直堆积图标*/

    /*由于方向改动了,如下在笔直方向上起效果。*/
    justify-content: space-around;

    align-items: center; /*方向改动了!这条影响的是水平方向。将图标居中*/
    background-color: #f2f2f2; /*让我变美丽*/
}

aside i.fa {
    font-size: 0.9em;  /*图标的字体巨细*/
}

我现已在上面的代码中加了许多注释,现在看看布局是怎样美丽。很洁净,只需几行代码。入情入理的代码,没有杂乱无章的招数。

主内容区现在是空的。不要忘掉它是第二个列表项,侧边栏是榜首个。给这儿放一下东西。给主内容区增加内容你能够再看看竣工的项目,这样就不会忘掉接下来要发作的作业。

更重要的是,这能协助你了解下面的代码。更新 HTML 文档,在 .content部分增加如下符号:

<section class="content"> <!--这一区是空的,用内容填充它-->

    <div class="music-head"> <!--榜首个列表项:包括音乐概况-->

        <img src="images/cattyboard.jpg" /><!--专辑封面-->

        <section class="catty-music"> <!--专辑的其它细节-->
            <div>
                <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
                <p>Unknown Artist</p>
                <p>2016 . Charts . 100 songs</p>
            </div>

            <div> <!--Music controls-->
                <i class="fa fa-play">Play all</i>
                <i class="fa fa-plus">Add to</i>
                <i class="fa fa-ellipsis-h">More</i>
            </div>
        </section>

    </div> <!--end .music-head-->

    <!--第二个列表项:包括专辑中的歌曲列表-->
    <ul class="music-list">  
        <li>
            <p>1. One Dance</p>
            <p>Crake feat CatKid & Cyla</p>
            <p>2:54</p>
            <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
        </li>
        <li>
            <p>2. Panda</p>
            <p>Cattee</p>
            <p>4:06</p>
            <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
        </li>
        <li>
            <p>3. Can't Stop the Feeling!</p>
            <p>Catin Cimberlake</p>
            <p>3:56</p>
            <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
        </li>
        <li>
            <p>4. Work From Home</p>
            <p>Cat Harmony feat Colla</p>
            <p>3:34</p>
            <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
        </li>
    </ul>
</section>

嗯,我比前次增加了更多的东西,不过很简略。我用一个 div 填充空内容部分,这个 div 用来包容 catty 专辑的封面和其他细节。ul 包容专辑的歌曲列表。列表顶用独自的阶段来包容歌曲标题、艺术家、时长、”_catty cloud sync“。

那么你计划怎样设置款式呢?看看我怎样做的?

首要,应该让 .content部分红为Flex容器。

.content {
    display: flex;
    flex: 1 0 auto; /*这保证本区扩展到填满可用空间*/
    flex-direction: column;
}

还应该处理它的Flex项目:

.music-head {
    flex: 0 0 280px; /*相同的备忘,不要扩展或缩短 - 固定为 280px*/
    display: flex;  
    padding: 40px;
    background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.music-head 包容专辑封面以及其它专辑细节。相同的备忘录,不要扩展或许缩短,坚持高度为 280px。高度?没有宽度?是的!

父元素现已切换了 flex-direction。随后需求让它变成一个弹性容器,所以写上 display: flex.music-list 包容歌曲列表,填满与上面的 .music-head 同享的剩下可用空间。

这仍然没让人觉得有多美丽,不过来吧,假如你还跟着,你做的很不错了。赞一下。

这儿有几个问题。

歌曲列表看起来很糟糕

包括音乐封面的部分有真的很丑陋的文本

我会再次来你处理这些问题。

下面是我提出的处理计划。

处理歌曲列表

每个歌曲列表包括 4 个阶段,歌名、艺术家、时长和 “catty cloud sync”。

必定有方法让悉数这些放在一行,每个阶段占有该行持平空间。用Flexbox来搞定!这儿的概念与许多栅格体系顶用的相同。

li {
  display: flex; /*阶段现在显现在一行上*/
  padding: 0 20px; /*留点呼吸空间*/
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*这是甜面酱*/
}

看到阶段会发作什么了吗?

flex: 0 0 25%;

“不要扩展或许缩短,不过每个阶段应该占有 25% 的可用空间” 。阶段所占空间是持平的。

运用这种技术

这种技术是很有用的。能够用它来创立不持平的内容区。比方,两栏视图。

一个栏目能够占可用空间的 60%,另一个占 40%

.first-section: 0 0 60%;
.second-section: 0 0 40%;

能够用这种技术创立栅格体系。你将看到的效果如下:

给列表替换的色彩,也处理一下 “catty cloud sync” 标签。

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

所以,你降服它了,开端更好了解Flexbox方言了。这是你现在应该得到的东西了。

现在要处理第二个问题了。让相册概况文本看着更好亮点。下面真是很简略的作业。

.catty-music{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    font-weight: 300;
    color: #fff;
    padding-left: 50px;
}

.catty-music div:nth-child(1){
    margin-bottom: auto;
}

.catty-music div:nth-child(2){
    margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
    font-size: 0.9em;
    padding: 0 0.7em;
    font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
    font-size: 1.8em;
    margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
    font-size: 0.9em;
    margin: 2px 0;
}

你做到了,而且做的适当不错。

一个快速操练

我留下脚注部分给你作为操练。试着自己处理脚注。只需选用相同的技术。你知道你能搞定吗?假如卡住了,能够检查 Catty Music 的完好源代码。你也能够把整个脚注分红Flex项目,从这儿开端。

几乎不信任你到了这一步。下面,你会看到Flexbox是怎样有助于呼应式规划。

Flexbox用于呼应式规划

现已有不少关于呼应式规划的书,有不少书还不错。

由于本文专心于Flexbox,所以我不会深化呼应式规划。

假如你从未触摸过任何关于呼应式规划相关的常识,主张你点击这儿进行了解

像我之前在某处说过的那样,用Flexbox,咱们的确得到了一些开箱即用的呼应性。

Flexbox就像 弹性的盒子 。不过,能够经过媒体查询搞定不同的屏幕尺度,然后改动弹性行为。

如下是一个示例。咱们又用简略无序列表来协助。

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Register</li>
    <li>Login</li>
  </ul>

而且设置点款式…

ul {
    list-style-type: none;
    display: flex;
    border: 1px solid #4e4e4e;
}

li {
    flex: 0 0 auto;
    padding: 10px;
    margin: 10px;
    background-color: #8cacea;
    color: #fff;
    font-size: 1em;
}

现在你现已是Flexbox专家了,所以你知道是咋回事。

如下是导航栏的姿态。

这关于桌面以及平板电脑或许还挺酷,不过在某些屏幕尺度上,就特别丑陋。在移动设备上,你会想让导航条目笔直堆积。然后媒体查询就登堂入室了。

@media screen and (max-width: 769px) {
    /* 这儿的代码只适用于宽度小于 769px 的屏幕设备*/
    ul {
        flex-direction: column; /* 在更小的设备上,切换方向*/
    }
}

假如在这之前,你对呼应式规划还懂那么点,那就太棒了。把Flexbox归入你已有的常识好了。

趁便说一句,我假定你了解媒体查询是什么。假如不了解的话,看看下面的简介。

媒体查询

媒体查询是呼应式规划的中心,让你能够以特定屏幕尺度为方针,独自指定运行在该设备上的代码。

运用媒体查询最盛行的方法是 @media 规矩。

它看起来是这样的:

@media screen and (max-width: 300px) {
  /*在这个代码块中写 CSS*/
}

看着这段代码,猜都能够猜到它的效果。

“关于最大宽度为 300px 的屏幕设备… 做这做那”

在该代码块中的任何款式都将适用于匹配表达式的设备,即 “screen and (max-width: 300px)” 。

我猜这有助于消除一些疑问。

快速操练

Catty music 在移动设备上的显现有所不同。这但是个好消息。更棒的是你应该试着从头创立它。

假如你遇到了难题,本教程代码库的链接鄙人一节。处理计划也在库房中。快到终究了!在总结部分,我将谈论阅读器支撑、有用的链接和协助你上手的资源。

总结

你现已学习了怎样运用Flex容器和Flex项目的对齐特点。我引导你了解了必定和相对弹性、主动外边距对齐以及切换弹性方向。你还有机会将Flexbox技术运用到创立 Catty Music 运用,然后我也说到了呼应式规划。

这的确是一段绵长的旅程。

现在,我会向你解说一些终究的概念。用一些我以为你会发现很有用的资源和链接协助你。

Flexbox的阅读器支撑

这是当倾向于在生产中运用Flexbox时,被问到的一个常见的问题。这问题我也无法很好答复,不过 caniuse 网站能很好处理这个问题。

如下是一个来自 caniuse 的屏幕截图,阅读器支撑很棒。你能够在这儿自己看

在我作业生涯前期,我阅读过 caniuse 许屡次,仍然无法把握表明的数据是什么意思。所以这儿有一个简略的解说。

caniuse 网站的右下角是一个图例。

看看上面的图画,或许就拜访一下网站,找到图例,就了解了。实践上便是这么回事。

宣布我的谈论

撤销谈论
vwin娱乐场
表情 插代码

Hi,您需求填写昵称和邮箱!

  • 必填项
  • 必填项