CSS flexbox pamati – ” elastīgā kaste “
Šajā rakstā es jums pastāstīšu kā darbojās dažādi izkārtojumi un režģa struktūras, lai jūs izprastu kā sākt lietot flexbox. Izpētīsim dažus praktiskus piemērus, kā to izmantot. Šajā rakstā izpētīseit, kādi ir trīs visizplatītākie flexbox lietojumi. Elastīgās kastes ir vairāk piemērotas vienkāršam izkārtojumam vai vienkāršu lapas elementu noformēšanai. Atbilstoši šai idejai izpētīsim dažus bieži lietotus dizaina elementus, ko parasti varat redzēt lapās. Jūs atklāsiet vienkāršus veidus, kā izmantot “elastīgās kastes”, lai savienotu elementus kopā vai izveidotu vienkāršu izkārtojumu. Izpētīsim trīs visbiežāk sastopamos flexbox lietojumus ko mums piedāvā CSS. Pirmais flexbox paņēmiens, kas tiks plaši izmantots, ir meklēšanas josla “search bar”. Meklēšanas joslās varat izmantot flex, jo tas saista visus elementus, piemēram, mazo meklēšanas ikonu, meklēšanas ievades apgabalu un pogu “Meklēt” , kas paredzēta meklēšanas vaicājuma iedarbināšanai. Pēc tam varēsim izveidot navigācijas joslu, izmantojot flex, kas sastāv no vairākiem dažādiem izkārtojumiem, un tas padara jūsu navigācijas joslu ļoti atsaucīgu dažādās ierīcēs. Visbeidzot, cita veida flexbox, ko parasti izmanto, ir attēlu galerija. Flexi šeit ir noderīgi, jo tie var mainīties, mainot loga izmēru. Tātad tagad Jūs uzzināsiet, kā izveidot šos elastīgos lodziņus, lai nodrošinātu vienkāršu izkārtojumu.
Pirmais Flexbox piemērs: “Meklēšanas lodziņš”
Pirmajā flexbox faila piemērā es izveidošu meklēšanas joslu, izveidoju vienkāršu pamata HTML dokumentu un pievienoju atsauci uz CSS failu HTML lapas galvas <head> sadaļā.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="flexbox_meklis.css"> <!-- Atsauce uz CSS failu -->
</head>
<body>
</div>
</body>
</html>
Pēc tam es pievienoju saturu mūsu HTML koda pamatdaļas sadaļā. Vispirms es izveidoju konteinera klasi ar div tagu. Šajā konteinerā man ir trīs dažādi elementi, kas ir
- meklēšanas ikona,
- meklēšanas lodziņš, kurā ierakstīt savu meklējumu,
- un visbeidzot poga Iesniegt.
<div class="container"> <!-- Konteinera klase -->
<img class="ikona" src="icon.png" alt="Mekļa attēls" style="width: 46px; height: 46px;"> <!-- Meklēšanas ikona lodziņa noformējumam -->
<input class="searchbox" type="search" name="search" placeholder="Ievadi meklējamo frāzi..."> <!-- Meklēšanas lodziņš -->
<input type="submit" value="Iesniegt" class="searchButton"> <!-- Meklēšanas poga --><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="flexbox_search.css">
</head>
<body>
<div class="container"> <!-- Konteinera klase -->
<img class="ikona" src="icon.png" alt="Mekļa attēls" style="width: 46px; height: 46px;"> <!-- Meklēšanas ikona lodziņa noformējumam -->
<input class="meklēšanasLodziņš" type="search" name="search" placeholder="Ievadi meklējamo frāzi..."> <!-- Meklēšanas lodziņš -->
<input type="submit" value="Iesniegt" class="meklēšanasPoga"> <!-- Meklēšanas poga -->
</div>
</body>
</html>Tad protams mums jāizveido mūsu CSS koda fails, kuru jau sākumā pieteicām un sasaistijām at HTML dokumentu.
Izveidotajā CSS failā, CSS kodā es vispirms ierakstu noteikumus konteineram,
.container {
display: inline-flex;
flex: 1 1 300px;
border-radius: 10px;
border: 1px solid #ccc;
overflow: hidden;
}pēc tam meklēšanas ikonai,
.ikona {
padding: 0.8 rem;
}meklēšanas lodziņam
.meklēšanasLodziņš {
border: 0;
flex: 1;
}un visbeidzot pogai.
Lielākā daļa šeit definēto rekvizītu ir atlasītāju izlīdzināšanas iestatījumi. Ir tikai dažas svarīgas lietas, kas jāņem vērā. Displeja rekvizīts, ko izmantoju, ir inline flex, nevis flex, kas liek flex konteineram darboties kā iekļautam elementam. Vēl viens īpašums, kas jāņem vērā, ir overflow. Overflow rekvizīts izgriež pārpildītu saturu, kas šajā gadījumā būs teksts, ko ievadu meklēšanas vaicājumā. Pēc tam pievienoju ikonas un meklēšanas lodziņa rekvizītus. Visbeidzot es pievienoju pogas Meklēt rekvizītus. Tagad meklēšanas lodziņā tiek parādīti rekvizīti, kurus definēju savā CSS failā. Ņemiet vērā, ka, mainot lapas izmēru, meklēšanas apgabals nemainās.
Otrais piemērs: Navigācijas izvēlne
Vēl viena vieta, kur flexbox tiek izmantots diezgan bieži, ir navigācijas izvēlnes. Šajā gadījumā es izveidoju nesakārtotu sarakstu (unordered list <ul>) , kas sastāv no četriem vienumiem un tāpat, kā iepriekš jau sākumā piesaistu HTML dokumentam atsevišķu CSS failu, kurā ar kodu noteiksim šīs vienkāršās izvēlnes stilus.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="flexbox5.css">
</head>
<body>
<ul class="container">
<li><a href="#">Mājas</a></li>
<li><a href="#">Mans Blogs</a></li>
<li><a href="#">Ziņas</a></li>
<li><a href="#">Par mani</a></li>
</ul>
</body>
</html>Ņemiet vērā, ka savā CSS kodā es izmantoju kaut ko, ko sauc par zvaigznīti (*) vai universālo atlasītāju. Universālais atlasītājs piemēro noteikumus katram mana CSS koda elementam. Es to izmantoju, lai deklarētu jebkuru pārlūkprogrammai raksturīgu formatējumu. Tagad es definēju konteinera noteikumus.
* { /* universālais selektors */
margin: 0;
padding: 0;
}
.container { /* konteiners */
background-color: #2b2d42;
display: flex;
flex-flow: row wrap;
justify-content: stretch;
}
.container li { /* saraksta konteiners */
list-style-type: none;
}
.container a { /* enkura konteiners */
display: inline-block;
padding: 25px;
margin: 0 25px;
text-align: center;
text-decoration: none;
color: #ffffff;
}Ir svarīgi ievērot, ka es izmantoju flex-flow, kas ir saīsināts rekvizīts, kas norāda elastīgā konteinera virzienu un tā uzvedību iesaiņošanai (row wrap). Vēl viena svarīga īpašība ir attaisnot saturu, kas izlīdzina elastīgo konteineru vienumus gar galveno asi. Šajā gadījumā esmu iestatījis to stiept. Tā kā atsevišķie elementi ir daļa no konteinera, es piemēroju noteikumus gan konteineram, gan elementiem, kas ir saraksta vienumi, enkurs(anchor <a>), atzīme utt. Ir arī svarīgi ievērot, ka lapa ir atsaucīga. Tā kā pārlūkprogrammas loga izmērs atsevišķos ekrānos var kļūt mazāks, vienumi tiek sakrauti viens virs otra, un, ja es izvēršu logu, tas mainās uz standarta horizontālās navigācijas izvēlni.
Trešais piemērs: Attēlu galerija
Pēdējais flexbox piemērs, ko es parādīšu, ir atsaucīga attēlu galerija. Visi galerijas elementi atrodas HTML faila pamattekstā. Ir div elements ar klases konteineru, kas sastāv no sešiem attēliem, (attēlus protams Tev vajadzēs pievienot savus ieliekot tajā pašā mapē, kur atrodās HTML fails un pielāgojot nosaukumus, kā arī failu paplašinājumus) kas tiek saglabāti projekta mapē.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" src="flexbox7.css">
</head>
<body>
<div class="container">
<img class="bilde" src="1.jpeg" alt="Piemēra attēls" style="width: 240px; height: 240px;">
<img class="bilde" src="2.jpeg" alt="Piemēra attēls" style="width: 240px; height: 240px;">
<img class="bilde" src="3.jpeg" alt="Piemēra attēls" style="width: 240px; height: 240px;">
<img class="bilde" src="4.jpeg" alt="Piemēra attēls" style="width: 240px; height: 240px;">
<img class="bilde" src="5.jpeg" alt="Piemēra attēls" style="width: 240px; height: 240px;">
<img class="bilde" src="6.jpeg" alt="Piemēra attēls" style="width: 240px; height: 240px;">
</div>
</body>
</html>Tagad atveram CSS failu. Pirmkārt, es noņemu visus pārlūkprogrammai raksturīgos iestatījumus, kas tur var būt, izmantojot zvaigznīšu atlasītāju tāpat kā iepriekš. Es iestatīju gan margin, gan padding vērtību uz nulli. Pēc tam es atiestatīju attēlu pamata izlīdzināšanas opcijas, iestatot apmali uz nulli. Tālāk pievērsīsimies konteineram. Vispirms es iestatu displeja vērtību uz flex, pēc tam pievienoju flex-wrap rekvizītu, kas nosaka, vai elastīgie vienumi ir jāievieto vienā rindā vai jāaptver vairākās rindās. Tālāk es attaisnoju satura rekvizītu, kas izlīdzina elastīgos konteinera vienumus uz horizontālās galvenās ass, iestatot līniju starp attēliem. Visbeidzot es pievienoju padding “polsterējumu”. Ja izvades logs ir šaurs, tad visi seši attēli ir sakrauti viens virs otra. Bet, kad es paplašinu logu, tad tie sakārtojās vienā līnijā.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
border: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5px;
}
.bilde {
margin: 5px;
}Nobeigumā…
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.