сложная гибкая коробка.потомки сгибают конец, но сначала сгибают начало вертикально

Question

Я сейчас дергаю себя за волосы и мне нужна помощь.

У меня сложная проблема с flex box.Я могу редактировать только CSS и не могу обновлять HTML.

Пример на CodePen: https://codepen.io/anon/pen/RqYMZJ

Это самое близкое, что я мог получить, но все еще есть место между дочерними элементами.-6 и ребенок-4 и ребенок-5: (

.main-parent {
    border:1px solid #000;
    display:flex;
}
.child-1 {
    background-color:red;
    width:50%;
    height:200px;
}
.parent {
    flex:1 1 auto;
    display:flex;  
    flex-wrap:wrap;
    flex-direction:row;
    align-items:flex-end;  
}
.child-3 {
    background-color:blue;  
    width:100%;
    align-self:flex-start;
}
.child-4 {
    background-color:green;
    height:40px;  
    margin: 0 0 0 0;
}
.child-5 {
    background-color:yellow;
    height:40px; 
    flex: 0;  
}

.child-6 {
    width:100%;
    background-color:lightblue;
    margin: 0 0 0 0;
}

Мне нужно согнуть ребенка, чтобы сделать следующее:

• дочерний-3 полная ширина родителя
• дочерняя-6 полная ширина родительского элемента
• дочерняя-4 и дочерняя-5 автоматическая ширина, чтобы они могли следовать друг за другом.
• все дочерние элементы должны быть внизу родительского
• child-3, первый дочерний элемент родителя, который будет на вершине родительского элемента.

Answer 1

Вот одно из готовых решений. Обратите внимание, , я использую ваш код в качестве стартового, а ваш визуальный сигнал - в качестве окончательного руководства.Это далеко не хороший код или лучшие практики, но это хак, чтобы получить то, что вы хотели.Это «хрупкий», и структура может сломаться с любым новым фактором или каких-либо серьезных изменений.Вот почему хаков следует избегать.Для каждой новой проблемы вам нужен еще один патч / хак (пока не останется никаких опций) :) С учетом сказанного ниже приведен код.

.main-parent {
  position: relative;
  border: 1px solid #000;
  display: flex;
}

.child-1 {
  background-color: red;
  min-width: 50%;
  min-height: 200px;
}

.parent {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
}

.child-3 {
  background-color: blue;
  width: 100%;
  align-self: flex-start;
}

.child-4 {
  background-color: green;
  height: 40px;
  display: inline-block;
  width: auto;
  max-width: 50%;
}
.child-5 {
  background-color: yellow;
  height: 40px;
  display: inline-block;
  width: auto;
  max-width: 50%;
}

.child-6 {
  width: 50%;
  background-color: lightblue;
  position: absolute;
  bottom: 40px;
}

<div class="main-parent">
  <div class="child-1">1</div>
  <div class="parent">
    <div class="child-3">3<br><br>1<br><br>1</div>
    <div class="child-6">6 line</div>
    <div class="child-4">4</div>
    <div class="child-5">5</div>
  </div>
</div>

• Я в основном использовал ваш кодовый элемент и просто удалил child-6 из потока, установив его положение в абсолют.Основной родитель теперь имеет относительное положение, поэтому он может служить ссылкой.
• Поскольку у вас жестко заданная высота child-4 и child-5 до 40px, я просто установил нижнее значение child-6 на эту величину (40px).
• Кроме того,обратите внимание, что ширина child-6 теперь составляет 50%, потому что она относительно основного родителя.

Я надеюсь, что это решит вашу текущую проблему, но, пожалуйста, остерегайтесь подобных подходов.Они могут легко «укусить вас», когда вы меньше всего этого хотите / ожидаете.

PS Еще одна мера безопасности, если вы планируете изменить рост детей 4 и 5. Я бы использовал для этого переменную css и использовал бы ее такжедля ребенка-6 bottom значение.Например:

:root {
  --your-variable-name: 40px;
}

.child-4,
.child-5 {
  height: var(--your-variable-name);
}

.child-6 {
  bottom: var(--your-variable-name);
}

Позже, если вы решите изменить 40px на (скажем, 60px), вам нужно сделать это только в одном месте, и оно будет автоматически обновляться везде и сохранять ваши элементы так, как вы хотелиих в первую очередь (6 непосредственно сверху 4 и 5).