اردو میں جدید کوڈنگ زبان ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا یہ گیارواں لیچکچر ہے ۔ یہ لیکچر انتہائی آسان زبان اور آسانی سے سمجھ میں آنے والی کوڈنگ میں لکھا گیا ہے ۔ اس زبان کو ایک نو دس سال کا بچہ بھی آسانی سے سمجھ سکتا ہے ۔۔ تو آئیے شروع کرتے ہیں آج کا گیارواں لیکچر ۔CSS فلیکس باکس اور گرڈ کیسے بنائیں ۔ لیکچر 11
فلیکس باکس کیا ہے؟
فلیکس باکس ماڈیول کا مقصد عناصر کو ایک کنٹینر کے اندر ترتیب دینے کا ایک زیادہ موثر طریقہ فراہم کرنا ہے، چاہے ان کا سائز نامعلوم ہو یا متحرک ہو۔
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>فلیکس کنٹینر کی خصوصیات میں شامل ہیں flex-direction, flex-wrap, justify-content, اور align-items.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS گرڈ
گرڈ کیا ہے؟
CSS گرڈ لے آؤٹ ماڈیول قطاروں اور کالموں پر مشتمل ایک گرڈ پر مبنی لے آؤٹ سسٹم پیش کرتا ہے، جس سے پیچیدہ ویب ڈیزائن بنانا آسان ہو جاتا ہے۔
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style><div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>