【CSS】flex布局实际运用及理解

最近项目中经常这种布局，如下图所示：

1高度固定，2高度不确定，根据内容变化，3撑满可视区剩下高度。

【CSS】flex布局实际运用及理解

这里我们可以用flex布局。

先给父元素加上：

display: flex;
flex-direction: column;

高度撑满的3元素加上：

flex: 1;  /* auto也可以 */

完整布局代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="item1">
        我是固定高度
    </div>
    <div class="item2">
        我高度不确定
    </div>
    <div class="item3">
        <ul>
            <li>aaaaa</li>
            <li>sdsdad</li>
            <li>fdsfs</li>
            <li>dfsf</li>
            <li>dsss</li>
        </ul>
    </div>
</div>
</body>
</html>
<style>
    body{
        margin: 0;
    }
    .container{
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }
    .item1{
        height: 50px;
        background: #ffbb33;
    }
    .item2{
        background: antiquewhite;
    }
    .item3{
        flex: 1;  /* auto也可以 */
        background: brown;
        overflow-y: auto;
    }
</style>

接下来我们来理解一下核心代码：

flex-direction: column; 决定元素的排列方向。从上到下排列

flex: 1; 接下来我们看看flex属性：

flex属性

这里flex是一个复合属性，是 flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item{
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值： auto（1 1 auto）和none（0 0 auto）

flex-grow 属性定义属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该元素将缩小。

flex-basis 属性定义了在分配多余空间之前，元素占据的主轴空间。

flex是flex-grow， flex-shrink 和 flex-basis的复合属性，flex-grow设为1表示该元素等分剩余空间，因为只有一个子元素设置了这个，该元素就会撑满剩余空间，这个是解决高度不够时撑满剩下空间。flex-shrink: 1是空间不足时，该元素会缩小，这个解决当该元素内容高度过高时撑满剩余空间。flex-basis: 0%是在分配多余空间之前，该元素占据的主轴空间。设为0%或者auto都能实现这个效果。所以flex: 1和flex: auto都能实现这个效果。

【CSS】flex布局实际运用及理解

flex属性

相关推荐