html - flex布局多个子元素如何既有左对齐也有右对齐
本文介绍了html - flex布局多个子元素如何既有左对齐也有右对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我需要在一个flexbox下面放置多个子项目，默认情况下都是居左放置的,但需要改变某一个或者多个子项目的属性，放他们可以居右对齐，或者居中，实现多个项目既有左对齐也有右对齐的效果。如下图，1，4左对齐，2右对齐，3居中。求指教。
<div class="flex-box">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">3</div>
</div>
解决方案
写了个例子?，宽度我是写死的，你可以根据需求自己定义宽度：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
width: 800px;
margin: 0 auto;
padding: 20px;
border: 1px solid #000;
}
.flex-box {
display: flex;
justify-content: space-between;
}
.flex-item {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.center {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-box">
<div class="flex-box flex-item">
<div class="flex-item">1</div>
<div class="flex-item">4</div>
</div>
<div class="flex-item center">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>效果截图：
这篇关于html - flex布局多个子元素如何既有左对齐也有右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
