Элементы Flexbox с минимальной шириной и адаптивные к содержанию

Question

Хочу сделать флексбокс с отзывчивыми элементами контента. Вот пример кода:

HTML:

.container {
  width: 200px;
  height: 400px;
  display: flex;
  flex-flow: row wrap;
}

.item {
  flex-basis: 40px;
  background-color: orange;
  margin: 0 10px 10px 0;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item">this is text content and again and again this is text content and again and again</div>
</div>

И вот чего я хочу достичь:

Как я могу добиться такого поведения? Спасибо!)

Answer 1

Если вы хотите, чтобы ваша страница реагировала на различное разрешение, вам не следует использовать привычку определять высоту и ширину в терминах px .

вместо этого попробуйте указать ширину и высоту в%, ширина, определенная в%, обычно корректируется с разрешением, но ширина, определенная в px , как правило, остается статичной и нечувствительной к изменению разрешения.

попробуйте вместо этого,

.container {
  width: 800px;
    height: 400px;
    display: flex;
    flex-flow: row wrap;	
}

.item {
  flex-basis: 25%;
    background-color: orange;
    margin: 0 10px 10px 0;
    height: 50%;
}
.items {
  flex-basis: 51%;
    background-color: orange;
    margin: 0 10px 10px 0;
    height: 50%;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="items">this is text content and again and again this is text content and again and again</div>
  <div class="item"></div>
</div>

Это отлично работает. Всего наилучшего

Answer 2

Вы можете добавить класс, скажем, extra.

И добавить ему присвоить свойство max-width:max-content;.

.container {
  display: flex;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  flex: 1;
  min-width: calc(100px - 10px);
  max-width: calc(100px - 10px);
  height: calc(100px - 10px);
  margin: 5px;
  background: green;
}

.extra {
  max-width: max-content !important;
  max-width: -moz-fit-content !important;
  color: white;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item extra">this is extra text and expands</div>
  <div class="item"></div>
</div>

Answer 3

По какой причине у вас сильная привязанность к flexbox? Это было бы очень просто, используя начальную сетку . (Я вижу, у вас есть класс контейнера, так что вы, вероятно, уже установили загрузчик)

<div class="container">
  <div class="item col-md-3"></div>
  <div class="item col-md-3 col-md-offset-1"></div>
  <div class="item col-md-3 col-md-offset-1"></div>
  <div class="item col-md-3"></div>
  <div class="item col-md-3 col-md-offset-1"></div>
  <div class="item col-md-3 col-md-offset-1"></div>
  <div class="item col-md-6">this is text content and again and again this is text content and again and again</div>
  <div class="item col-md-3 col-md-offset-1"></div>
</div>

Если вы не используете загрузчик, CSS3 теперь имеет встроенную сетку , которая также должна соответствовать вашим целям.

В вашей ситуации, я думаю, это был бы путь. Flexbox - это отличный макет, но он больше предназначен для динамических дисплеев, где вам не требуется точный контроль размера / размера элементов.