⽤flex布局实现左右两边对齐有这样的需求,⽂字左对齐,button右对齐。我们就可以⽤flex布局很好的实现此需求。
代码如下:
<html>
<head>
<style type="text/css">
.wrapper{
width: 600px;
border: 2px solid green;
display: flex;
flex-wrap: wrap;
justify-content: flex-end
}
.item1{
width: 600px;
height: 30px;
background-color: #00CAFF;
}
.item2{
width: 200px;
height: 30px;
background-color: #00a9a7;
}
.item3{
width: 600px;flex布局对齐方式
height: 30px;
}
.item3_1{
width: 200px;
height: 30px;
background-color: #9900CC;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3">
<div class="item3_1"></div>
</div>
</div>
<script>
</script>
</body>
</html>
关键的css代码如下:
display: flex;
flex-wrap: wrap; //单独成⾏或列
justify-content: flex-end //项⽬位于容器的结尾。
在项⽬没有占满⼀⾏,⽽且要左对齐的时候,我们⽤Div进⾏包裹就可以了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论