CSS＜4＞

目录

过渡

transition缩写

flexbox 

display:flex

justify-content 

align-items 

flex-grow 

flex-shrink 

flex-basis

flex

过渡

transition-property:声明要转换的属性

transition-duration: 转换持续的时间

transition-timing-function：描述转换的速度

• ease-默认值，开始缓慢过渡，中间加速，结束时再次减速
• ease-in— 启动缓慢、加速迅速、突然停止
• ease-out- 突然开始，减速，并缓慢结束
• ease-in-out——开始慢，中间快，结束慢
• linear— 始终保持匀速

transition-delay:指定开始转换之前要等待的时间(值为时间量，0s表示没有延迟)

transition缩写

顺序transition-property, transition-duration,

        transition-timing-function, transition-delay

transition: color 1.5s linear 0.5s;

• 省略其中一个属性会导致应用该属性的默认值。
• 如果要定义延迟，则必须设置持续时间。由于两者都是时间值，浏览器总是将它看到的第一个时间值解释为持续时间。

transition-<property>可同时转换多种属性

transition: width 750ms ease-in 200ms, 
              left 500ms ease-out 450ms,
              font-size 950ms linear;

transition-property值可设置为all。

all意味着每个更改的值都将以相同的方式进行转换。您可以使用all单独的转换属性或速记语法。

transition: all 1.5s linear 0.5s;

flexbox 

display:flex

任何元素都可以是弹性容器。Flex 容器是创建响应屏幕尺寸变化的网站的有用工具。弹性容器的子元素将根据其父容器的大小和位置改变大小和位置。

要使元素成为弹性容器，它的display属性必须设置为flex。

div.container {
  display: flex;
}

当我们将display属性的值更改为 时inline-flex，如果页面足够宽，则 div 将彼此内联显示。

.container {
  width: 150px;
  display:inline-flex;
  border: 1px solid grey;
}

flex: 

 inline-flex:

justify-content 

实现从左到右定位项目

常用值

• flex-start— 所有项目将按顺序放置，从父容器的左侧开始，它们之间或之前没有额外的空间。
• flex-end- 所有项目将按顺序放置，最后一个项目从父容器的右侧开始，它们之间或之后没有额外的空间。
• center— 所有项目将按顺序放置在父容器的中心，在它们之前、之间或之后没有额外的空间。
• space-around— 项目将在每个项目之前和之后以相等的空间定位，从而使元素之间的空间增加一倍。
• space-between— 项目将在它们之间以相等的间距定位，但在第一个元素之前或最后一个元素之后没有额外的空间。

 

 

align-items 

实现容器内垂直对齐。

可选值

• flex-start— 所有元素都将位于父容器的顶部。
• flex-end— 所有元素都将位于父容器的底部。
• center— 所有元素的中心将位于父容器的顶部和底部之间。
• baseline— 所有项目内容的底部将相互对齐。
• stretch— 如果可能，项目将从容器的顶部到底部拉伸（这是默认值；具有指定高度的元素不会拉伸；具有最小高度或没有指定高度的元素将拉伸）。

 

 

 

flex-grow 

该属性允许我们指定项目是否应该增长以填充容器，以及哪些项目应该比其他项目按比例增长更多或更少。

<div class='container'>
  <div class='side'>
    <h1>I’m on the side of the flex container!</h1>
  </div>
  <div class='center'>
    <h1>I'm in the center of the flex container!</h1>
  </div>
  <div class='side'>
    <h1>I'm on the other side of the flex container!</h1>
  </div>
</div>

.container {
  display: flex;
}
 
.side {
  width: 100px;
  flex-grow: 1;
}
 
.center {
  width: 100px;
  flex-grow: 2;
}

 

• 在上面的示例中，.containerdiv 的display值为flex，因此它的三个子 div 将彼此相邻放置。如果.containerdiv 中有额外的空间（在这种情况下，如果它比 300 像素宽），弹性项目将增长以填充它。div的.center拉伸量是 div 的两倍.side。例如，如果有 60 个额外的空间像素，则centerdiv 将吸收 30 个像素，而side每个 div 将吸收 15 个像素。
• 如果max-width为一个元素设置了a，即使它有更多的空间可以吸收，它也不会变得更大。

flex-shrink 

• 可用于指定哪些元素将收缩以及按什么比例收缩。
• 当 flex 容器太小时，flex 项会缩小，即使我们没有声明该属性。这是因为 的默认值为1。但是，除非声明了属性，否则弹性项目不会增长，因为默认flex-grow值为0。
• 最小和最大宽度将优先于flex-grow和flex-shrink。与flex-grow,一样，flex-shrink只有在父容器太小或浏览器调整时才会使用。

<div class='container'>
  <div class='side'>
    <h1>I'm on the side of the flex container!</h1>
  </div>
  <div class='center'>
    <h1>I'm in the center of the flex container!</h1>
  </div>
  <div class='side'>
    <h1>I'm on the other side of the flex container!</h1>
  </div>
</div>

.container {
  display: flex;
}
 
.side {
  width: 100px;
  flex-shrink: 1;
}
 
.center {
  width: 100px;
  flex-shrink: 2;
}

flex-basis

flex-basis允许我们在拉伸或收缩之前指定项目的宽度 。

.side {
  flex-grow: 1;
  flex-basis: 100px;
}
 

flex

可按此顺序简写 ：flex-grow   flex-shrink   flex-basis（无法仅设置flex-shrink和flex-basis使用 2 个值）

.big {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 150px;
}
 
.small {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 100px;
}

可缩写为

.big {
  flex: 2 1 150px;
}
 
.small {
  flex: 1 2 100px;
}