css之Flex布局(二)

最新推荐文章于 2024-07-31 12:16:44 发布

CruellyJohn

最新推荐文章于 2024-07-31 12:16:44 发布

阅读量2.3k

点赞数

分类专栏： css 文章标签： css之flexBox布局 css之flex布局 flex布局之项目的属性

本文链接：https://blog.csdn.net/qq_40421277/article/details/81545752

版权

本文详细介绍了Flex布局中项目（flex-item）的属性，包括order、flex-grow、flex-shrink、flex-basis、flex和align-self。通过实例解析了这些属性如何影响布局的放大和缩小，强调了临界值的重要性和比例分配的概念。

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

flex布局(二)之flex-item的属性

前言：这里的flex-item的属性是指Flex容器中项目div的属性

继上篇讲了flex布局的容器的六大css属性，这次来说说容器中的项目（flex-item）的六大css属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

在下面的代码实例中，为了更直观的看属性的解析。不会在代码中给每个div设置宽高度。但是这个步骤在实际代码中是必须的！ 假设每个flex-item的宽高都为200px

order属性

根据对每个flex-item规定的order值的大小进行比较，各个flex-item将从小到大进行重新排列。对于没有设置order属性的flex-item，默认order为0

...
<style>
    .contain{
        display:flex;
        flex-direction:row;
    }
    .flex-item1{
        order:2;
    }
    .flex-item2{
        order:1;
    }
    .flex-item3{
        order:3;
    }
</style>
<div class="contain">
    <div class="flex-item1">1</div>
    <div class="flex-item2">2</div>
    <div class="flex-item3">3</div>
</div><