flex布局下的一些样式问题记录

问题一:flex布局下的子元素没法根据自身的高度自适应

下面这个布局，我希望子div能够垂直方向两端布局，但是box能够根据自身的div宽度自适应

以下面的方式布局结果发现宽度自己变成了100%

<div className="wrap">
    <div className="box">dsss</div>
    <div className="box2">fffffg</div>
</div>


.wrap {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .box {
    height: 100px;
    background-color: pink;
  }
  .box2{
    height: 100px;
    background-color: purple;
  }
}

 

解决方案就是给父元素增加一个属性 align-items: flex-start;

.wrap {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  .box {
    height: 100px;
    background-color: pink;
  }
  .box2{
    width: 100%;
    height: 100px;
    background-color: purple;
  }
}