极客笔记HTML如何使用Flexbox来实现一个元素居中，而另一个元素靠左或靠右对齐的布局方式
参考： Center one and right/left align other flexbox element in HTML
在HTML中使用Flexbox布局是一种非常强大且灵活的方式来创建响应式和整洁的网页布局。Flexbox允许我们轻松地对齐和分布容器内的元素，无论容器的大小如何变化。本文将详细介绍如何使用Flexbox来实现一个元素居中，而另一个元素靠左或靠右对齐的布局方式。
Flexbox基础
Flexbox（Flexible Box）布局提供了一种更有效的方式来布置、对齐和分配容器内项目的空间，即使它们的大小未知或是动态变化的。Flexbox布局主要包括两种类型的元素：容器（flex container）和项目（flex items）。
容器的属性包括：
– display: flex 或 display: inline-flex
– flex-direction（决定主轴方向）
– justify-content（沿主轴的对齐方式）
– align-items（沿交叉轴的对齐方式）
– flex-wrap（是否换行）
项目的属性包括：
– flex-grow
– flex-shrink
– flex-basis
实现元素居中与另一元素靠左/右对齐
示例1: 一个元素居中，另一个元素靠左对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.center {
flex: 1;
text-align: center;
}
.left {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">how2html.com</div>
<div class="center">Centered Content</div>
</div>
</body>
</html>
Output:
示例2: 一个元素居中，另一个元素靠右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.center {
flex: 1;
text-align: center;
}
.right {
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<div class="center">Centered Content</div>
<div class="right">how2html.com</div>
</div>
</body>
</html>
Output:
示例3: 使用margin:auto实现居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
height: 100vh;
}
.center {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="center">how2html.com</div>
</div>
</body>
</html>
Output:
示例4: 结合使用flex-grow和flex-shrink进行灵活布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.center {
flex-grow: 1;
flex-shrink: 1;
text-align: center;
}
.left {
flex-grow: 0;
flex-shrink: 0;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">how2html.com</div>
<div class="center">Centered Content</div>
</div>
</body>
</html>
Output:
示例5: 使用flex-basis指定基本大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.center {
flex-basis: 50%;
text-align: center;
}
.right {
flex-basis: 100px;
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<div class="center">Centered Content</div>
<div class="right">how2html.com</div>
</div>
</body>
</html>
Output:
示例6: 使用order属性改变元素顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
height: 100vh;
}
.center {
order: 2;
flex: 1;
text-align: center;
}
.left {
order: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="left">how2html.com</div>
<div class="center">Centered Content</div>
</div>
</body>
</html>
Output:
示例7: 使用align-self调整单个项目的对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
align-items: flex-start;
height: 100vh;
}
.center {
align-self: center;
flex: 1;
text-align: center;
}
.left {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">how2html.com</div>
<div class="center">Centered Content</div>
</div>
</body>
</html>
Output:
示例8: 结合使用flex-wrap和align-content进行多行对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 100vh;
}
.center {
flex: 1;
text-align: center;
}
.left {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">how2html.com</div>
<div class="center">Centered Content</div>
</div>
</body>
</html>
Output:
示例9: 使用flex-flow简写属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.center {
flex: 1;
text-align: center;
}
.right {
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<div class="center">Centered Content</div>
<div class="right">how2html.com</div>
</div>
</body>
</html>
Output:
示例10: 使用flex简写属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.center {
flex: 1 1 auto;
text-align: center;
}
.left {
flex: 0 0 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">how2html.com</div>
<div class="center">Centered Content</div>
</div>
</body>
</html>
Output:
以上就是使用Flexbox在HTML中实现一个元素居中，另一个元素靠左或靠右对齐的一些示例。通过这些示例，我们可以看到Flexbox提供了一种非常灵活和强大的方式来创建复杂的布局。希望这些示例能够帮助你更好地理解和使用Flexbox。