本篇内容主要讲解“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在布局中的应用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。