CSS Flexbox 布局实现居中和分屏的方法总结

CSS Flexbox 布局是现代前端开发中常用的一种布局方式，它可以轻松实现居中和分屏等功能。本文将总结 CSS Flexbox 布局实现居中和分屏的方法，并提供示例代码。

居中

水平居中

实现水平居中可以使用以下 CSS：

.container {
  display: flex;
  justify-content: center;
}

其中，.container 为包含要居中的元素的容器，display: flex 表示使用 Flexbox 布局，justify-content: center 表示水平居中。

垂直居中

实现垂直居中可以使用以下 CSS：

.container {
  display: flex;
  align-items: center;
}

其中，.container 为包含要居中的元素的容器，display: flex 表示使用 Flexbox 布局，align-items: center 表示垂直居中。

水平垂直居中

实现水平垂直居中可以使用以下 CSS：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

其中，.container 为包含要居中的元素的容器，display: flex 表示使用 Flexbox 布局，justify-content: center 表示水平居中，align-items: center 表示垂直居中。

分屏

两栏布局

实现两栏布局可以使用以下 CSS：

// javascriptcn.com 代码示例
.container {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
}

其中，.container 为包含左右两个元素的容器，display: flex 表示使用 Flexbox 布局，.left 和 .right 分别表示左右两个元素，flex: 1 表示两个元素宽度相等。

三栏布局

实现三栏布局可以使用以下 CSS：

// javascriptcn.com 代码示例
.container {
  display: flex;
}

.left {
  flex: 1;
}

.middle {
  flex: 2;
}

.right {
  flex: 1;
}

其中，.container 为包含左、中、右三个元素的容器，display: flex 表示使用 Flexbox 布局，.left、.middle 和 .right 分别表示左、中、右三个元素，flex: 1 和 flex: 2 分别表示左右两个元素宽度相等，中间元素宽度是左右两个元素宽度的两倍。

结语

本文总结了 CSS Flexbox 布局实现居中和分屏的方法，并提供了示例代码。使用 Flexbox 布局可以轻松实现各种布局效果，提高前端开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658669abd2f5e1655d0e396d