图解CSS:Flexbox布局(Part2)

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

如果你未阅读第一部分,强烈建议您先花点时间阅读第一部分

运用于Flex项目属性

运用于Flex项目中的CSS属性和运用于Flex容器上的属性类似,主要分为三个部分:对齐尺寸方向 三个部分:

align-self

在Flex容器中可以使用align-items来控制来控制Flex项目(所有Flex容器的子元素)在Flex容器侧轴方向的对齐方式。在Flexbox布局模块中,还可以使用align-self对单个Flex项目进行对齐方式的控制,同样是Flex容器侧轴方向的对齐。

align-self属性可接受的值主要有:

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

即使在Flex容器上显式设置了align-items用来控制所有Flex项目在Flex容器侧轴上的对齐方式,但只要在Flex项目上显式设置了align-self的值,则会覆盖align-items属性。只不过只对显式设置了align-self的Flex项目生效。比如下面这个示例,我们在Flex容器显式设置了align-items的值为center,并且对单数Flex项目显式设置align-self的值:

.flex__container {
    align-items: center;
    direction: ltr;
    writing-mode: horizontal-tb;
    flex-flow: row nowrap;
}

.flex__item:nth-child(odd) {
    algin-self: var(--flexSelf);
}

你将看到的效果如下:

这里需要特别提出的一点是:Flex项目的align-self显式设置值为auto时不会覆盖Flex容器的align-items;另外如果在Flex项目上显式设置margin的值为auto时,Flex项目的align-self值将会失效

同样的,algin-self也会受directionwriting-mode取值的影响。

当Flex容器中有多行时,每一行会进行独立的布局,其中align-self属性每次仅作用于单独一行上的Flex项目;同时每一行侧轴长度指定为可容纳该行中的Flex项目(在依据align-self属性进行对齐之后)的最小值,并且这些行依据align-content属性在Flex容器中进行对齐。

order

在Flexbox布局模块中,我们除了在Flex容器上通过flex-direction来改变DOM源的顺序之外,还可以在Flex项目上显式设置order属性来改变DOM源顺序:

order: 0 || <number>

其中0order的默认值,同时它可以接受正负值(整数值)。

比如上面示例中,每组中的第二个Flex项目order设置了不同的值:

  • 第一组中Flex项目未显式设置order值(即默认值为0
  • 第二组中第二个Flex项目显式设置order的值为1,这个时候该Flex项目会排列在最末尾
  • 第三组中第二个Flex项目显式设置order的值为-1,这个时候该Flex项目会排列在最前面

其中order值越大,Flex项目越后;反之越前:

order用来控制Flex项目顺序在布局中非常的实用,比如我们要构建一个多列布局:

<!-- HTML -->
<header>Header Section</header>
<main>
    <article>Article Section</article>
    <nav>Nav Section</nav>
    <aside>Aside Section</aside>
</main>
<footer>Footer Section</footer>

其中<article>放在<nav><aside>前面,主要是为了内容为先。针对这样的DOM结构,如果我们希望<nav><article>左侧,<aside><article>右侧时,order属性就可以起关键性的作用:

上面的示例中,在main:hover改变了<nav><aside>两个元素的order值:

nav {
    order: -1;
}

main:hover nav {
    order: 1;
}

main:hover aside {
    order: -1;
}

这个时候看到的效果如下:

flex

flex属性主要用来让Flex项目如何伸长或缩短以适应Flex容器中的可用空间。它是一个简写属性,即:

flex: [<flex-grow><flex-shrink>?||<flex-basis>]

其中:

flex-grow: <number> 
flex-shrink: <number>
flex-basis: content | <width>

这几个属性都有其初始值:

  • flex-grow的初始值为0
  • flex-shrink的初始值为1
  • flex-basis的初始值为auto

flex的初始值为0 1 auto。换句话说,如果需要重置flex属性的话,可以将其值设置为none。它的实际语法是:

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

在Flexbox布局模块中,flex是一个复杂的属性,从上面的语法规则上不难发现,flex属性可以指定 1个值(单值语法)2个值(双值语法)3个值(三值语法)

单值语法:值必须为以下其中之一:

  • 一个无单位的数(<number>,比如flex: 1,这个时候它会被当作<flex-grow>的值
  • 一个有效的宽度(width)值,比如flex: 30vw,这个时候它会被当作<flex-basis>的值
  • 关键词 noneautoinitial(即初始值

有关于initial更详细的介绍,可以阅读《图解CSS:CSS层叠和继承》一文。

双值语法:第一个值必须为一个无单位数值,并且它会被当作<flex-grow>的值;第二个值必须为以下之一:

  • 一个无单位的数(<number>,它会被当作<flex-shrink>的值
  • 一个有效的宽度(width)值,它会被当作<flex-basis>的值

比如:

flex: 1 2 » <flex-grow> <flex-shrink> » flex-grow: 1; flex-shrink: 2
flex: 2 30vw » <flex-grow> <flex-basis> » flex-grow: 2; flex-basis: 30vw

三值语法

  • 第一个值必须是一个无单位数(<number>,并且它会被当作<flex-grow>的值
  • 第二个值必须是一个无单位数(<number>,并且它会被当作<flex-shrink>的值
  • 第三个值必须为一个有效的宽度(width)值,并且它会被当作<flex-basis>的值

比如:

flex: 1 2 30vw » <flex-grow> <flex-shrink> <flex-basis> 
//等效于
flex-grow: 1;
flex-shrink: 2;
flex-basis: 30vw;

综合上述,flex属性的取值可以是:

  • auto:Flex项目会根据自身的widthheight来确定尺寸,但Flex项目根据Flex容器剩余空间进行伸缩。其相当于flex: 1 1 auto
  • initial:Flex项目会根据自身的widthheight来设置尺寸。它会缩短自身以适应Flex容器,但不会伸长并吸收Flex容器中的额外剩余空间来适应Flex容器。其相当于flex: 0 1 auto
  • none:Flex项目会根据自身的widthheight来设置尺寸。它是完全非弹性的(既不会缩短,也不会伸长来适应Flex容器)。其相当于flex: 0 0 auto
  • <flex-grow>:定义Flex项目的flex-grow属性,取值为<number>
  • <flex-shrink>:定义Flex项目的flex-shrink属性,取值为<number>
  • <flex-basis>:定义Flex项目的flex-basis属性。若值为0,则必须加上单位,以免被视作伸缩性

在大多数情况下,开发者需要将flex设置为autoinitialnone或一个无单位的正整数。比如下面这个示例,你可以尝试着调整Flex容器的大小,来观察flex取这些值的差异:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-flexbox-layout-model-part2.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部