Как я могу применить поля, чтобы элементы не превышали 100% ширины? - PullRequest
Новая
       34

Как я могу применить поля, чтобы элементы не превышали 100% ширины?

0 голосов
/ 15 мая 2018

У меня есть этот макет , и я хочу иметь возможность добавить margin вокруг каждого элемента, но без изменения widths из каждый элемент.

Я знаю, что, например, с header я могу применить margin: 10px; (давайте сосредоточимся на левом и правом полях) и width: calc(100% - 20px), который отнимает 20px от 100% для учета поле.

Вопрос
Есть ли способ сделать это без изменения ширины?

Таким образом, я могу сохранить ширину 100% и не беспокоиться о том, сколько полей я применяю к элементам?

1 Ответ

0 голосов
/ 15 мая 2018

Вы можете играть с flex-grow. В вашем случае ширина определяется следующим образом: 20% + 60% + 20%, что составляет 20% + 3*20% + 20%, поэтому у нас есть такие факторы, как 1 + 3 + 1. Так что используйте эти факторы для настройки flex-grow, тогда вы можете легко добавить маржу, как хотите. 

* {
  box-sizing: border-box;
}

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

body {
  background: #333D4E;
}


/* Main */

main {
  display: flex;
  flex-direction: row;
  width: 100%;
  text-align: center;
}

article {
  flex-grow: 3;
  min-height: 800px;
  background: #EDF0F1;
  border-radius: 5px;
  margin: 0 20px;
}

nav {
  flex-grow: 1;
  order: -1;
  min-height: 800px;
  background: #9AA4A6;
  border-radius: 5px;
}

aside {
  flex-grow: 1;
  order: 1;
  min-height: 800px;
  background: #6295D6;
  border-radius: 5px;
}
<main>
  <article>Main Content</article>
  <nav>Side Nav</nav>
  <aside>Aside</aside>
</main>

То же самое относится к одному элементу: 

body {
  margin:0;
  display:flex;
}

.container {
  min-height:200px;
  flex-grow:1;
  margin:0 25px;
  background:red;
}
<div class="container">

</div>

Таким образом, хитрость заключается в том, чтобы найти правильное значение flex-grow для использования.

...