flex-box, сохранить первую строку развернутой - PullRequest
Новая
       5

flex-box, сохранить первую строку развернутой

0 голосов
/ 21 ноября 2018

У меня есть контейнер, в котором мне нужно, чтобы внутренние блоки следовали друг за другом и вели себя как плавающие.Я не могу использовать float, так как компоновка должна быть изменена после изменения разрешения.В настоящее время мне нужно, чтобы блоки 1 (ширина 70%) и 2 (30%) находились в одной и той же строке, но второй перемещается на следующую строку:

enter image description here

HTML: 

<section>
  <div>Header</div>
  <div>SideRight</div>
  <div>Bottom line</div>
</section>

CSS 

body * {
  box-sizing: border-box;
}
section {
  background: #ddd;
  display: flex;
  flex-direction: column;
  max-width:300px;
}
section > div{
  padding: 10px;
}

section > div:nth-child(1){
  background-color: pink;
  width: 70%;
}

section > div:nth-child(2){
  background-color: lightgreen;
  align-self: flex-end;
  width: 30%;
}

section > div:nth-child(3){
  background-color: yellow;
}

Вы можете увидеть живой пример здесь: https://plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4?p=preview

Итак, можно ли достичь?Наконец, это должно выглядеть так:

enter image description here

Ответы [ 3 ]

0 голосов
/ 21 ноября 2018

Вам явно НУЖНО использовать отображение столбцов для этого раздела?Если нет, это легко сделать с помощью flex-wrap: wrap в родительском разделе, а затем установить процент width: 100% для последнего дочернего элемента.Вы также должны удалить flex-direction: column из родительского.

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

0 голосов
/ 21 ноября 2018

Я изменил ваше flex-направление на flex-wrap и установил 3-й div на 100% ширины.Надеюсь, это поможет :) 

  <head>
    <style>
      body *{
        box-sizing: border-box;
      }
      section{
        background: #ddd;
        display: flex;
        flex-wrap: wrap;
        max-width:300px;
      }
      section > div{
        padding: 10px;
      }

      section > div:nth-child(1){
        background-color: pink;
        width: 70%;
      }

      section > div:nth-child(2){
        background-color: lightgreen;
        align-self: flex-end;
        width: 30%;
      }

      section > div:nth-child(3){
        background-color: yellow;
        width: 100%;
      }

    </style>
  </head>

  <body>

    <section>
      <div>Header</div>
      <div>SideRight</div>
      <div>Bottom line</div>
    </section>

  </body>

</html>
0 голосов
/ 21 ноября 2018

Вы можете добавить flex-wrap: wrap; к section и удалить flex-direction: column; следующим образом 

section {
  background: #ddd;
  display: flex;
  /* flex-direction: column; */
  max-width: 300px;
  flex-wrap: wrap;    //add this
}

, если вы хотите, чтобы 'Нижняя линия' заполнила всю строку, добавьте flex-grow: 1; к section > div:nth-child(3)

Конечный результат будет примерно таким 

section {
  background: #ddd;
  display: flex;
  /* flex-direction: column; */    
  max-width: 300px;
  flex-wrap: wrap;           //new
}

section > div:nth-child(3) {
  background-color: yellow;
  flex-grow: 1;              //new
}

Вот рабочий пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...