flex补充

最新推荐文章于 2024-10-04 22:03:04 发布

m0_55629766

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量77

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_55629766/article/details/115165488

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了在CSS Flex布局中，当子元素宽度超过父元素时，如何按比例分配空间，以及align-items属性如何处理子元素高度超过父元素的情况。通过实例展示了flex-direction和justify-content如何影响子元素的宽度分配，同时解释了flex属性让子元素均分父元素宽度的原理。

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

flex-direction / justify-content 若子元素设置的宽超过母元素设置的宽，则子元素间会按比例分摊母元素的宽

<style>
.container{
    height: 302px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    border: 1px solid black;
    flex-direction: column;
}
.content1{
    width: 100px;
    height: 100px;
    background-color: pink;
    border: inherit;
}
.content2{
    width: 50px;
    height: 200px;
    background-color:pink;
    border: inherit;
}
.content3{
    width: 50px;
    height: 500px;
    background-color: pink;
    border:inherit;
}
</style>
<body>
  <div class="container">
     <div class="content1">1</div>
     <div class="content2">2</div>
     <div class="content3">3</div>
  </div>
</body>

若子元素设置的宽（高）超过母元素设置的宽（高），则子元素间会按比例分摊母元素的宽（高）

align-items 若子元素设置的高超过母元素设置的高，则子元素会覆盖掉母元素
flex直接子元素均分母元素的宽

<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}
.item1 {
    flex: 3;
}
.item2 {
    flex: 1;
}
.item3 {
    flex: 1;
}
</style>
<body>
   <div class="flex-container">
          <div class="flex-item item1">flex item 1</div>
          <div class="flex-item item2">flex item 2</div>
          <div class="flex-item item3">flex item 3</div>  
   </div>
</body>