CSS Flexbox Generator

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
  min-height: 300px;
  padding: 20px;
  background-color: #f5f5f5;
  border: 2px dashed #ccc;
}

.flex-item-1 {
  padding: 20px;
  background-color: #e3f2fd;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-2 {
  padding: 20px;
  background-color: #f3e5f5;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-3 {
  padding: 20px;
  background-color: #e8f5e8;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-4 {
  padding: 20px;
  background-color: #fff3e0;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* General flex item styles */
.flex-item {
  /* Add any common styles for all flex items */
}

<div class="flex-container">
  <div class="flex-item flex-item-1">Item 1</div>
  <div class="flex-item flex-item-2">Item 2</div>
  <div class="flex-item flex-item-3">Item 3</div>
  <div class="flex-item flex-item-4">Item 4</div>
</div>