it-swarm.com.de

Wie kann ich drei Spalten pro Zeile anzeigen?

Ich habe versucht, drei Spalten pro Zeile anzuzeigen. Ist es möglich, flexbox zu verwenden?

Mein aktuelles CSS sieht ungefähr so ​​aus:

.mainDiv {
    display: flex;
    margin-left: 221px;
    margin-top: 43px;
}

Dieser Code fasst den gesamten Inhalt in einer einzigen Zeile zusammen. Ich möchte eine Einschränkung hinzufügen, um nur drei Datensätze pro Zeile anzuzeigen.

52
maxspan

Dies könnte das sein, wonach Sie suchen:

http://jsfiddle.net/L4L67/

body>div {
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}

body>div>div {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}

body>div>div:nth-child(even) {
  background: #23a;
}

body>div>div:nth-child(odd) {
  background: #49b;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
100
Barun

Obwohl die obige Antwort richtig zu sein scheint, wollte ich ein (hoffentlich) besser lesbares Beispiel hinzufügen, das auch in Form von 3 Spalten in verschiedenen Breiten bleibt:

.flex-row-container {
    background: #aaa;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.flex-row-container > .flex-row-item {
    flex-grow: 1;
    flex: 1 1 30%;
    height: 100px;
}

.flex-row-item {
  background-color: #fff4e6;
  border: 1px solid #f76707;
}
<div class="flex-row-container">
  <div class="flex-row-item">1</div>
  <div class="flex-row-item">2</div>
  <div class="flex-row-item">3</div>
  <div class="flex-row-item">4</div>
  <div class="flex-row-item">5</div>
  <div class="flex-row-item">6</div>
</div>

Hoffe das hilft jemand anderem.

9
RoboBear

Versuchen Sie es mit diesem Rasterlayout:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>
1
HAPPY SINGH