拥抱Flexbox弹性布局基本概念之Flex项目

2019-05-1696次阅读flexbox

上一篇介绍了Flex容器属性,本文将继续学习Flex项目属性。同样极力推荐阅读英文版

 

Flex项目属性

order

允许Flex项目在一个Flex容器中不需要修改HTML源代码就可以从一个位置移动到另一个位置。

li:first-child{
    order:1;
}

  • order属性的默认值是0,它可以接受一个正值,也可以接受一个负值;

  • order值会从底到高重新排序;

  • 当两个Flex项目具有相同的order值呢?建议你不妨亲自去试试

flex-grow

flex-grow属性用来指定Flex项目相对Flex容器空间的放大比例。

flex-grow其值可以是0或者大于0的任何正数。

默认值:0(表示Flex项目不会自动填充Flex容器可用空间)。

li{
    width:100px;
    height:100px;
    background-color:#f60;
    color:#fff;
    margin:8px;
    flex-grow:1;
}

上面例子中Flex容器里只有一个Flex项目,给Flex项目设置flex-grow:1就会自动填充整个Flex容器。

li:nth-child(1){
    flex-grow:3;
}
li:nth-child(2){
    flex-grow:1;
}

上面例子中Flex容器里有两个Flex项目,给第一个Flex项目设置了占用Flex容器里3/4的空间,第二个Flex项目设置了占用Flex容器里1/4的空间。(此例也解释了flex-grow其值可以是0或者大于0的任何正数的由来

注意:Flex项目上显示设置的主轴长度属性(width或height属性)会被忽略,从这里可以看出flex-grow比主轴长度属性的优先级要高。

flex-shrink

flex-shrink属性控制Flex项目相对Flex容器没有额外空间时如何缩小,其收缩的大小是依据flex-shrink的值来确定。

默认情况下,所有Flex项目都可以收缩,但如果将它们设置为0时,他们不会缩小会保持原来的大小。

默认值:1(Flex项目在必要时会缩小)。

li{
    width:500px;
    height:100px;
    background-color:#f60;
    color:#fff;
    margin:8px;
    flex-grow:1;
    flex-shrink:1;
}

flex-grow和flex-shrink结合使用就可以实现,随着浏览器放大,缩小会自动缩放的弹性布局。个人认为这就是Flex弹性、弹性、弹性盒子的由来。

flex-basis

flex-basis属性可以指定Flex项目的初始大小。也就是flex-grow和flex-shrink属性调整它的大小以适应Flex容器之前的Flex项目大小。

flex-basis属性值比主轴长度属性值优先级高:

  • flex-direction:row时,flex-basis属性作用与width属性相同,但比width优先级要高;

  • flex-direction:column时,flex-basis属性作用与height属性相同,但比height优先级要高;

flex-basis可以取任何用于主轴长度属性的任何值。比如 % || em || rem || px等。重点一定要加单位,即flex-basis: 0px不能写成flex-basis:0。

默认值:auto(初始宽度计算是基于内容的大小)。

flex

这个属性是flex-grow、flex-shrink和flex-basis属性的简写。

flex: 0 1 auto

这是flex的默认值。

li{
  padding:8px;
  flex: 0 1 auto;
}

  • flex-grow设置为0,不会默认填充整个Flex容器;

  • flex-shrink的值是1,Flex项目相对Flex容器没有额外空间时,Flex项目会自动缩小;

  • flex-basis: auto,基于内容的多少来自动计算Flex项目的主轴长度属性(width或height属性);

flex: 0 0 auto;

也可以简写为flex:none;

li{
  padding:8px;
  flex: 0 0 auto;
}

  • flex-grow设置为0,不会默认填充整个Flex容器;

  • flex-shrink的值是0,Flex项目相对Flex容器没有额外空间时,Flex项目不会自动缩小,会撑出Flex容器出现滚动条;

  • flex-basis: auto,基于内容的多少来自动计算Flex项目的主轴长度属性(width或height属性);

flex: 1 1 auto;

也可以简写为flex:auto;

li{
  width:800px;
  flex: 1 1 auto;
}

  • flex-grow设置为1,会自动填充整个Flex容器,会直接忽略主轴长度属性

  • flex-shrink的值是1,Flex项目相对Flex容器没有额外空间时,Flex项目会自动缩小;

  • flex-basis: auto,基于内容的多少来自动计算Flex项目的主轴长度属性(width或height属性),但 flex-grow是1自动填充整个Flex容器;

flex: "positive number"(正数)

flex属性是flex-grow、flex-shrink和flex-basis属性的简写。

  • flex-grow属性用来指定Flex项目相对Flex容器空间的放大比例,其值可以是0或者大于0的任何正数,默认值为0不放大。

  • flex-shrink属性控制Flex项目相对Flex容器没有额外空间时如何缩小,其值可以是0或者大于0的任何正数,默认值为1会缩放。

  • flex-basis属性指定Flex项目的初始大小,默认值为auto,基于Flex项目内容的多少来自动计算大小。

当flex是一个正数时,个人认为这个正数可以理解为就是flex-grow的值,但flex-basis的值不是默认值auto了而是0,那么这个时候的Flex项目如何计算呢?对的,是根据flex-grow值的比例来计算。

li:nth-child(1){
    flex:1;
}
/*相当于
li:nth-child(1){
    flex:1 1 0;
}*/

li:nth-child(2){
    flex:2;
}
/*相当于
li:nth-child(2){
    flex:2 1 0;
}*/

flex-shrink的值是1,Flex项目相对Flex容器没有额外空间时会自动缩小;

flex-basis: 0,Flex项目主轴长度属性值为零,flex-grow值就起到决定Flex项目主轴长度属性的作用

上图第一个LI元素占了整个Flex容器1/3的空间,第二个LI元素占了整个Flex容器2/3的空间。

align-self

align-items是Flex容器属性,是针对Flex容器下所有Flex项目在侧轴(Cross-Axis)上的对齐方式。

align-self是Flex项目属性,它可以指定单个flex项目的对齐方式。

align-self取值为auto值时,flex项目对齐方式会根据其父元素align-items来决定。

li:nth-child(1) {
  /*align-self:auto;
  align-self:flex-start;
  align-self:flex-end;
  align-self:center;
  align-self:baseline;
  align-self:stretch;*/
}

给第一个LI元素设置不同的值,效果如下图:

默认值:auto。

上一篇: css中appearance:none修改select option样式  下一篇: chrome浏览器不支持audio和video标签的autoplay自动播放解决方案  

拥抱Flexbox弹性布局基本概念之Flex项目相关文章