Динамически выровнять элемент с помощью CSS

css flexbox

892 просмотра

3 ответа

Я хотел бы выровнять div в родительском контейнере, позволяя пользователю выбирать следующие параметры:

  • Верхний левый
  • Верхний средний
  • В правом верхнем углу
  • Левый средний
  • Сосредоточенный
  • Правая середина
  • Нижняя левая
  • Нижняя Середина
  • Нижний правый

Хотя я нахожу много ресурсов о том, как выровнять по вертикали и горизонтали, используя flexbox, мне интересно, создал ли кто-нибудь простую коллекцию CSS-классов, которые я мог бы легко применить.

Изменить :
Основная разметка очень проста, просто кнопка:

<div>
    <div class="btn">This is my button</div>
</div>

Теперь, чтобы добраться до «Правого середины», я бы идеально сделал что-то вроде:

<div class="vertical-align-middle horizontal-align-right">
   <div class="btn">This is my button</div>
</div>
Автор: Stefan Walther Источник Размещён: 08.11.2019 11:17

Ответы (3)


1 плюс

Решение

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

(function() {
  $(".select-box").on("change", function() {
    var $selected = $(this).find("option:selected").val();
    $("#content").removeClass().addClass($selected);
  });
})();
.select-box {
  position: absolute;
  top: 100px;
  left: 100px;
}
#content {
  display: flex;
  width: 600px;
  height: 400px;
  padding: 20px;
}
.box {
  width: 50px;
  height: 50px;
  background-color: fuchsia;
}

#content.top-left {
  justify-content: flex-start;
  align-items: flex-start;
}
#content.top-middle {
  justify-content: center;
  align-items: flex-start;
}
#content.top-right {
  justify-content: flex-end;
  align-items: flex-start;
}
#content.left-middle {
  justify-content: flex-start;
  align-items: center;
}
#content.centered {
  justify-content: center;
  align-items: center;
}
#content.right-middle {
  justify-content: flex-end;
  align-items: center;
}
#content.bottom-left {
  justify-content: flex-start;
  align-items: flex-end;
}
#content.bottom-middle {
  justify-content: center;
  align-items: flex-end;
}
#content.bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="content">
  <div class="box"></div>
</div>
<select class="select-box">
  <option value="top-left">Top Left</option>
  <option value="top-middle">Top Middle</option>
  <option value="top-right">Top Right</option>
  <option value="left-middle">Left Middle</option>
  <option value="centered">Centered</option>
  <option value="right-middle">Right Middle</option>
  <option value="bottom-left">Bottom Left</option>
  <option value="bottom-middle">Bottom Middle</option>
  <option value="bottom-right">Bottom Right</option>
</select>

Автор: Nhan Размещён: 20.08.2016 12:51

3 плюса

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

display: flex;
flex-direction: column;
justify-content: space-between;

Это позволит расположить строки сверху, посередине и снизу контейнера. Далее вы можете использовать этот CSS для каждой строки, и это будет позиционировать div слева, в центре и справа от строки.

display: flex;
justify-content: space-between;

body,
html {
  margin: 0;
  padding: 0;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.row {
  display: flex;
  justify-content: space-between;
}
.box {
  border: 1px solid black;
}
<div class="content">
  <div class="top row">
    <div class="box">Top left</div>
    <div class="box">Top center</div>
    <div class="box">Top right</div>
  </div>
  <div class="middle row">
    <div class="box">Middle left</div>
    <div class="box">Middle center</div>
    <div class="box">Middle right</div>
  </div>
  <div class="bottom row">
    <div class="box">Bottom left</div>
    <div class="box">Bottom center</div>
    <div class="box">Bottom right</div>
  </div>
</div>

Если у вас есть один элемент в контейнере, вы можете использовать различные комбинации align-itemsи justify-contentдля позиционирования элемента, но это также зависит от flex-direction(по умолчанию это строка). Так, например, если вы хотите расположить элемент внизу в центре, вы можете использовать

display: flex;
align-items: flex-end;
justify-content: center;

body,
html {
  margin: 0;
  padding: 0;
}
.content {
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.btn {
  border: 1px solid black;
}
<div class="content">
  <div class="btn">Button</div>
</div>

Автор: Nenad Vracar Размещён: 20.08.2016 12:25

1 плюс

Библиотека Morass может быть полезной.

$ mkdir test-project
$ npm init
$ npm install morass
$ edit index.html
$ serve

где index.html:

<html>

  <head>
    <style>
      .big { height: 200px; width: 200px; outline: 1px red solid; }
      .small { height: 100px; width: 100px; outline: 1px green solid; }
    </style>
    <link rel='stylesheet' href='./node_modules/morass/dist/index.css'/>
  </head>

  <body>
    <div class='big flex align-left align-bottom'>
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      <div class='small'></div>
    </div>
  </body>

</html>

Вы можете заменить align-leftна align-centerили align-right, и align-bottomс align-middleили align-top, и т. Д.

Эта библиотека Morass основана на так называемых "микро-классах". Например, вы также можете добавить verticalкласс, чтобы элементы flex сгибались сверху вниз, или несколько элементов, justifyчтобы их разложить.

Автор: user663031 Размещён: 20.08.2016 01:08
Вопросы из категории :
32x32