Блог

Главная - Вопросы по программированию - свойство flex-wrap работает неправильно?

свойство flex-wrap работает неправильно?

#css #flexbox

Вопрос:

Я пытаюсь понять flexbox. Моя цель — выровнять 3 элемента в каждой строке. Я должен использовать свойство flex-wrap : wrap; , но моя проблема в том, что я выравниваю 4 элемента в своей первой строке.

 .container{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap : wrap; 
}

Заранее благодарю вас за ваш ответ.

 html,body{
  padding:0;
  margin:0;
}
*{
  box-sizing:border-box;
}

.container{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap : wrap; 

}

/* disposition du cadre */
.box{
  margin-top: 33px;
  width: 21%;/*
  height:100px;*/
  border: 1px solid rgba(0, 0, 0, .07);
  background:red;
  text-align: center;
}


.container > .box {
  margin-right: 20px;
}

.title {
  color: #103D65;
  font-size: 28px;
}

.description {
  font-size: 16px;
  padding-top: 10px;
  padding-bottom: 35px;
}

.icone {
  width: 100px;
  height: 100px;
  background: #F4B7DB;
  border-radius: 50%;
  margin: 10px auto;
} 
 <div class="container">
  <div class="box">
    <div class="icone">
    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  <div class="box">
    <div class="icone">
      
    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  <div class="box">
    <div class="icone">
      
    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  
  <div class="box">
    <div class="icone">
    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  <div class="box">
    <div class="icone">
      
    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  <div class="box">
    <div class="icone">
      
    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  
  
</div>

Ответ №1:

.контейнер{

   width:90%;
margin-left:auto;
margin-right:auto;
display:flex;
justify-content:flex-start;
align-items:center;
flex-wrap : wrap;

}

.коробка{

 margin-top: 33px;
width: 21%;/*
height:100px;*/
border: 1px solid rgba(0, 0, 0, .07);
background:red;
text-align: center;
 flex-basis:30%;

}

Комментарии:

1. Чего вы ожидаете от этого?

Ответ №2:

Вы можете использовать flex-basis свойство в .box селекторе. Поскольку вам нужно 3 элемента в строке, вы можете сохранить базовое значение где-то на уровне 30-33%; учитывая заполнение и поля родительского контейнера.

 .box {
  flex-basis: 30%;
}
 
 html,
body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


/* disposition du cadre */

.box {
  margin-top: 33px;
  width: 21%;
  /*
  height:100px;*/
  border: 1px solid rgba(0, 0, 0, .07);
  background: red;
  text-align: center;
  /* occupy 30% of the total space */
  flex-basis: 30%;
}

.container>.box {
  margin-right: 20px;
}

.title {
  color: #103D65;
  font-size: 28px;
}

.description {
  font-size: 16px;
  padding-top: 10px;
  padding-bottom: 35px;
}

.icone {
  width: 100px;
  height: 100px;
  background: #F4B7DB;
  border-radius: 50%;
  margin: 10px auto;
} 
 <div class="container">
  <div class="box">
    <div class="icone">
    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  <div class="box">
    <div class="icone">

    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  <div class="box">
    <div class="icone">

    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>

  <div class="box">
    <div class="icone">
    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  <div class="box">
    <div class="icone">

    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>
  <div class="box">
    <div class="icone">

    </div>
    <div class="title">
      Heal emotions
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non
    </div>
  </div>


</div>

Комментарии:

1. Ах, хорошо, большое вам спасибо за ваше объяснение.

Метки: