Как установить верхний нижний и правый боковой контент с помощью flexbox css

Question

Я новичок в flexbox. Я попытался установить верхнюю, нижнюю и правую сторону контента. См. Демонстрацию

Но мне нужно установить в мобильном размере, как изображение.

Левая сторона и право сторона не одинаковой высоты.

Можем ли мы установить как изображение, упомянутое выше, или любой другой тип для установки на экране мобильного телефона и планшета

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.left {
  background: #f00;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.center {
  background: #ddd;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.right {
  background: #f00;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

<div class="main">
  <div class="left">
    <ul>
      <li>1 height not fix</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
      Large content
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
      <li>1 height not fix</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</div>

Answer 1

Я просто добавляю медиазапросы к вашему css. Вы можете изменить его для различных экранов и установить width, position et c для каждого экрана.

.main{
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap; 
}
.left{
  background:#f00;
}
.center{
  background:#ddd;
}
.right{
  background:#f00;
  }
  
  
  @media screen and (min-width: 980px) {
.left{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%; 
    max-width: 25%; 
}
.center{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; 
}
.right{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; 
  }
  
}

@media screen and (max-width: 980px) {
 .left{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; 
    max-width: 100%; 
}
.center{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; 
}
.right{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; 
  }
}

<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
    Large content
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
</div>

РЕДАКТИРОВАТЬ: лучшее решение для вашей проблемы заключается в использовании css grid: Flexbox является одномерным, Сетка двумерная

.main{
 display: grid;
  grid-gap: 10px;
}

.left { grid-area: left; }
.center { grid-area: main; }
.right { grid-area: right; }

.left{
  background:#f00;
  padding: 10px;
}
.center{
  background:#ddd;
    padding: 10px;

}
.right{
  background:#f00;
    padding: 10px;

  }
  
  @media screen and (min-width: 980px) {
.main{
 display: grid;
  grid-template-areas:'left  main main  right'
    				  'left  main main  right';
  grid-gap: 10px;
}
}

@media screen and (max-width: 980px) {
 .main{
  grid-template-areas:'left  main main '
    				  'right  main main ';
}
}

<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
    Large content
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
</div>

Answer 2

.main{
      display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .left{

      -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }
    .center{
      background:#ddd;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

     ul {
       background:#f00;
       margin-top: 0;
       margin-bottom: 20px;
       padding-top: 15px;
       padding-bottom: 15px;
     }

<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>

     <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
    Large content
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>

</div>

Answer 3

Я предполагаю, что вы знаете, что медиа-запросы необходимо использовать для применения различного поведения на экранах разных размеров, и что реальная проблема заключается в том, как расположить теги <div>.

Есть много разных решений, вот одно:

Во-первых, вам нужно сместить центральную секцию, чтобы быть первой сверху, чтобы вы могли применить свойство float на меньших экранах. Чтобы это работало, вам нужно определить свойство flex order для больших экранов. Если вы не очень хорошо знакомы со свойством float, вы, вероятно, захотите прочитать о clearfix здесь: clearfix . Выводит содержимое «рипа» из обычного потока веб-страниц, и clearfix восстанавливает его.

Вот пример для больших экранов: jsfiddle , а вот пример для меньших: jsfiddle