Блог

Главная - Вопросы по программированию - Flexbox перемещает div вправо

Flexbox перемещает div вправо

#html #css

#HTML #css

Вопрос:

Мне нужно, чтобы желтый div плавал рядом с фиолетовым квадратом. Оранжевый сверху, розовый снизу и желтый слева от квадрата. Это сработало, когда я снял flex-wrap:wrap; с правого div, но затем все три подразделения ушли влево. Есть ли в любом случае, чтобы просто желтый div плавал справа от фиолетового квадрата, чтобы занять оставшуюся часть зеленой области, в то время как два других остаются на своих текущих местах?

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

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display: flex;
  flex-direction: column;
}

#right>* {
        flex: 1;
}

#logo {
  width: 100%;
  margin:auto;
  max-width:calc(80vh - 25px);
  background-color:purple;
  margin-left:0;
}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

#rightsidetop{
  background-color:orange;
}

#rightsideright{
  background-color:yellow;
}

#rightsidebottom{
  background-color:pink;
} 
 <div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="rightsidetop"></div>
    <div id="logo"></div>
    <div id="rightsideright"></div>
    <div id="rightsidebottom"></div>
  </div>
</div>

Ответ №1:

Это должно работать так, как задумано.

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

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display: flex;
  flex-direction: column;
}

#right>* {
        flex: 1;
}

#logo {
  width: 100%;
  max-width:calc(80vh - 25px);
  background-color:purple;
}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

#rightsidetop{
  background-color:orange;
}

#rightsideright{
  background-color:yellow;
  flex: 1;
}

#rightsidebottom{
  background-color:pink;
}

.wrapper {
  display: flex;
} 
 <div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="rightsidetop"></div>
    <div class="wrapper">
      <div id="logo"></div>
      <div id="rightsideright"></div>
    </div>
    <div id="rightsidebottom"></div>
  </div>
</div>

Редактировать: чтобы сделать этот ответ немного более универсальным, вот как работает принцип: если вы хотите, чтобы div A увеличивался до максимального размера, а div B заполнял оставшееся пространство, вы должны убедиться, что:

  • Контейнер display: flex
  • A имеет width: 100% и имеет max-width
  • B имеет flex: 1

Обратите внимание, что если бы flex: 1 A также имел, его жадность 100% была бы отменена более щедрым правилом сгибания. Поэтому самый минимальный рабочий пример:

 .container {
  display: flex;
}

.up-to-max {
  width: 100%;
  max-width: 100px;
  background: red;
}

.filler {
  flex: 1;
  background: green;
} 
 <div class="container">
  <div class="up-to-max">A</div>
  <div class="filler">B</div>
</div>

(Смотрите всю страницу, чтобы изменить размер окна)

Комментарии:

1. Отлично! Спасибо!

Ответ №2:

Вам нужно немного изменить свой html и адаптировать css. Кстати, вам не следует использовать столько идентификаторов, используйте классы. Кроме того, используйте flex-basis, чтобы придать дочерним элементам flex ширину.

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

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display: flex;
  flex-direction: column;
}

#right>*,
#right>* > *{
        flex: 1;
}

#logo {
  width: 100%;
  margin:auto;
  max-width:calc(80vh - 25px);
  background-color:purple;
  margin-left:0;
}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

#rightsidetop{
  background-color:orange;
}

#rightsideright{
  background-color:yellow;
}

#rightsidebottom{
  background-color:pink;
}


.wrapper {
display: flex;
} 
 <div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="rightsidetop"></div>
    <div class="wrapper">
      <div id="logo"></div>
      <div id="rightsideright"></div>
    </div>
    <div id="rightsidebottom"></div>
  </div>
</div>

Комментарии:

1. Ах, я вижу, это близко, но это останавливает расширение фиолетового div. Вставьте код в браузер, и вы увидите проблему. Я попробую изменить то, что вы предложили, чтобы посмотреть, смогу ли я заставить его работать

2. Попробуйте вставить мой исходный код в браузер, чтобы увидеть, как желтый (в настоящее время зеленый) должен работать при изменении размера экрана.

Метки: