CSS හි Flexboxes සමඟ වැඩ කිරීම
ඔබ දන්නා පරිදි, justify-content යන දේපලක් ඇත,
එය මූලික අක්ෂය දිගේ මූලද්රව්ය සම කරයි.
align-items යන දේපල ද ඇත, එය
හරස් අක්ෂය දිගේ මූලද්රව්ය සම කරයි. අපි
එය සමඟ ටිකක් සෙල්ලම් කරමු.
දැන් අපගේ බ්ලොක් පේළියක් තුළ පිළිවෙලට යොදා ඇතැයි සිතමු,
එනම් හරස් අක්ෂය පහළට යොමු කර ඇත.
align-items භාවිතයෙන් මෙම බ්ලොක්
මධ්යයට යොමු කරමු:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
දැන් අපි තවත් බ්ලොක් එකතු කරමු,
flex-wrap භාවිතයෙන් බහු-පේළි ගතිය එකතු කරමු,
මාපියයාගේ උස 300px සිට
500px දක්වා වැඩි කර align-items
මෙම බහු-පේළි අවස්ථාවේදී ක්රියා කරන ආකාරය බලමු:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
අපට පෙනෙන පරිදි, එය හොඳින් මධ්යගත නොවේ. සෑම පේළියක්ම තමන්ට නියම කර ඇති ස්ථානයේදීම මධ්යගත වන ආකාරයට පෙනේ. අපි එය කරමු සියලු පේළි එක් සමස්තයක් ලෙස මාපියයාගේ මධ්යයට ගෙන ඒම සඳහා.
මේ සඳහා align-content දේපල භාවිතා කළ යුතුය,
එය බහු-පේළි ගතිය සඳහා අවශ්ය වේ.
අපගේ කේතය නැවත ලියමු:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
align-content දේපල එම
මූලික අගයන් align-items මෙන් ගනී.
space-between අගය
උදාහරණයක් වශයෙන් අපි අගය දෙස බලමු
space-between. මාපියයාට
උස 320px ලෙස සකසමු. අපට පේළි තුනක් ඇති බැවින්,
ඒ අනුව පේළි අතර දුර දෙකක් ඇත,
එවිට මෙම දුර සෑම එකක්ම
10px ට සමාන වේ:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
stretch අගය
stretch අගය අත්හදා බලමු.
මේ සඳහා දරුවන්ගේ උස ඉවත් කරමු, මාපියයාගේ
උස 600px ලෙස සකසමු වඩාත්
පැහැදිලි බලපෑමක් සඳහා.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
align-content සඳහා stretch අගය වන්නේ
පෙරනිමි අගයයි. අපි දරුවන්ගේ උස
සම්පූර්ණයෙන්ම ඉවත් කරමු, align-content දේපල ඉවත් කරමු,
නමුත් මාපියයාගේ උස සහ flex-wrap
අත්හැර දමන්න - සියල්ල එලෙසම ක්රියා කරනු ඇත:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
නමුත් flex-wrap ද ඉවත් කරන්නේ නම්
- සියල්ල තනි-පේළි බවට පත්වේ:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
අක්ෂය හරවමු
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
විශේෂ තත්වයන්
flex-wrap: wrap නොමැතිව කිසිවක් ක්රියා නොකරයි අපට එක් රේඛාවක් ඇතැයි සිතමු:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
flex-wrap: wrap ඉවත් කරමු - align-content: center ක්රියා කිරීම නවත්වනු ඇත:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
