三个div分别靠左，居中，靠右

可以使用flex布局来实现：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容</div>
  <div class="right">右侧内容</div>
</div>

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

.left {
  flex: 1;
  text-align: left;
}

.center {
  flex: 1;
  text-align: center;
}

.right {
  flex: 1;
  text-align: right;
}

其中，`justify-content: space-between;`表示让三个子元素在容器中平均分布，从而实现左、中、右排列。`flex: 1;`表示让三个子元素的宽度自适应，并平分剩余空间。`text-align`属性用于确定子元素内部内容的排列方式。

相关问题

一个div 宽度100% 高度10%,其中包含三个子div横向排列, 一个居中,两个靠右,

可以使用Flex布局来实现这个要求。首先，父级div需要设置为宽度100%和高度10%。然后，使用display: flex;来启用Flex布局。接下来，使用justify-content属性来将子div横向排列，并使用align-items属性来垂直居中子div。

HTML代码如下：

<div class="parent">
  <div class="center"></div>
  <div class="right"></div>
  <div class="right"></div>
</div>

CSS代码如下：

.parent {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.center {
  width: 30%;
  height: 100%;
  background-color: red;
}

.right {
  width: 30%;
  height: 100%;
  background-color: blue;
}

在上面的代码中，父级div使用了display: flex;来启用Flex布局，并且使用justify-content: space-between;来横向排列子div，并在它们之间留有空间。子div的宽度设置为30%（可以根据需要进行调整），其中一个子div使用了background-color: red;来设置背景颜色，另外两个子div使用了background-color: blue;来设置背景颜色。这样就实现了一个宽度100%、高度10%的父级div，其中包含三个子div横向排列，一个居中，两个靠右的效果。

vue实现左右各三张竖直图片

可以使用flex布局来实现左右各三张竖直图片，具体实现如下：

HTML代码：

<div class="container">
  <div class="left">
    <img src="image1.png" alt="image1">
    <img src="image2.png" alt="image2">
    <img src="image3.png" alt="image3">
  </div>
  <div class="right">
    <img src="image4.png" alt="image4">
    <img src="image5.png" alt="image5">
    <img src="image6.png" alt="image6">
  </div>
</div>

CSS代码：

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

.left,
.right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.left img,
.right img {
  width: 100%;
  margin-bottom: 20px;
}

解释：

1. 通过设置 container 的 display 为 flex，使其成为一个 flex 容器，子元素可以使用 flex 布局。
2. 通过设置 justify-content 为 space-between，使左右两边的元素分别靠左和靠右。
3. 通过设置 align-items 为 center，使左右两边的元素垂直居中。
4. 左右两边的元素设置为 flex 容器，使用 flex-direction: column 让图片垂直排列。
5. 图片设置宽度为 100%，使其充满容器，margin-bottom: 20px 让图片之间有 20px 的间距。