当前位置：极客教程 > HTML > HTML 问答 > 在HTML中使用Flexbox实现元素居中与左/右对齐

在HTML中使用Flexbox实现元素居中与左/右对齐

在HTML中使用Flexbox实现元素居中与左/右对齐

参考： Center one and right/left align other flexbox element in HTML

在现代网页设计中，Flexbox是一种非常强大的布局工具，它可以简化很多复杂的布局问题。本文将详细介绍如何使用Flexbox来实现一个元素居中，而另一个元素左对齐或右对齐的布局方式。我们将通过10-20个示例代码来展示不同的实现方法。

Flexbox基础

在深入示例之前，让我们先了解一些Flexbox的基础知识。Flexbox是Flexible Box的缩写，意为“弹性盒子”，它允许我们在容器内分配空间和对齐元素，即使它们的大小未知或是动态变化的。

Flexbox布局主要涉及两类元素：flex容器（flex container）和flex项目（flex items）。容器用于包裹项目，我们通过在容器上设置display: flex;属性来启用Flexbox布局。

Flexbox的主要属性包括：

  • display: flex;：启用Flexbox布局。
  • flex-direction：定义项目的排列方向。
  • justify-content：定义项目在主轴上的对齐方式。
  • align-items：定义项目在交叉轴上的对齐方式。
  • flex-grow、flex-shrink和flex-basis：定义项目的放大、缩小和基础大小。

示例代码

现在，让我们通过一系列的示例代码来展示如何使用Flexbox来实现一个元素居中，而另一个元素左对齐或右对齐。

示例1：居中一个元素，左对齐另一个元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
  }
  .center-item {
    text-align: center;
    flex-grow: 1;
  }
  .left-item {
    text-align: left;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="left-item">Left aligned - how2html.com</div>
  <div class="center-item">Centered - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例2：居中一个元素，右对齐另一个元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
  }
  .center-item {
    text-align: center;
    flex-grow: 1;
  }
  .right-item {
    text-align: right;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="center-item">Centered - how2html.com</div>
  <div class="right-item">Right aligned - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例3：使用margin实现居中与左对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Margin Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .center-item {
    margin: auto;
  }
  .left-item {
    margin-right: auto;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="left-item">Left aligned - how2html.com</div>
  <div class="center-item">Centered - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例4：使用margin实现居中与右对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Margin Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .center-item {
    margin: auto;
  }
  .right-item {
    margin-left: auto;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="center-item">Centered - how2html.com</div>
  <div class="right-item">Right aligned - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例5：使用align-self实现垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Align-Self Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    height: 200px; /* 设置容器高度 */
  }
  .center-item {
    align-self: center; /* 垂直居中 */
  }
  .left-item {
    align-self: flex-start; /* 垂直顶部对齐 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="left-item">Left aligned - how2html.com</div>
  <div class="center-item">Vertically centered - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例6：使用flex简写属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Flex Property Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
  }
  .center-item {
    flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    text-align: center;
  }
  .left-item {
    /* 不设置flex属性，保持默认值 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="left-item">Left aligned - how2html.com</div>
  <div class="center-item">Centered with flex - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例7：使用order属性调整顺序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Order Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .center-item {
    order: 2; /* 放在最后 */
    flex-grow: 1;
    text-align: center;
  }
  .left-item {
    order: 1; /* 放在中间 */
  }
  .right-item {
    order: 3; /* 放在最前 */
    margin-left: auto;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="right-item">Right aligned - how2html.com</div>
  <div class="left-item">Left aligned - how2html.com</div>
  <div class="center-item">Centered with order - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例8：使用align-content实现多行对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Align-Content Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap; /* 允许多行 */
    align-content: space-between; /* 多行间的对齐方式 */
    height: 300px; /* 设置高度以允许多行 */
  }
  .flex-item {
    width: 100%; /* 使每个项目占满整行 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">First line - how2html.com</div>
  <div class="flex-item">Second line - how2html.com</div>
  <div class="flex-item">Third line - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例9：使用flex-wrap与justify-content实现响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Responsive Layout Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-around; /* 项目间的对齐方式 */
  }
  .flex-item {
    flex-basis: calc(33.333% - 10px); /* 三列布局，考虑间隙 */
    margin: 5px; /* 设置间隙 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Item 1 - how2html.com</div>
  <div class="flex-item">Item 2 - how2html.com</div>
  <div class="flex-item">Item 3 - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例10：使用align-items与justify-content实现完全居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 视口高度 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Fully centered - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例11：使用flex-direction改变项目方向

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Direction Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    flex-direction: column; /* 项目方向为垂直 */
  }
  .flex-item {
    margin: 10px; /* 设置间隙 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">First item - how2html.com</div>
  <div class="flex-item">Second item - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例12：使用flex-flow简写属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Flow Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    flex-flow: row wrap; /* 方向为行，允许换行 */
  }
  .flex-item {
    flex: 1; /* 项目占据可用空间 */
    margin: 5px; /* 设置间隙 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Item 1 - how2html.com</div>
  <div class="flex-item">Item 2 - how2html.com</div>
  <div class="flex-item">Item 3 - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例13：使用flex属性实现不同比例的项目

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Proportion Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .flex-item-1 {
    flex: 1; /* 占据1份比例 */
  }
  .flex-item-2 {
    flex: 2; /* 占据2份比例 */
  }
  .flex-item-3 {
    flex: 3; /* 占据3份比例 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item-1">1/6 - how2html.com</div>
  <div class="flex-item-2">2/6 - how2html.com</div>
  <div class="flex-item-3">3/6 - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例14：使用flex-basis设置项目的初始大小

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Basis Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .flex-item {
    flex-basis: 200px; /* 设置初始大小为200px */
    flex-grow: 1; /* 允许放大 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Basis 200px - how2html.com</div>
  <div class="flex-item">Basis 200px - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例15：使用flex-shrink控制项目的缩小行为

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Shrink Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .flex-item {
    width: 200px; /* 设置基础宽度 */
    flex-shrink: 1; /* 允许缩小 */
  }
  .no-shrink {
    flex-shrink: 0; /* 不允许缩小 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Can shrink - how2html.com</div>
  <div class="flex-item no-shrink">Cannot shrink - how2html.com</div>
  <div class="flex-item">Can shrink - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例16：使用align-self覆盖单个项目的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Align-Self Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    align-items: center; /* 默认垂直居中对齐 */
    height: 200px; /* 设置容器高度 */
  }
  .flex-item {
    margin: 5px;
  }
  .align-self-start {
    align-self: flex-start; /* 覆盖对齐方式，顶部对齐 */
  }
  .align-self-end {
    align-self: flex-end; /* 覆盖对齐方式，底部对齐 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item align-self-start">Align self start - how2html.com</div>
  <div class="flex-item">Centered - how2html.com</div>
  <div class="flex-item align-self-end">Align self end - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例17：使用媒体查询实现响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Media Query Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-item {
    flex: 1 1 200px; /* 基础大小为200px，允许放大和缩小 */
    margin: 5px;
  }
  @media (max-width: 600px) {
    .flex-item {
      flex: 1 1 100%; /* 在小屏幕上每个项目占满整行 */
    }
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Responsive item - how2html.com</div>
  <div class="flex-item">Responsive item - how2html.com</div>
  <div class="flex-item">Responsive item - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例18：使用order属性重新排序项目

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Order Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .flex-item {
    order: 2; /* 默认所有项目排序为2 */
    margin: 5px;
  }
  .first {
    order: 1; /* 第一个项目排序为1 */
  }
  .last {
    order: 3; /* 最后一个项目排序为3 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item first">First - how2html.com</div>
  <div class="flex-item">Second - how2html.com</div>
  <div class="flex-item last">Last - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例19：使用flex-grow, flex-shrink, 和 flex-basis 组合属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Flex Property Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .flex-item {
    flex: 1 1 auto; /* 允许项目放大和缩小，基础大小为自动 */
    margin: 5px;
  }
  .flex-item-fixed {
    flex: 0 0 200px; /* 不允许放大和缩小，固定大小为200px */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Flex item - how2html.com</div>
  <div class="flex-item-fixed">Fixed size item - how2html.com</div>
  <div class="flex-item">Flex item - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

示例20：使用flex属性快速设置项目大小

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Flex Shortcut Example - how2html.com</title>
<style>
  .flex-container {
    display: flex;
  }
  .flex-item {
    flex: 1; /* 等同于 flex: 1 1 0，项目将平均分配空间 */
    margin: 5px;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Flex 1 - how2html.com</div>
  <div class="flex-item">Flex 1 - how2html.com</div>
  <div class="flex-item">Flex 1 - how2html.com</div>
</div>
</body>
</html>

Output:

在HTML中使用Flexbox实现元素居中与左/右对齐

以上示例展示了如何使用CSS Flexbox来创建各种布局和对齐方式。这些示例包括基本的对齐、响应式设计、项目排序、项目大小调整等常用的Flexbox特性。通过这些示例，你可以学习到如何在实际的网页设计中灵活运用Flexbox。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

HTML 精品教程