Flexboxin uskomaton teho

Sep 11, 2025

Miten tehdään

Flexbox tai joustava laatikkoasema on tehokas CSS-asettomoduuli, joka antaa web-suunnittelijat ja kehittäjät tehokkaaseen ja yksinkertaisen tavan luoda, kohdistaa ja jakaa elementtejä säiliössä. Se ratkaisee monia layout-ongelmia, joita olemme kamppailevat ratkaisemaan pitkään.

Flexboxin perusteet

Perusmuodossaan Flexbox koostuu kahdesta elementistä: Flex Container (tai Flex Vanhempi) ja Flex-kohteet (Flex-lapset). Flex-säiliö on sisältävä elementti (kuten a jakaa ) Näytön ominaisuus taivuttaa . Flex-kohteet ovat Flex-astian lapsielementtejä, joita voidaan manipuloida erilaisten näyttöominaisuuksien kautta.

Flex-astioilla ja Flex-tuotteilla Jokaisella on oma ominaisuudet, jotka voidaan yhdistää eri tavoin luoda erilaisia monimutkaisia ulkoasuja. Flex-säiliön sisällä olevat kohteet voidaan säätää vaakasuoraan tai pystysuoraan, kohdistaa ja jakaa eri tavoin ja venyttää tai kutistua sopivaan tilaan. Kaikkien näiden vaihtoehtojen avulla voit helposti luoda reagoivia asetteluja.

Kuinka käyttää Flexboxia

Aloita Flexboxin avulla sinun on ensin luotava Flex Container (vanhempi elementti, joka sisältää Flex-kohteet). Tässä esimerkissä käytämme a jakaa lohko. Ennen kuin tunnemme elementin, lisätään kolme muuta jakaa Lohkot Flex Containerin sisällä toimimaan Flex-kohteina. Tässä vaiheessa kohteet pinotaan.

Lapsamme jakaamme paikallaan, voimme asettaa vanhemman kontin näytön omaisuuden taivuttaa .

 Flex Container {
Näyttö: Flex;
}

Layout-ohjeet

Layout-suunta on yksinkertaisesti suunta, jonka elementit jakavat itsensä. Flex-astian oletussuunta on rivi , joka näyttää lapsielementit vaakasuoraan. Voit vaihtaa asettelun pystysuoraan asettamalla suunta sarake .

 Flex Container {
Näyttö: Flex;
Flex-Suunta: Rivi;
}

Flex Container {
Näyttö: Flex;
Flex-Suunta: sarake;
}

Kumpi tahansa suunta, jonka asetat Flex-astiaan, kutsutaan sen "tärkein" suuntaan, kun taas toinen suunta, jota et valitse, tulee "Cross" -suunta. Näin ollen pääasiallinen suunta on vaakasuora ja ristin suunta on pystysuora.

Flexbox myös voit myös kääntää ulkoasun. Kun käännetyt, Flex-säiliön lapset asetetaan oikealle vasemmalle (jos suunta on rivi ) tai alhaalta ylöspäin (jos suunta on sarake ).

 Flex Container {
Näyttö: Flex;
Flex-suunta: rivi-käänteinen;
}

Flex Container {
Näyttö: Flex;
Flex-Suunta: Pylväs-käänteinen;
}

Tämä voi olla kätevä, jos haluat peruuttaa asettelun pienempiin näytöihin.

Esimerkiksi sanovat työpöydän näytöillä, jotka haluat näyttää tekstin näytön vasemmalla puolella ja kuva oikealla (katso yllä olevaa surfboardia yllä). Matkapuhelimessa tämä siirrät kuvan tekstin alapuolelle. Taaksepäin suuntaan voit varmistaa, että kuva näkyy sen sijaan tekstin yläpuolella.

Säädä kohdistus

Flexboxin asetukset antavat myös kaksi erilaista menetelmää sisällön kohdistamiseksi: pystysuoraan ja vaakasuoraan. Tässä ovat horisontaaliset kohdistusvaihtoehdot Flex-astian sisällä oleville kohteille:

flex-start : Tuotteet, jotka on asetettu rivin alkupuolelle (vasemmalle, ellet ole kääntänyt ulkoasua)

keskusta : Tuotteet, jotka keskittyvät riviin

flex-end : Kohteet, jotka on asetettu rivin loppuun (oikealle, ellet ole kääntänyt ulkoasua)

välilyönti : Erät tasaisesti jakautuvat rivillä

avaruus : Erät jakautuvat tasaisesti rivillä, yhtä tilaa kummallekin puolelle

Joten koodi saattaa näyttää tältä:

 Flex Container {
Näyttö: Flex;
Flex-Suunta: Rivi;
Align-Sisältö: Flex-Start | Flex-End | Keskus | Space-väliset | Space-around | venyttää;
}

Tässä ovat vertikaaliset kohdistusvaihtoehdot Flex-astian kohteisiin:

flex-start : Tuotteet, jotka on kohdistettu rivin yläosaan

keskusta : Tuotteet keskittyvät riviin

flex-end : Tuotteet, jotka on kohdistettu rivin pohjaan

venyttää : Tuotteet, jotka on venytetty rivin korkeuden yli

perusviiva : Kohteet, jotka ovat linjassa niiden perusviivoihin (kuvitteellinen linja, jonka teksti istuu)

Koodi saattaa näyttää tältä:

 Flex Container {
Näyttö: Flex;
Flex-Suunta: Rivi;
Kohdista kohteita: Flex-Start | Flex-End | Keskus | perusviiva | venyttää;
}

Oletusarvoisesti Flex Containerin lapset yrittävät aina sovittaa yhteen riviin. Jos haluat muuttaa tätä, voit lisätä kääriä attribuutti. Näin lapset voivat kääriä uuteen riviin, jos ne loppuvat tilasta.

 Flex Container {
Näyttö: Flex;
Flex-Wrap: Kääri;
}

Flex-tuotteet saavat myös omat flex-pohjaiset ominaisuudet. Kun elementti sijoitetaan flex-astiaan, se tulee automaattisesti joustavaksi lapselle, ja se myönnetään oma joukko Flex-pohjaisia CSS-tyylejä. Nämä tyylit ohjaavat mitoitusta, kohdistusta ja näyttöjärjestystä.

Flex Mitoitus

Flex-lapset voivat muuttaa niiden leveyttä tai korkeutta (riippuen astian ulkoasun suunnasta) täyttämään käytettävissä oleva tila.

WebFlow antaa sinulle kolme esiasetettua vaihtoehtoa Flex Mitoitus: kutistu tarvittaessa, täytä tyhjä tila ja älä kutistele. Huomaa, että jokaisella lapsi-elementillä voi olla omat asetukset, mikä mahdollistaa lukuisten suunnitteluvaihtoehtojen.

 Flex Tuote {
Flex-Shrink: & lt; numero & gt ;;
Flex-Grow: & lt; numero & gt ;;
Flex-perusta: & lt; pituus & gt; | auto;
}

Katsotaanpa, mitä kukin näistä vaihtoehdoista tekee:

Kutistuminen tarvittaessa: Koko tuote perustuu sen leveyden / korkeuteen tai sen sisällön perusteella. Kohde ei kasvaa suuremmaksi kuin se tarvitsee, mutta voi kutistua sen vähimmäiskokoon estääkseen ylivuotoa
Täytä tyhjä tila: Antaa kohteen laajentamisen täyttämään kaikki käytettävissä olevat tilat vanhemmansa sisällä. Jos asetat tämän kaikkiin kohteisiin Flex-astiaan, ne laajenevat ottamaan yhtä suuret tyhjät tilat
Älä kutisata: Koko tuote perustuu sen leveyden / korkeuteen tai sen sisällön perusteella, mutta ei salli sitä kutistua, vaikka se aiheuttaa ylivuotoa

Flex-tuotteilla voi olla myös omat kohdistusasetukset, jotka ohitetaan niiden vanhemman Flex-astian asettaman oletusarvon. Nämä kohdat käyttäytyvät aiemmin selitettiin.

 Flex Tuote {
Näyttö: Flex;
Flex-Suunta: Rivi;
Kohdista kohteita: Flex-Start | Flex-End | Keskus | perusviiva | venyttää;
}

Oletusarvoisesti Flex kohteet näyttö samassa järjestyksessä kuin ne näkyvät lähdekoodissa. Flexboxilla voit ohittaa tämän käyttäytymisen varmistaakseen, että elementit näyttävät juuri haluamallasi tilauksessa.

Nämä neljä päävaihtoehtoa voit käyttää täällä:

Auto : Oletusarvo, joka tilaa kohteita, kun ne ovat lähteessä
Ensimmäinen : Tuote ilmestyy ensin Flex-astiaan
Kestää : Tuote näkyy viimeisenä Flex Containerissä
Mukautettu : Voit muokata tilauksen, jonka kohde näkyy

Mukautettu tilaus voidaan määrittää numeroksi, mikä määrittää järjestyksen, jossa Flex-kohde näkyy Flex-astian sisällä.

 Flex Tuote {
Tilaus: & lt; kokonaisluku & gt ;;
}

Miksi minun pitäisi käyttää sitä?

Olen iloinen, että kysyit! Flexboxin avulla voit helposti luoda reagoivia asetteluja, jotka olivat kerran erittäin vaikeita (tai mahdottomia) luomaan vanhempien CSS-asettomoduulien kanssa.

Katsokaa esimerkkejä alla olevista esimerkeistä - joista monet olet todennäköisesti jo nähnyt verkossa. Lähes kaikki niistä ottaisivat huomattavan määrän CSS: tä (erityisesti eri näytön kokoisia), mutta vain muutaman yksinkertaisen rivin saavuttamiseksi Flexboxilla. Nähdä näitä esimerkkejä toiminnassa, käy flexbox.webflow.com .

Flexboxin uskomaton teho

Flexboxin perusteet

Kuinka käyttää Flexboxia

Layout-ohjeet

Säädä kohdistus

Flex Mitoitus

Miksi minun pitäisi käyttää sitä?

Miten tehdään - Suosituimmat artikkelit

Kuinka vetää höyheniä

Kuinka luoda fotorealistisen huoneen kohtauksen

Maali 3D-verkkoon Zbrushcoren polypain-työkalulla

Miten hallita CSS-luokkia JavaScript

Tee realistiset kasvit Cinema 4D

Luo upeita terveellisiä tekstuureja tehosekoittimessa

Vektorityökalujen käyttö: Web Designerin lähestymistapa

Kehitä karikatuuritaidot

Luokat