Tämä artikkeli näyttää, kuinka tekstiä voidaan tasata pystysuunnassa flexboxin sisällä:
Tapa 1: Käytä 'align-item' -ominaisuutta
Tekstin tasaamiseksi pystysuunnassa käyttäjät voivat käyttää ' kohdista-kohde CSS:n tarjoama omaisuus. Se auttaa elementtejä asettamaan kohdistuksensa flexboxin sisällä. Mahdolliset pystysuuntaiset kohdistusasennot voivat olla kohdassa ' alkuun ”, keskellä ”, tai ” pohja ” puolella.
Käytännön esitykset elementtien kohdistamisesta näihin suuntiin on esitetty alla:
Esimerkki 1: Ylin sijainti
Tasataksesi tekstin flexboxin sisällä yläasentoon, ' flex-start ' arvo annetaan ' kohdista-kohteet ” omaisuutta. Tämä ominaisuus on määritetty päädivisioon, joka näytetään joustavana. Oletetaan, että div, jonka luokka on ' pystysuora ” luodaan HTML-tiedostoon. Valitse sitten CSS-tiedostosta kyseinen luokka ja määritä seuraavat ominaisuudet:
.pystysuora {
väri : valkoinen ;
korkeus : 150 pikseliä ;
näyttö : flex ;
pehmuste-vasen : 20px ;
kohdista kohteet : flex-start ;
taustaväri : metsänvihreä ;
}
- Ensin div:lle annetaan perustyyli ja kohdistus käyttämällä CSS:n väri-, taustaväri- ja korkeusominaisuuksia.
- 'Display'-ominaisuus on myös asetettu 'flex', jotta siitä tulee flexbox.
- Lopuksi, jos haluat näyttää tekstin flexboxin alussa, aseta 'align-items' -ominaisuuden arvoksi 'flex-start.
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos näyttää, että teksti on nyt tasattu yläasentoon flexboxin sisällä.
Esimerkki 2: Keskiasento
Tasaa teksti pystysuunnassa keskikohtaan asettamalla ' keskusta 'arvo CSS:lle' kohdista kohteet ”omaisuus:
.pystysuora {väri : valkoinen ;
korkeus : 150 pikseliä ;
näyttö : flex ;
pehmuste-vasen : 20px ;
kohdista kohteet : keskusta ;
taustaväri : metsänvihreä ;
}
Yllä olevan koodin suorittamisen jälkeen:
Yllä oleva tulos näyttää, että teksti on nyt tasattu flexboxin keskelle.
Esimerkki 3: Pohja-asento
Jos haluat asettaa tekstin flexboxin alareunaan, määritä ' joustava pää ' arvo ' kohdista-kohteet ” omaisuutta. Tällä kertaa teksti tasataan kohtaan, jossa flexbox päättyy tarkoittaa alareunassa:
.pystysuora {väri : valkoinen ;
korkeus : 150 pikseliä ;
näyttö : flex ;
pehmuste-vasen : 20px ;
kohdista-kohteet : joustava pää ;
taustaväri : metsänvihreä ;
}
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Yllä oleva tulos näyttää, että teksti on nyt tasattu pystysuunnassa ala-asennossa.
Tapa 2: Käytä 'justify-content' -ominaisuutta
' perustele-sisältö ”-ominaisuutta voidaan käyttää myös tekstin tasaamiseen pystysuoraan flexboxin sisällä. Se toimii kuitenkin samalla tavalla kuin ' tekstin tasaus ”-ominaisuutta ja se tasaa elementit rivin suuntaan. Joten, jos haluat muuttaa kohdistussuuntaa, ' flex-suunta '-ominaisuutta käytetään asettamaan ' perustele-sisältö 'linjaus kohti' sarakkeessa 'suunta:
.pystysuora {korkeus : 150 pikseliä ;
näyttö : flex ;
pehmuste-vasen : 20px ;
väri : valkoinen ;
taustaväri : tumma syaani ;
flex-suunta : sarakkeessa ;
perustele-sisältö : joustava pää ;
}
Yllä olevan koodin selitys on alla:
- ' korkeus ”, “ väri ' ja ' pehmuste-vasen ”-ominaisuudet toimivat kuten yllä oleva menetelmä.
- Aseta sen jälkeen ' sarakkeessa ' arvo ' flex-suunta flexboxista, jos haluat käyttää tyylejä sarakkeiden kautta.
- Sen jälkeen ' perustele-sisältö ”-ominaisuus tasaa tekstin pystysuunnassa.
- Lopulta ' joustava pää ' arvo kohdistaa elementin ' pohja ” puolella.
Huomautus : Käyttäjät voivat myös asettaa ' flex-start ' ja ' keskusta ' arvot ' alkuun ”, ja ” keskellä ” sivuille.
Esimerkiksi yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Yllä oleva tulos näyttää, että teksti on tasattu flexboxin alareunaan.
Johtopäätös
Tasaaksesi tekstin pystysuoraan flexboxin sisällä, ' kohdista-kohteet ' ja ' perustele-sisältö ” CSS-ominaisuuksia voidaan hyödyntää. Molemmat nämä ominaisuudet saavat ' flex-start ”, “ keskusta ' tai ' joustava pää ' arvot tasataksesi tekstin kohtaan ' alkuun ”, “ keskellä ' ja ' pohja ”-ohjeet flexboxin sisällä. Tämä artikkeli on osoittanut tekstin pystysuuntaisen tasauksen flexboxissa.