1、效果展示
2、布局与样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试弹性盒子</title>
</head>
<body>
<div class="out-parent">
<div class="left">
<div style="margin: auto">左侧固定180px</div>
</div>
<div class="middle">
<div style="margin: auto">中间固定伸缩</div>
</div>
<div class="right">
<div style="margin: auto">右侧固定150px</div>
</div>
</div>
</body>
<style>
/**将父容器作为一个弹性盒子，左中右弹性布局*/
.out-parent {
display: flex;
background: aquamarine;
width: 100%;
height: 200px;
}
/** display: flex; justify-items: center; align-items: center; 将左侧div仍然看做一个盒子，内部弹性布局 */
.left {
flex: 0 0 180px;
background: cadetblue;
height: 100%;
text-align: center;
display: flex;
justify-items: center;
align-items: center;
}
.middle {
flex: 1;
background: darkmagenta;
height: 100%;
text-align: center;
display: flex;
justify-items: center;
align-items: center;
}
.right {
flex: 0 0 150px;
background: coral;
height: 100%;
text-align: center;
display: flex;
justify-items: center;
align-items: center;
}
</style>
</html>
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
