Организация flex-предметов определенным образом - PullRequest
Новая
       3

Организация flex-предметов определенным образом

0 голосов
/ 16 декабря 2018

Я бы хотел расположить flex-items следующим образом:

Layout

Используя следующий пример: 

.Container {
  display: flex;
  overflow: hidden;
  height: 100vh;
  margin-top: -100px;
  padding-top: 100px;
  position: relative;
  width: 70vw;
}
<div class="Top">Top Content</div>
<div class="Container">
  <div class="Left">Left Content</div>
  <div class="Middle">Middle Content</div>
  <div class="Right">Right Content</div>
</div>

Я могу сделать так, чтобы под ним была горизонтальная полоса и вертикальные столбцы.Однако я не могу понять, как сделать другой вертикальный столбец;один состоит из приведенного выше кода, а другой - другой div.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 16 декабря 2018 
<html>
<head>
<title>Page Title</title>
<style>
body{display:table}
.row{display:table-row}
.cell{display:table-cell}
.floatLeft{float:left}
.box1{background-color:#f00;width:100px;height:400px}
.box2{background-color:#0f0;width:400px;height:100px}
.box3{background-color:#00f;width:200px;height:300px}
.box4{background-color:#f0f;width:200px;height:300px}
</style>
</head>
<body>
<div class="row">
    <div class="cell box1"></div>
    <div class="cell">
        <div class="row">
            <div class="cell box2 "></div>
        </div>
        <div class="row">
            <div class="cell box3 floatLeft"></div>
            <div class="cell box4 floatLeft"></div>
        </div>
    </div>
</div>
</body>
</html>
0 голосов
/ 16 декабря 2018

Вы можете использовать flex.Для каждого «направления» используйте контейнер.Чтобы разделить соотношение 1: 2, используйте flex-grow: 1 и flex-grow: 2;.

Также важно использовать 

flex-shrink: 0;
flex-basis: 0;

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

Существует более короткий способ записи всех 3: 

flex: [flex-grow], [flex-shrink], [flex-basis];

, но IE не поддерживает его, поэтому я предпочитаюиспользуя долгий путь 

.out-container {
  display: flex;
  flex-direction: row;
}

.inner-cont {
  display: flex;
  flex-direction: row;
  flex-grow: 2;
}

.container {
  flex-grow: 2;
  flex-shrink: 0;
  flex-basis: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 70vw;
}

.left,
.right,
.middle,
.top {
  padding: 10px;
  border: 1px solid black;
}

.left {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  background-color: #aaeffe;
}

.top {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #69e2fd;
}

.middle{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #38d0fd;
}

.right{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #1fbbfb;
}
<div class="out-container">
  <div class="left">Left Content</div>
  <div class="container">
    <div class="top">Top content</div>
    <div class="inner-cont">
      <div class="middle">Middle Content</div>
      <div class="right">Right Content</div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...