【css】Flex之并列布局

最新推荐文章于 2024-04-08 21:43:02 发布

原创最新推荐文章于 2024-04-08 21:43:02 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

69 篇文章

订阅专栏

本文深入解析CSS Flex布局，详细讲解如何使用Flex属性实现高效、响应式的网页布局设计。通过实例，展示了Flex容器与Flex项的特性，如flex-grow、flex-shrink、flex-basis等，帮助读者掌握灵活的网页布局技巧。

<body>
    <div class="box blue">
        <div class="item green">1</div>
        <div class="item green">2</div>
        <div class="item green">3</div>
    </div>
</body>

.blue{
    background-color: lightskyblue;
}
.green{
    background-color:lightseagreen;
    height:150px;
    line-height: 150px;
    text-align: center;
    font-size:24px;
    border-radius:8%;
}
.box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item{
    flex: 0 1 150px;
    //flex:1 1 150px;
    margin:10px;
}

flex:0 1 150px
- flex-grow:0
  Flex项不放大，即使Flex容器空间足够
- flex-shrink:1
  Flex容器空间不足，Flex项将缩小以适应空间
- flex-basis:150px
  Flex项的初始宽度是150px

在这里插入图片描述

flex:1 1 150px
- flex-grow:1
  Flex容器空间有余，Flex项将放大以适应空间，因此Flex项始终会占满Flex容器
- flex-shrink:1
  Flex容器空间不足，Flex项将缩小以适应空间
- flex-basis:150px
  Flex项的初始宽度是150px

在这里插入图片描述