Question

我试图将多个元素垂直和水平地围绕在一个元素周围。

在蓝色元素是第一个的情况下，它需要位于页面的绝对中间，并且所有绿色元素需要在它之后对齐。

如果第二个元素是蓝色，则需要位于页面的绝对中间位置，并且需要在其上方有一个元素，并且在其下方有一个元素。

如果第三个元素是蓝色，它需要位于页面的绝对中间，并且它需要在它上面有两个元素，并且在它下面有元素。

我也想为列做同样的事情。

HTML：

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./index.css"/>
    </head>

    <body>
        <div class='row'>
            <div class='column'>
                <div class='box blue'></div>
                <div class='box'></div>
                <div class='box'></div>
            </div>
        </div>
    </body>
</html>

CSS：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.row {  
    height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;

}

.column {
    flex-direction: column;
    display: flex;
    justify-content: center;

}

.box {
    height: 50px;
    width: 50px;
    margin: 5px;
    background-color: #2ecc71;
}

.blue {
  background-color: #3498db;
}

JSFiddle：https://jsfiddle.net/gessha/x18nfaeo/

Answer 1

我认为你不能只使用CSS通用解决方案。我的意思是，如果您有未确定数量的子元素。使用javascript，您可以计算位置并转换元素以获得所需的结果。在三个元素的情况下，我修改了你的小提琴并使用伪选择器（nth-child）更改了flex项目的顺序，以允许将蓝色元素定位在中心，但是这是一个非常量身定制的测试解决方案情况下。

https://jsfiddle.net/t38gorzx/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.row {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.column {
  flex-direction: column;
  display: flex;
  justify-content: center;
}

.box {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: #2ecc71;
}

.box:nth-child(1):not(.blue) {
  order: 1;
}

.box:nth-child(2):not(.blue) {
  order: 2;
}

.box:nth-child(3):not(.blue) {
  order: 3;
}

.box.blue:nth-child(1) {
  order: 3;
}

.box.blue:nth-child(2) {
  order: 2;
}

.box.blue:nth-child(3) {
  order: 1;
}

.blue {
  background-color: #3498db;
}

<div class='row'>
  <div class='column'>
    <div class='box blue'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
</div>

将多个元素集中在一个元素周围

1 个答案: