CSS弹性盒模型flex在布局中的应用
本篇内容主要讲解“CSS弹性盒模型flex在布局中的应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS弹性盒模型flex在布局中的应用”吧!
元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
JavaScript Code复制内容到剪贴板
<style>
.parent{
display: flex;
justify-content: center;
align-items: center;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey; height: 100px; width: 200px;">
<div class="in" style="background-color: lightblue;">DEMO</div>
</div>
【2】在伸缩项目上使用margin:auto
CSS Code复制内容到剪贴板
<style>
.parent{
display: flex;
}
.in{
margin: auto;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;">
<div class="in" style="background-color: lightblue;">DEMO</div>
</div>
两端对齐
CSS Code复制内容到剪贴板
<style>
.parent{
display: flex;
justify-content:space-between
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;">
<div class="in" style="background-color: lightblue;">DEMO</div>
<div class="in" style="background-color: lightgreen;">DEMO</div>
<div class="in" style="background-color: lightcyan;">DEMO</div>
<div class="in" style="background-color: lightseagreen;">DEMO</div>
</div>
底端对齐
CSS Code复制内容到剪贴板
<style>
.parent{
display: flex;
align-items: flex-end;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;">
<div class="in" style="background-color: lightblue; height:20px;">DEMO</div>
<div class="in" style="background-color: lightgreen; height:30px;">DEMO</div>
<div class="in" style="background-color: lightcyan; height:40px;">DEMO</div>
<div class="in" style="background-color: lightseagreen; height:50px;">DEMO</div>
</div>
输入框按钮
CSS Code复制内容到剪贴板
<style>
.inputBox{
display: flex;
width: 250px;
}
.inputBox-ipt{
flex: 1;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="inputBox">
<input class="inputBox-ipt">
<button class="inputBox-btn">按钮</button>
</div>
等分布局
CSS Code复制内容到剪贴板
<style>
body,p{margin: 0;}
.parent{
display: flex;
}
.child{
flex:1;
height: 100px;
}
.child + .child{
margin-left: 20px;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;">
<div class="child" style="background-color: lightblue;">1</div>
<div class="child" style="background-color: lightgreen;">2</div>
<div class="child" style="background-color: lightsalmon;">3</div>
<div class="child" style="background-color: pink;">4</div>
</div>
多列自适应布局
CSS Code复制内容到剪贴板
<style>
p{margin: 0;}
.parent{display: flex;}
.left,.center{margin-right: 20px;}
.rightright{flex: 1;}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
悬挂布局
CSS Code复制内容到剪贴板
<style>
.box{
display: flex;
background-color: lightgrey;
width: 300px;
}
.left{
margin-right: 20px;
background-color: lightblue;
height: 30px;
}
.main{
flex:1;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="box">
<div class="left">左侧悬挂</div>
<div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>
</div>
全屏布局
CSS Code复制内容到剪贴板
<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.parent{
display: flex;
flex-direction: column;
}
.top,.bottombottom{
height: 50px;
}
.middle{
display: flex;
flex: 1;
}
.left{
width: 100px;
margin-right: 20px;
}
.rightright{
flex: 1;
overflow: auto;
}
.rightright-in{
height: 1000px;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" id="parent" style="background-color: lightgrey;">
<div class="top" style="background-color: lightblue;">
<p>top</p>
</div>
<div class="middle" style="background-color: pink;">
<div class="left" style="background-color: orange;">
<p>left</p>
</div>
<div class="right" style="background-color: lightsalmon;">
<div class="right-in">
<p>right</p>
</div>
</div>
</div>
<div class="bottom" style="background-color: lightgreen;">
<p>bottom</p>
</div>
</div>
到此，相信大家对“CSS弹性盒模型flex在布局中的应用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
