flex中不常用的属性

stretch的用法

• 当子元素没有在交叉轴设置对应长度时，使得子元素在交叉轴呈现拉伸效果

<div class="container">
    <div class="demo">demo</div>
</div>

.container {
  height: 200px;
  width: 200px;
  background-color: royalblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo {
  padding: 10px;
  width: 100px;
  background-color: salmon;
}

.demo:hover {
  align-self: stretch;
}

align-content

• 多条轴线时元素在交叉轴的对齐方式，如果项目只有一根轴线，该属性不起作用，相当于把每条主轴线看作一个整体元素，对每条轴线元素进行排列（配合flex-wrap: wrap）

<div class="container">
    <div class="demo">demo</div>
    <div class="demo">demo</div>
</div>

.container {
    height: 100px;
    width: 200px;
    background-color: royalblue;
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    align-content: flex-end;
}

.demo {
    height: 20px;
    width: 110px;
    background-color: salmon;
}