[分享]css3怎么设置弹性布局

CSS3的弹性布局（Flexible Box Layout）是一种新型的布局方式，它能够在不同屏幕尺寸下自适应并平衡布局中各元素的宽度、高度以及位置。下面我们来学习如何设置弹性布局。/ 设置容器为弹性...

CSS3的弹性布局（Flexible Box Layout）是一种新型的布局方式，它能够在不同屏幕尺寸下自适应并平衡布局中各元素的宽度、高度以及位置。下面我们来学习如何设置弹性布局。

/* 设置容器为弹性布局 */
.container {
  display: flex;
}

/* 设置容器内元素的排列方向 */
.container {
  flex-direction: row; /* 横向排列 */
  flex-direction: column; /* 纵向排列 */
}

/* 设置容器内元素的对齐方式 */
.container {
  justify-content: flex-start; /* 元素靠左对齐 */
  justify-content: flex-end; /* 元素靠右对齐 */
  justify-content: center; /* 元素居中对齐 */
  justify-content: space-around; /* 元素等间距排列 */
  justify-content: space-between; /* 元素两端对齐 */
  align-items: flex-start; /* 元素靠上对齐 */
  align-items: flex-end; /* 元素靠下对齐 */
  align-items: center; /* 元素垂直居中对齐 */
  align-items: stretch; /* 元素高度平分容器 */
}

/* 设置容器中某个元素占据剩余空间 */
.item {
  flex: 1;
} 

通过上面的示例代码，我们便可以很容易地制定弹性布局，并对布局中的元素进行位置、大小等各方面的自定义设置，实现自适应、平衡的布局效果。