flex-direction ගුණය
flex-direction ගුණය ප්රධාන හා හරස් අක්ෂයේ දිශාව සකසයි
හෝ, වෙනත් වචන වලින් කිවහොත්, මූලද්රව්ය පේළියක හෝ තීරුවක
සකසයි.
Flex බ්ලොක් සඳහා මව් අංගයට අදාළ වේ. කෙටි ගුණය
flex-flow හි කොටසකි.
වාක්ය රීතිය
තේරුම් ගන්නා {
flex-direction: row | row-reverse | column | column-reverse;
}
අගයන්
| අගය | විස්තරය |
|---|---|
row |
ප්රධාන අක්ෂය වමේ සිට දකුණට යොමු වේ. මූලද්රව්ය පේළියක පිහිටා ඇත, පෙරනිමියෙන් වම් මායිමට යාවන, ඒවායේ අංකනය සාමාන්ය පිළිවෙල ඇත - වමේ සිට දකුණට. |
row-reverse |
ප්රධාන අක්ෂය දකුණේ සිට වමට යොමු වේ. මූලද්රව්ය පේළියක පිහිටා ඇත, පෙරනිමියෙන් දකුණු මායිමට යාවන, ඒවායේ අංකනය ප්රතිලෝම පිළිවෙල ඇත - දකුණේ සිට වමට. |
column |
ප්රධාන අක්ෂය ඉහල සිට පහළට යොමු වේ. මූලද්රව්ය තීරුවක පිහිටා ඇත, පෙරනිමියෙන් ඉහළට යාවන, ඒවායේ අංකනය සාමාන්ය පිළිවෙල ඇත - ඉහල සිට පහළට. |
column-reverse |
ප්රධාන අක්ෂය පහළ සිට ඉහළට යොමු වේ. මූලද්රව්ය තීරුවක පිහිටා ඇත, පෙරනිමියෙන් පහළට යාවන, ඒවායේ අංකනය ප්රතිලෝම පිළිවෙල ඇත - පහළ සිට ඉහළට. |
පෙරනිමි අගය: row.
උදාහරණය
මූලද්රව්ය පේළියක පිහිටා ඇත, පෙරනිමියෙන් වම් මායිමට යාවන, ඒවායේ අංකනය සාමාන්ය පිළිවෙල ඇත - වමේ සිට දකුණට:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
flex-direction: row;
display: flex;
}
#parent > div {
border: 1px solid #696989;
width: 100px;
height: 50px;
}
:
උදාහරණය . row-reverse අගය
මූලද්රව්ය පේළියක පිහිටා ඇත, පෙරනිමියෙන් දකුණු මායිමට යාවන, ඒවායේ අංකනය ප්රතිලෝම පිළිවෙල ඇත - දකුණේ සිට වමට:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
flex-direction: row-reverse;
display: flex;
}
#parent > div {
border: 1px solid #696989;
width: 100px;
height: 50px;
}
:
උදාහරණය . column අගය
මූලද්රව්ය තීරුවක පිහිටා ඇත, පෙරනිමියෙන් ඉහළට යාවන, ඒවායේ අංකනය සාමාන්ය පිළිවෙල ඇත - ඉහල සිට පහළට:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
flex-direction: column;
display: flex;
}
#parent > div {
border: 1px solid #696989;
width: 100px;
height: 50px;
}
:
උදාහරණය . column-reverse අගය
මූලද්රව්ය තීරුවක පිහිටා ඇත, පෙරනිමියෙන් පහළට යාවන, ඒවායේ අංකනය ප්රතිලෝම පිළිවෙල ඇත - පහළ සිට ඉහළට:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
flex-direction: column-reverse;
display: flex;
}
#parent > div {
border: 1px solid #696989;
width: 100px;
height: 50px;
}
:
මෙයත් බලන්න
-
justify-contentගුණය,
ප්රධාන අක්ෂය දිගේ පෙළගැස්ම නියම කරයි -
align-itemsගුණය,
හරස් අක්ෂය දිගේ පෙළගැස්ම නියම කරයි -
flex-wrapගුණය,
flex බ්ලොක් වල බහු පේළි ගුණය නියම කරයි -
flex-flowගුණය,
flex-direction සහ flex-wrap සඳහා කෙටි ආකෘතිය -
orderගුණය,
flex බ්ලොක් වල පිළිවෙල නියම කරයි -
align-selfගුණය,
තනි බ්ලොක් එකක පෙළගැස්ම නියම කරයි -
flex-basisගුණය,
නිශ්චිත flex බ්ලොක් එකක ප්රමාණය නියම කරයි -
flex-growගුණය,
flex බ්ලොක් වල වර්ධනය වීමේ සාධකය නියම කරයි -
flex-shrinkගුණය,
flex බ්ලොක් වල හකුලීමේ සාධකය නියම කරයි -
flexගුණය,
flex-grow, flex-shrink සහ flex-basis සඳහා කෙටි ආකෘතිය
