නම්යශීලී කොටු පිරිසැලසුම
CSS නම්යශීලී පෙට්ටියේ පැමිණීමත් සමඟ බොහෝ වෙබ් නිර්මාණකරුවන්ගේ බියකරු සිහින 1 විසඳා ඇත. වඩාත්ම අනවසරයෙන් එකක්, සිරස් පෙලගැස්ම. දැන් එය නොදන්නා උසකින් පවා කළ හැකිය .
"දශක දෙකක පිරිසැලසුම් හක්ක අවසානයකට පැමිණෙමින් තිබේ. සමහර විට හෙට නොව ඉක්මනින් හා අපගේ ජීවිත කාලය පුරාම."
- W3Conf 2013 හි CSS පුරාවෘත්ත එරික් මේයර්
නම්‍යශීලි කොටුව (හෝ කෙටියෙන් කිවහොත්, ෆ්ලෙක්ස්බොක්ස්) යනු පිරිසැලසුම් අරමුණු සඳහා විශේෂයෙන් නිර්මාණය කර ඇති නව පිරිසැලසුම් පද්ධතියකි. මෙම පිරිවිතර රාජ්යයන් :
ෆ්ලෙක්ස් පිරිසැලසුම බ්ලොක් පිරිසැලසුමට මතුපිටින් සමාන වේ. පාවෙන සහ තීරු වැනි බ්ලොක් පිරිසැලසුමේ භාවිතා කළ හැකි වඩාත් සංකීර්ණ පෙළ හෝ ලේඛන කේන්ද්‍රීය ගුණාංග එහි නොමැත. ඒ වෙනුවට වෙබ් අඩවි සහ සංකීර්ණ වෙබ් පිටු බොහෝ විට අවශ්‍ය වන පරිදි අවකාශය බෙදා හැරීම සහ අන්තර්ගතය පෙළගැස්වීම සඳහා සරල හා බලවත් මෙවලම් ලබා ගනී.
මෙම නඩුවේදී එය උදව් කරන්නේ කෙසේද? හොඳයි, අපි බලමු.
සිරස් පෙලගැසී ඇති තීරු
ට්විටර් බූට්ස්ට්රැප් භාවිතා කරමින් අපට .rows කිහිපයක් .col-*තිබේ. අප කළ යුත්තේ අපේක්ෂිත .row2 a ලෙස පෙන්වීම පමණි නම්යශීලී බහාලුම් පෙට්ටියක් ප්රදර්ශනය කර එහි සියලු නම්‍ය අයිතම (තීරු) සිරස් අතට align-itemsදේපල අනුව පෙළ ගැස්වීම පමණි.
උදාහරණ මෙතැන (කරුණාකර අදහස් කියවන්න)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
නිමැවුම්
වර්ණ ගැන්වූ ප්‍රදේශය මඟින් තීරු පෙට්ටිය පෙන්වයි.
පැහැදිලි කිරීම align-items: center
8.3 හරස් අක්ෂ පෙළගැස්ම: ද align-items දේපල
නම්යශීලී බහාලුම්වල වත්මන් රේඛාවේ හරස් අක්ෂයේ නම්යශීලී අයිතම පෙළගස්විය හැකිය justify-content.align-itemsනිර්නාමික නම්‍යශීලි අයිතම ඇතුළුව සියලුම නම්යශීලී බහාලුම් අයිතම සඳහා පෙරනිමි පෙළගැස්ම සකසයි .
align-items: center;
මධ්‍ය අගය අනුව, නම්‍ය අයිතමයේ ආන්තික කොටුව කේන්ද්‍රගත වී ඇත්තේ රේඛාව තුළ හරස් අක්ෂයේ .
බිග් ඇලර්ට්
වැදගත් සටහන # 1: ට්විටර් බූට්ස්ට්රැප් හි සඳහන් නොවේwidth අතිරේක කුඩා උපාංගවල තීරු ..col-xs-# තීරු පන්ති .
එබැවින් මෙම විශේෂිත නිරූපණය තුළ මම භාවිතා කර ඇත .col-xs-* තීරු ජංගම මාදිලියේ නිසි ලෙස පෙන්වීම සඳහා පන්ති .width තීරුවේ නිශ්චිතව .
එහෙත් විකල්පයක් ඔබ හැකි නිවා ඇති Flexbox වෙනස් කිරීම මගින් සරලව පිරිසැලසුම display: flex;කිරීමට display: block;නිශ්චිත තිරය ප්රමාණයෙන්. උදාහරණයක් වශයෙන්:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
නැතහොත් ඔබට විශේෂිත තිර ප්‍රමාණයන්ගෙන් පමණක් සඳහන්.vertical-align කළ හැකිය :
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
එවැනි අවස්ථාවක දී, මම යන්න කැමතියි @KevinNelson ගේ ප්රවේශය .
වැදගත් සටහන # 2: සංක්ෂිප්තතාවය හේතුවෙන් විකුණුම් උපසර්ග මඟ හැරී ඇත. ෆ්ලෙක්ස්බොක්ස් සින්ටැක්ස් කාලය තුළ වෙනස් කර ඇත. නව ලිඛිත වාක්‍ය ඛණ්ඩය පැරණි වෙබ් බ්‍රව්සර් වල ක්‍රියා නොකරනු ඇත (නමුත් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 තරම් පැරණි නොවේ! ෆ්ලෙක්ස්බොක්ස් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සහ ඊට පසුව සහාය දක්වයි).
මෙයින් අදහස් කරන්නේ ඔබ වැනි විකුණුම්කරුගේ උපසර්ග ගුණාංග භාවිතා කළ යුතු බවයි display: -webkit-box නිෂ්පාදන මාදිලියේ බවයි.
ඔබ මත ක්ලික් කරන්න නම් "ටොගල් කරන්න සකස් දැක්ම" තුළ Demo , ඔබ CSS ප්රකාශ කිරීමේ උපසර්ගය අනුවාදය බලන්නම් (ස්තුති Autoprefixer ).
සිරස් පෙලගැසුනු අන්තර්ගතයන් සහිත සම්පූර්ණ උස තීරු
පෙර නිරූපණයේ ඔබ දකින පරිදි , තීරු (නම්‍ය අයිතම) ඒවායේ බහාලුම තරම් වැඩි නොවේ (නම්‍ය බහාලුම් පෙට්ටිය, එනම්.row මූලද්රව්යය).
මෙයට හේතුව දේපල centerසඳහා වටිනාකම භාවිතා කිරීමයි align-items. පෙරනිමි අගය stretchනිසා අයිතමයන්ට මව් මූලද්රව්යයේ සම්පූර්ණ උස පිරවිය හැකිය.
එය නිවැරදි කිරීම සඳහා, ඔබට display: flex;තීරු වලටද එකතු කළ හැකිය :
මෙහි උදාහරණය (නැවතත්, අදහස් මතක තබා ගන්න)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
නිමැවුම්
වර්ණ ගැන්වූ ප්‍රදේශය මඟින් තීරු පෙට්ටිය පෙන්වයි.
අවසාන වශයෙන්, නමුත් අවම වශයෙන් , මෙහි ඇති නිරූපණ සහ කේත ස්නිපෙට් ඔබට වෙනස් අදහසක් ලබා දීමට, ඉලක්කය සපුරා ගැනීම සඳහා නවීන ප්‍රවේශයක් ලබා දීමට අදහස් කරන බව සලකන්න. ඔබ සැබෑ ලෝක වෙබ් අඩවි හෝ යෙදුම් වල මෙම ප්රවේශය භාවිතා කිරීමට යන්නේ නම් කරුණාකර “ බිග් ඇලර්ට් ” කොටස මතක තබා ගන්න .
බ්‍රව්සර් සහාය ඇතුළුව වැඩිදුර කියවීම සඳහා, මෙම සම්පත් ප්‍රයෝජනවත් වනු ඇත:
1. ප්‍රතිචාරාත්මක උසකින් යුත් රූපයක් තුළ රූපයක් සිරස් අතට පෙළගස්වන්න
2. ට්විටර් බූට්ස්ට්රැප් හි පෙරනිමිය වෙනස් නොකිරීමට අතිරේක පන්තියක් භාවිතා කිරීම වඩා හොඳය .row.
div, ඇතුළත පෙළ නැත, මේ jsfiddle.net/corinem/Aj9H9 වැනි දෙයක් නමුත් මෙම උදාහරණයේ දී මම bootstrap භාවිතා