理解Flexbox弹性盒子

2018-06-24 01:36:15来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档

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

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


 

2.Flex容器属性

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

flex-direction: row || column || row-reverse || column-reverse;

 

flex-wrap: wrap || nowrap || wrap-reverse;

 

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

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

ul {
    flex-flow: row wrap;
}

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

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

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两个属性之间的不同之处。

align-content

还记得前面讨论的wrap属性吗?我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。

align-content属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式,排列效果和align-items值一样,但除了baseline属性值。

align-items属性一样,它的默认值是stretch。你现在应该熟悉这些值。那它又是如何影响Flex容器里的10个Flex项目多行排列方式。


 

3.Flex项目属性

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

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

默认情况,Flex项目的初始宽度由flex-basis的默认值决定,即:flex-basis: auto。Flex项目宽度的计算是基于内容的多少来自动计算(很明显,加上了padding值)。

flex速记

flexflex-growflex-shrinkflex-basis三个属性的速记(简写)。

注意它们之间的顺序。flex-grow第一,然后是flex-shrink,最后是flex-basis。缩写成GSB,可以帮助你更好的记忆。

如果flex属性值中少一个值,会发生什么呢?

如果你只设置了flex-growflex-shrink值,flex-basis可能是默认值0。这就是所谓的绝对flex项目。只有当你设置了flex-basis,你会得到一个相对flex项目。

flex: 0 1 auto

li {
    flex: 0 1 auto;
}

这相当于写了flex默认属性值以及所有的Flex项目都是默认行为。

flex: 0 0 auto

li {
    flex: 0 0 auto;
}

这个相当于flex: none

还是老规矩:宽度是被自动计算,不过弹性项目不会伸展或者收缩(因为二者都被设置为零)。伸展和收缩开关都被关掉了。

它基本上是一个固定宽度的元素,其初始宽度是基于弹性项目中内容大小。

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 值的比例来计算。

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

这里有两个弹性项目。一个的 flex-grow 属性值是 1,另一个是 2,那么会出现啥情况呢?

两个项目上的伸展开关都打开了。不过,伸展度是不同的,1 和 2

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

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

绝对和相对Flex项目

一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中,只根据 flex 属性来计算,而不是内容。

绝对Flex项目的宽度只基于 flex 属性,而相对Flex项目的宽度基于内容大小

align-self

align-self 属性更进一步让我们更好地控制弹性项目。

你已经看到 align-items 属性是如何有助于整体对齐弹性容器内的所有弹性项目了。

如果想改变一个弹性项目沿着侧轴的位置,而不影响相邻的弹性项目,该怎么办呢?

这是 align-self 属性大展拳脚的地方了。

该属性的取值可以是这些值之一:auto || flex-start || flex-end || center || baseline || stretch

Auto-margin 对齐

当在Flex项目上使用 margin: auto 时,值为 auto 的方向(左、右或者二者都是)会占据所有剩余空间


解决嵌套中的flex容器的占用空间比例问题

一定有办法让所有这些放在一行,每个段落占据该行相等空间。用Flexbox来搞定!这里的概念与很多栅格系统中用的一样。

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

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

看到段落会发生什么了吗?

flex: 0 0 25%;

“不要伸展或者收缩,不过每个段落应该占据 25% 的可用空间” 。段落所占空间是相等的。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS编写规范

下一篇:CSS3-loading动画(一)