Вопросы Теги

Есть ли способ переместить этот .logout в нужную сторону? [Дубликат] 

$([1,2]).each(function(idx,el) {
 $("#entry" + el).hide().insertAfter("div.entry:last");
 $("#trigger" + el).click(function() {
     $("#entry" + el).slideDown('800');
 });   
 $("#close" + el).click(function() {
     $("#entry" + el).slideUp('800');
 });            
});​

  http://jsfiddle.net/yDcKu/11/
10
задан RootNode 30 December 2016 в 09:50
поделиться

2 ответа

align-self: flex-end; только идет «столбец», в вашем случае у вас есть два варианта:

1) justify-content: space-between; на .container, скрипт

2) удалите align-self на обоих элементах и ​​используйте margin-left: auto; на .b, скрипт

1) 

.container {
      border: 2px solid;
      height: 500px;
      display: flex;
      flex-direction: row; 
      justify-content: space-between;
    }
    .box {
      border: 1px solid;
      height: 200px;
      width: 50px;
    }
    .a {
      background-color: red;
    }
    .b {
      background-color: cyan;
    }

2 ) 

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row; 
}
.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}
.a {
  background-color: red;
}
.b {
  background-color: cyan;
  margin-left: auto;
}

РЕДАКТИВАЙТЕ теперь, когда вы редактировали свой вопрос в виде трех ящиков, вы можете посмотреть на этот скрипт , 

.a {
  background-color: red;
}
.b {
  background-color: cyan;
}
.c {
  background-color: deepskyblue;
  margin-left: auto;
}
12
ответ дан Dejan.S 16 August 2018 в 14:24
поделиться
  • 1
    пришлось отредактировать мой вопрос, так что есть 3 элемента вместо 2. Так что 1 из них идет вправо, а остальное остается. Невозможно использовать в этом случае оправдательный контент. – RootNode 30 December 2016 в 09:21
  • 2
    вы можете использовать мой вариант 2 @RootNode – Dejan.S 30 December 2016 в 09:22
  • 3
    margin-left: авто, кажется, работает, потрясающе. однако я бы подумал, что для этого существует правило flexbox. Таким образом, выравнивание: «flex-end» будет подчиняться направлению гибкости. Думаю, это способ сделать это. – RootNode 30 December 2016 в 09:42
  • 4
    @RootNode да. Я получаю путаницу относительно гибкого конца, вы можете прочитать потрясающий путеводитель для flexbox по поводу css-трюков css-tricks.com/snippets/css/a-guide-to-flexbox – Dejan.S 30 December 2016 в 09:46

Обновленный ответ

В соответствии с новым вопросом выровняйте один элемент справа, добавив margin-left: auto; к этому элементу.

Демо

Исходный ответ Используйте свойство justify-content в вашем контейнере. 

.container {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

Хороший ресурс для свойств flex здесь .

Fiddle 

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}
.a {
  background-color: red;
  align-self: flex-start;
}
.b {
  background-color: cyan;
  align-self: flex-end;
}
<div class="container">
  <div class="box a">
  </div>
  <div class="box b">
  </div>
</div>

1
ответ дан sol 16 August 2018 в 14:24
поделиться
  • 1
    пришлось отредактировать мой вопрос, так что есть 3 элемента вместо 2. Так что 1 из них идет вправо, а остальное остается. Невозможно использовать в этом случае оправдательный контент. – RootNode 30 December 2016 в 09:20
  • 2
    @RootNode Хорошо, обновленный ответ, в основном то, что Дяйн. S дал вам вариант 2 его ответа. Пожалуйста, включите все подробности в будущие вопросы, чтобы сэкономить время :) – sol 30 December 2016 в 09:24