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

最新推荐文章于 2024-07-31 14:00:57 发布

面壁思过程

最新推荐文章于 2024-07-31 14:00:57 发布

阅读量293

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/candy_mi/article/details/120543182

版权

html+css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文探讨了在Flex布局下，如何使子元素在垂直方向上实现两端对齐，并保持子元素宽度自适应。问题在于子元素在设置为`justify-content: space-between`时，默认宽度变为100%。解决方案是添加`align-items: flex-start`到父元素样式，同时调整子元素的宽度，以确保子元素能根据自身内容宽度适应。这允许子元素在保持高度不变的同时，宽度能正确显示。

摘要由CSDN通过智能技术生成

问题一: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;
  }
}