[分享]css3弹性布局左右对齐

CSS3弹性布局是一种新型的排版方式，其可以让网页元素根据屏幕大小自适应布局，方便了网页设计者进行响应式设计。在这种布局中，左右对齐是一个常见的需求，下面我们来看看如何实现。.flexcontaine...

CSS3弹性布局是一种新型的排版方式，其可以让网页元素根据屏幕大小自适应布局，方便了网页设计者进行响应式设计。在这种布局中，左右对齐是一个常见的需求，下面我们来看看如何实现。

.flex-container {
  display: flex;
  justify-content: space-between;
} 

上述代码通过设置弹性容器的display属性为flex，即将它设置为弹性容器。然后，通过设置justify-content属性为space-between，让这个弹性容器的子元素从容器的起始位置和结束位置开始沿容器内方向均匀分布，从而实现左右对齐。

另外，如果要使子元素在弹性容器中垂直居中，可以使用align-items属性。具体代码如下：

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

通过上述代码的设置，弹性容器的子元素即可实现左右对齐和垂直居中的效果。