Как правильно выровнять div для соответствия ширине страницы без переполнения? - PullRequest
Новая
       12

Как правильно выровнять div для соответствия ширине страницы без переполнения?

1 голос
/ 26 марта 2019

Хорошо, так что я играю с flex box, я создал эту простую компоновку div, но я явно форматирую их неправильно. Я поставил div наверху на 100%, чтобы вы могли сравнить, где заканчиваются div.

Ideal Situation

Есть ли способ выровнять элементы div по размеру страницы?

Я подумал, что, просто добавив несколько операторов% width, я мог бы легко заполнить страницу, так как я использую поля для элементов div, которые не складываются. См. кодовый код здесь и фрагмент ниже: 

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

.myBox {
  border: 0.5px solid black;
  margin: 5px;
  padding: 10px;
}

.headerTitle {
  width: 100%;
}

.bottomLeft {
  width: 29%;
}

.bottomRight {
  width: 100%;
}

.wrapBottomRight {
  width: 37%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
<div class="container">
  <div class="myBox headerTitle">
    <h1> HELLO THERE </h1>
  </div>

  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="wrapBottomRight">
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
  </div>
</div>

Ответы [ 3 ]

2 голосов
/ 27 марта 2019

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

  • удалить по умолчанию body margin
  • используйте border-box для включения padding и border в width
  • Используйте width: calc(33.33% - 10px) для элементов mybox и wrapBottomRight

См. Демо ниже: 

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

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

.myBox {
  width: calc(33.33% - 10px); /* added*/
  border: 0.5px solid black;
  margin: 5px;
  padding: 10px;
}

.headerTitle {
  width: 100%;
}

.bottomLeft {
  /* width: 29%; */
}

.bottomRight {
  width: 100%;
}

.wrapBottomRight {
  width: calc(33.33% - 10px); /* added */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
<div class="container">
  <div class="myBox headerTitle">
    <h1> HELLO THERE </h1>
  </div>

  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="wrapBottomRight">
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
  </div>
</div>
1 голос
/ 27 марта 2019

Таким образом, вы, вероятно, захотите настроить ширину и высоту различных элементов div, но раскладка, к которой вы стремитесь, довольно проста с flexbox и justify-content: space-between;.Для этого мне нужно было добавить еще одну оболочку .bottomContainer и удалить flex-wrap: wrap;.Посмотрите на flex-direction: column:, где вам нужно, чтобы боксы располагались вертикально.

Любимый ресурс flexbox для всех: https://css -tricks.com / snippets / css / a-guide-to-flexbox / 

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.bottomContainer {
  display: flex;
  justify-content: space-between;
}

.myBox {
  border: 1px solid black;
  padding: 10px;
}

.headerTitle {
  margin-bottom: 10px;
}

.bottomLeft {
  width: 30%;
}

.bottomRight {
  height: 48%;
}

.wrapBottomRight {
  width: 37%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<div class="container">
  <div class="myBox headerTitle">
    <h1> HELLO THERE </h1>
  </div>
  
  <div class="bottomContainer">
    <div class="myBox bottomLeft">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="myBox bottomLeft">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="wrapBottomRight">
      <div class="myBox bottomRight">
        <h2> Title </h2>
        <p> Some shit </p>
      </div>
      <div class="myBox bottomRight">
        <h2> Title </h2>
        <p> Some shit </p>
      </div>
    </div>
  </div>  
</div>
0 голосов
/ 26 марта 2019

Надеюсь, это поможет! 

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

.myBox {
  border: 0.5px solid black;
  margin: 5px;
  padding: 10px;
  width: 50%
}

.headerTitle {
  width: 100%;
}

.bottomLeft {
  width: 20%;
}

.bottomRight {
  width: 20%;
}

.wrapBottomRight {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 20%;
}
<div class="container">
  <div class="myBox headerTitle">
    <h1> HELLO THERE </h1>
  </div>

  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
  </div>
</div>

Счастливого кодирования!

...