flex基础

最新推荐文章于 2024-07-08 10:37:02 发布

gosolo_

最新推荐文章于 2024-07-08 10:37:02 发布

阅读量323

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/gufudhn/article/details/116520882

版权

本文详细介绍了Flex布局的基础概念，包括flex-basis、flex-direction、flex-wrap、flex-grow和flex-shrink属性的用法，并通过实例解析了元素如何根据空间调整大小。通过学习，你可以掌握如何设置弹性盒元素的伸缩基准、方向、排列方式以及收缩规则。

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

flex:1;
让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：
设置第二个弹性盒元素的初始长度为 80 像素：

<style>
    #main{
    
        width: 220px;
        height: 300px;
        border: 1px solid black;
        display: flex;
    }

    #main div{
    
        flex: 1;
    }

</style>
<body>
    <div id="main">
        <div style="background-color:coral;">红色</div>
        <div style="background-color:lightblue;">蓝色</div>  
        <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
      </div>
</body>

在这里插入图片描述

flex-basis
flex-basis 属性用于设置或检索弹性盒伸缩基准值。。

<style>
    #main {
    
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    
    -webkit-flex-grow: 0; /* Safari 6.1+ */
    -webkit-flex-shrink: 0; /* Safari 6.1+ */
    -webkit-flex-basis: 40px; /* Safari 6.1+ */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 40px;
}

#main div:nth-of-type(2) {
    
    -webkit-flex-basis: 80px; /* Safari 6.1+ */
    flex-basis: 80px;
}

</style>
<body>
    <div id="main">
        <div style="background-color:coral;"></div>
        <div style="background-color:lightblue;"></div>
        <div style="background-color:khaki