центрирование нескольких элементов вокруг одного элемента - PullRequest
Новая
       0

центрирование нескольких элементов вокруг одного элемента

0 голосов
/ 07 июня 2018

Я пытаюсь центрировать несколько элементов вокруг одного элемента по вертикали и горизонтали.

В случае, когда синий элемент является первым, он должен находиться в абсолютной середине страницы, а все зеленые элементы должны быть выровнены после него.

Если второй элемент синий, он должен находиться в абсолютной середине страницы, и над ним должен быть один элемент, а под ним - один элемент.

Inв случае, когда третий элемент синий, он должен находиться в абсолютной середине страницы, и над ним должны быть два элемента и элемент под ним.

Я также хочу сделать то же самое длястолбцы.

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/

1 Ответ

0 голосов
/ 07 июня 2018

Я не думаю, что вы можете сделать это только с помощью общего решения CSS.Я имею в виду, если у вас есть неопределенное количество дочерних элементов.С помощью JavaScript вы можете рассчитать положение и перевести элементы, чтобы получить желаемый результат.В случае трех элементов я изменил вашу скрипку и изменил порядок элементов flex, используя псевдоселекторы (nth-child), чтобы позволить расположить синий элемент в центре, но это очень адаптированное решение для вашего тестового примера.

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...