flex属性实战解读

2019-07-13178次阅读flexbox

flex是Flex项目属性是flex-grow、flex-shrink和flex-basis属性的简写。关于Flexbox弹性布局推荐阅读:拥抱Flexbox弹性布局基本概念之Flex容器拥抱Flexbox弹性布局基本概念之Flex项目

我们开始,假设您希望将图像和一些文本彼此对齐,如下所示:

.container { 
  display: flex; 
}

img { 
  width: 50px;
  margin-right: 20px; 
}

Chrome浏览中没毛病,但在firefox浏览中图像宽度值并不像我们想像中的宽度。

您可能意识到需要使用flex-shrink属性来告诉flex项不要减小大小,不管它们是否有宽度。所有我们需要将image元素flex-shrink弹性收缩设置为0。

.container {
  font-family: Helvetica, sans-serif;
  display: flex;
  max-width: 500px;
}

img {
  width: 50px;
  margin-right: 20px;
  flex-shrink: 0;
}

进一步优化使用flex属性

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

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

flex-grow

  • 用来指定Flex项目相对Flex容器空间的放大比例。
  • 其值可以是0或者大于0的任何正数。
  • 默认值:0(表示Flex项目不会自动填充Flex容器可用空间)。

flex-shrink

  • 控制Flex项目相对Flex容器没有额外空间时如何缩小,其收缩的大小是依据flex-shrink的值来确定。
  • 默认情况下,所有Flex项目都可以收缩,但如果将它们设置为0时,他们不会缩小会保持原来的大小。
  • 默认值:1(Flex项目在必要时会缩小)。

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-shrink值设置为0和flex-basis设置为图像的默认宽度值,这样我们就可以省略掉图像的width属性

.container {
  font-family: Helvetica, sans-serif;
  display: flex;
  max-width: 500px;
}

img {
  flex: 0 0 50px;
  margin-right: 20px;
}


另一个例子

构建一个导航组件,让用户可以左右滚动多个项目。

nav {
  margin-bottom: 20px;
  width: 600px;
  display: flex;
  overflow-x: scroll;
  font-size: 18px;
}

a {
  color: black;
  text-decoration: none;
  padding: 10px 20px;
  border-bottom: 2px solid #ddd;
  &:hover {
    color: red;
  }
}

结果是这样的:

发现导航项目中有一个项目内容出现多行,此时您会很自然地想到给导航中的每个项目设置flex-shrink属性为0告诉项目不缩小:

.shrink a {
  flex-shrink: 0;
}

进一步优化使用flex属性

这次flex-shrink设置为0,那么flex-basis设置为什么呢,auto。flex-basis默认值就是auto(初始宽度计算是基于内容的大小)。

.shrink a {
  flex: 0 0 auto;
}

 

上一篇: JavaScript函数闭包  下一篇: IE6-IE9不支持table.innerHTML的解决方法  

flex属性实战解读相关文章