Pou na katoxrepsete: isohorika kolumena

Mikro didaskalia gia to poios na katoxrepsete isohorika kolumena me to CSS.

Pou na katoxrepsete isohorika kolumena

Kai stin iparxei kai na diaplexontai ta kolumena, thelete na exoun isohora (synenikia me to megalois hysos).

Prosthesete na probaste katechon.

Prwto scholi - Prosthesete HTML:

<div class="col-container">
  <div class="col">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>Column 3</h2>
    <p>Allo gramma..</p>
    <p>Allo gramma..</p>
  </div>
</div>

Dytero scholi - Prosthesete CSS:

.col-container {
  display: table; /* Na parastasei ta stoixeia tou katinomatos kath' auto ta katanomata */
  width: 100%; /* Dinastei me to plathos touto kai na exei exetasis ton holon tin pagen */
}
.col {
  display: table-cell; /* Na parastasei ta stoixeia tou katinomatos kath' auto ta katanomata */
}

Prosthesete na probaste katechon.

Antiponopoiia antiponopoiia

Ta kolumena pou katoxrepsame stin proigoumeni prakseis einai antiponopoiia (an probaste na dimerastei to plathos tou parathuroy brossoy, idete ta auto automata na dimeranetai sto xreos plathos kai hysos). Pero, gia to mikroplathos (katexwristika, smartphones), mporete thelei na kollapso vertikalia kai noto:

Pou gia to auto, prosthesete mia meidias anavashsi, kai xrisimaste mia diastasei pixels:

Eggrafes

/* An to parathuro brossoy tis plathous einai mikroteron tou 600px, na kataskevaste ta kolumena se kollapso */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Prosthesete na probaste katechon.

To Flexbox gia to isohorion kai isoxronon

Mporete kai na katoxrepsete isohoroi kontolai me to Flexbox:

Eggrafes

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Prosthesete na probaste katechon.

Synevastei:O Internet Explorer 10 kai neoteri versiones ou upoxrepsontai to Flexbox.

Related pages

Tutorial:CSS Flexbox