Как получить 33,33% ширины Flex DIVS в нескольких строках?

Question

Я пытаюсь собрать flex-диваны в ряды по 3. Иногда у меня будет 3 div, иногда 6 или 21 и т. Д. Я определил ширину и отступы, но не могу понять, как их получитьначинать новую строку после каждого набора 3.

Как этого добиться?Прямо сейчас он помещает их все в одну строку.

HTML-код выглядит так:

<div id="container">

  <div class="sections__container">

        <div class="sections__container__a">A-1</div>
        <div class="sections__container__b">A-2</div>
        <div class="sections__container__c">A-3</div>

        <div class="sections__container__a">B-1</div>
        <div class="sections__container__b">B-2</div>
        <div class="sections__container__c">B-3</div>

  </div> 

</div>

Каждый Flex DIV использует CSS как:

width: 33.33%;
height: 100%;
float: left;
flex-grow: 1;

Ивот jsFiddle, чтобы упростить задачу: https://jsfiddle.net/xr746syj/

Большое спасибо за любые советы:)

Answer 1

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

Вот таблица для flex для дальнейшего использования: https://yoksel.github.io/flex-cheatsheet/

#container{
  width:600px;
  margin: 0 auto;
  background-color:#ececec;
  padding:10px;
  margin-bottom:30px;
}

.sections__container {
    margin: 0 auto;
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
     align-content: stretch;
    justify-content: space-between;
}
.sections__container div {
    width: 30%;
    border-radius: 4px;
    flex-grow: 1;
    background-color: #FFFFFF;
    font-size: 0.80rem;
    padding: 15px 0px 10px 0px;
    font-weight: 600;
    margin:10px;
    text-align: center;
}

<div id="container">


  <div class="sections__container">
    
    	<div class="sections__container__a">A-1</div>
    	<div class="sections__container__b">A-2</div>
      <div class="sections__container__c">A-3</div>
    
    	<div class="sections__container__a">B-1</div>
    	<div class="sections__container__b">B-2</div>
      <div class="sections__container__c">B-3</div>
    
    </div>


</div>

Answer 2

Во-первых, вам нужно использовать flex-wrap: wrap, чтобы ваши строки разбивались в нужной точке.

Во-вторых, вы используете поля и должны учитывать их в своих width вычислениях.

Итак, если вы говорите, что блок 33.33%, но имеет margin-left: 5px, вам нужно использовать width: calc(33.33% - 5px).

В заключение я удалил float s из вашего кода,так как они бесполезные свойства при применении для изгиба детей.Ваш код может быть значительно упрощен путем создания общего class, содержащего все общие значения для каждого раздела.

Вот полный рабочий код:

* {
  box-sizing: border-box;
}

#container {
  width: 600px;
  margin: 0 auto;
  background-color: #ececec;
  padding: 10px;
  margin-bottom: 30px;
}

.sections__container {
  margin: 0 auto;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.sections__container__a {
  margin-right: 5px;
  width: calc(33.33% - 5px);
  height: 100%;
  border-radius: 4px;
  flex-grow: 1;
  background-color: #FFFFFF;
  font-size: 0.80rem;
  padding: 15px 0px 10px 0px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.sections__container__b {
  margin: 0 5px;
  width: calc(33.33% - 10px);
  height: 100%;
  border-radius: 4px;
  flex-grow: 1;
  background-color: #FFFFFF;
  font-size: 0.80rem;
  padding: 15px 0px 10px 0px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.sections__container__c {
  margin-left: 5px;
  width: calc(33.33% - 5px);
  height: 100%;
  border-radius: 4px;
  flex-grow: 1;
  background-color: #FFFFFF;
  font-size: 0.80rem;
  padding: 15px 0px 10px 0px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

<div id="container">
  <div class="sections__container">
    <div class="sections__container__a">A-1</div>
    <div class="sections__container__b">A-2</div>
    <div class="sections__container__c">A-3</div>

    <div class="sections__container__a">B-1</div>
    <div class="sections__container__b">B-2</div>
    <div class="sections__container__c">B-3</div>
  </div>
</div>

jsFiddle

Answer 3

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

* {
    box-sizing: border-box;
  }

  #container {
    width: 600px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
  }
  .sections__container {
    margin-left: -10px;
    margin-right: -10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .sections__container .col {
    -ms-flex: 0 0 calc(33.333% - 20px);
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #eee;
    font-size: 12px;
    padding: 15px;
    font-weight: 600;
    text-align: center;
  }

<div id="container">
    <div class="sections__container">
        <div class="col sections__container__a">A-1</div>
        <div class="col sections__container__b">A-2</div>
        <div class="col sections__container__c">A-3</div>
        <div class="col sections__container__a">B-1</div>
        <div class="col sections__container__b">B-2</div>
        <div class="col sections__container__c">B-3</div>
    </div>
</div>