CSS Flexbox

1
2
3
4
5
6
7
8

亲自试一试

CSS فلیکس بکسمودول

فلیکس بکسمودول (آمد) سے پہلے، دستیاب بولیا بولیا ماڈل کے چار طرح کے موجود تھے:

  • بلوک (Block)، ویب پیج میں کسی حصے (شق) کے لئے استعمال کی جاتی ہے
  • این لائن (Inline)، متن کے لئے استعمال کی جاتی ہے
  • جدول، دو میاں جدول کے لئے استعمال کی جاتی ہے
  • پوزیشن، عناصر کی واضح لوکیشن کے لئے استعمال کی جاتی ہے

فلیکس بکسمودول، یہ ایک سادے طور پر منعطف اور جواب دہ بولیا بولیا بچاؤ کی ڈیزائن کا ایک موائل فراہم کرتا ہے، جس میں فلیکس یا پوزیشن استعمال نہیں کیا جاتا

ناوہائیوں کی پشتیبانی

سارے جدید ناوہائیوں میں پشتیبانی کی جاتی ہے فلیکس بکسمعاملات کمپیوٹر پر مبنی خصوصیات

29.0 11.0 22.0 10 48

فلیکس بکسمعاملات

کسی کا مطلب بھیجنا چاہئیے، فلیکس بکسمodel استعمال کرنا شروع کرنا چاہئیے، ابتدا میں آپ کو فلیکس کنٹینر کو تعریف کرنا چاہئیے。

1
2
3

بالائی عنصر تین فلیکس پروجیکٹس والا فلیکس کانٹینر کی نمائش کرتا ہے (کا آبی علاقہ).

实例

تیس پروجیکٹس والا فلیکس کانٹینر:


  
1

  
2

  <div>3</div>

亲自试一试

والیدہ عنصر (کانٹینر):

جبکہ: display خصوصیت کا مقصد: flex، فلیکس کانٹینر قابل انعطاف ہوگا:

1
2
3

实例

.flex-container {
  display: flex;
}

亲自试一试

ایک ساتھ فلیکس کانٹینر کی خاصیتوں کا درج ذیل ہے:

flex-direction کا پارامتر

flex-direction یہ خاصیت کانٹینر کو کس سمت پر فلیکس پروجیکٹس آراستگی کردار کردار کریں گا کا تعین کرتی ہے:

1
2
3

实例

column مقدار فلیکس پروجیکٹس کو عمودی طور پر آراستگی کردار کردار دیتا ہے (up سے down):

.flex-container {
  display: flex;
  flex-direction: column;
}

亲自试一试

实例

column-reverse مقدار فلیکس پروجیکٹس کو عمودی طور پر آراستگی کردار کردار دیتا ہے (down سے up):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

亲自试一试

实例

row مقدار فلیکس پروجیکٹس کو افقی طور پر آراستگی کردار کردار دیتا ہے (left سے right):

.flex-container {
  display: flex;
  flex-direction: row;
}

亲自试一试

实例

row-reverse مقدار فلیکس پروجیکٹس کو افقی طور پر آراستگی کردار کردار دیتا ہے (دexter سے left):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

亲自试一试

flex-wrap کا پارامتر

flex-wrap یہ خاصیت پروجیکٹس کو آراستگی کردار کرنا چاہئے یا نہیں کا مقصد دیتی ہے:

یہ مثال 12 فلیکس پروجیکٹس شامل کرتا ہے، تاکہ فلیکس-وائپ خاصیت کو بہتر دکھایا جاسکے。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

实例

wrap مقدار اگر ضروری ہو تو فلیکس پروجیکٹس کو آراستگی کردار دیتی ہے:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

亲自试一试

实例

nowrap مقدار فلیکس پروجیکٹس کو آراستگی نہ کرنا کا مقصد دیتی ہے (مقصد سے):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

亲自试一试

实例

wrap-reverse مقدار اگر ضروری ہو تو فلیکس پروجیکٹس کی آراستگی کا برعکس کردار دیتی ہے:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

亲自试一试

flex-flow کا پارامتر

flex-flow یہ خاصیت فلیکس-دائری اور فلیکس-وائپ کی خاصیتوں کو ایک ساتھ سیٹ کرنے کیلئے مختصر خاصیت ہے:

实例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

亲自试一试

justify-content کا پارامتر

justify-content یہ خاصیت فلیکس پروجیکٹس کو آلین کرنے کیلئے استعمال کی جاتی ہے:

1
2
3

实例

center مقدار فلیکس پروجیکٹس کو کانٹینر کے مرکز میں آلین کرتی ہے:

.flex-container {
  display: flex;
  justify-content: center;
}

亲自试一试

实例

flex-start مقدار فلیکس پروجیکٹس کو کانٹینر کے شروعات میں آلین کرتی ہے (مقصد سے):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

亲自试一试

实例

flex-end مقدار فلیکس پروجیکٹس کو کانٹینر کے آخری سر میں آلین کرتی ہے:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

亲自试一试

实例

space-around مقدار نمائش کرتی ہے کہ فلیکس پروجیکٹس کے پہلے، درمیان اور بعد میں فضائی فاصلہ ہے:

.flex-container {
  display: flex;
  justify-content: space-around;
}

亲自试一试

实例

space-between مقدار نمائش کرتی ہے کہ فلیکس پروجیکٹس کے درمیان فضائی فاصلہ ہے:

.flex-container {
  display: flex;
  justify-content: space-between;
}

亲自试一试

align-items کا پارامتر

align-items یہ خاصیت فلیکس پروجیکٹس کو عمودی طور پر آلین کرنے کیلئے استعمال کی جاتی ہے。

1
2
3

یہ مثالوں میں، ہم 200 پیکسل کی بلندی والا کانٹینر استعمال کرتے ہیں، تاکہ align-items کی خاصیت کو بہتر دکھایا جاسکے。

实例

center قیمتیں فلیکس پروجیکٹ کو کانٹینر کی وسط میں ترتیب دیتی ہیں:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

亲自试一试

实例

flex-start قیمتیں فلیکس پروجیکٹ کو کانٹینر کی اوپری جانب پر ترتیب دیتی ہیں:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

亲自试一试

实例

flex-end قیمتیں فلیکس پروجیکٹ کو کانٹینر کی نیچلی جانب پر ترتیب دیتی ہیں:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

亲自试一试

实例

stretch قیمتیں فلیکس پروجیکٹ کو کانٹینر کو پر کیا جاتا ہے (مقصد):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

亲自试一试

实例

baseline قیمتیں فلیکس پروجیکٹ کو بنیادی لائن پر ترتیب دیتی ہیں:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

亲自试一试

تذکرہ:یہ مثال مختلف font-size کا استعمال کرتا ہے تاکہ پروجیکٹ کا متن بنیادی لائن پر ترتیب کیا جائے:

1
2
3
4

align-content کا پارامتر

align-content پیش کاری کا مقصد فلیکس لائن کا ترتیب کرنا ہے。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ان مثالوں میں، ہم 600 پیکسل کی بلندی کا کانٹینر استعمال کر رہے ہیں، اور فلیکس واپ اپنے مقصد کو wrap کیا جاتا ہے، تاکہ align-content کی نمائش بہتر ہو سکے。

实例

space-between قیمتیں فلیکس لائن کو مساوی فاصلے کے ساتھ دکھائی دیتی ہیں:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

亲自试一试

实例

space-around قیمتیں فلیکس لائن کو اس کے قبل، درمیان اور بعد میں فضائی باندھ میں دکھائی دیتی ہیں:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

亲自试一试

实例

stretch قیمتیں فلیکس لائن کو فضا کی بقیہ کا حصہ لینے کے لئے تگڑ دیتی ہیں (مقصد):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

亲自试一试

实例

center قیمتیں کانٹینر کی وسط میں فلیکس لائن دکھائی دیتی ہیں:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

亲自试一试

实例

flex-start قیمتیں کانٹینر کی شروعات پر فلیکس لائن دکھائی دیتی ہیں:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

亲自试一试

实例

flex-end قیمتیں کانٹینر کی آخری جانب پر فلیکس لائن دکھائی دیتی ہیں:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

亲自试一试

پائیدار مرکز

پائیدار مرکز کا مسئلہ حل کریں گے: اچھا مرکز

حل کا سوال: یہاں justify-content اور align-items پیش کاری کا مقصد مرکز بنایا گیا ہے، بعد میں فلیکس پروجیکٹ کا اچھا مرکز ہوگا:

实例

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

亲自试一试

ذیلی عناصر (پروجیکٹ)

فلیکس کانٹینر کے براہ راست ذیلی عناصر خودکار طور پر فلیکس (فلیکس) پروجیکٹ میں بن جائیں گے。

1
2
3
4

درج ذیل عناصر ایک سورفائیٹ ایلگ کونٹینر کے چار نیلا ایلگ پروجیکٹوں کی نمائش کی جائے گی۔

实例


  
1

  
2

  <div>3</div> 
  
4

亲自试一试

ایلگ پروجیکٹوں کیلئے استعمال کی جانے والی پروپرتیاں درج ذیل ہیں:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order پروپرتی

order پروپرتی کی مدد سے ایلگ پروجیکٹ کا ترتیب طے کیا جاتا ہے。

1
2
3
4

کد میں پہلا ایلگ پروجیکٹ لگاتار لائ آؤٹ میں پہلا آئٹم کے طور پر نمائش نہیں کیا جانا چاہئے。

order یہ مرادہ عدد ہونا چاہئے، کیونکہ اس کا دفعہ 0 ہے。

实例

order پروپرتی کی مدد سے ایلگ پروجیکٹ کا ترتیب بدل سکتا ہے:


  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>

亲自试一试

flex-grow پروپرتی

flex-grow پروپرتی ایلگ پروجیکٹ دیگر ایلگ پروجیکٹوں کی نسبت میں کتنا بڑھ جائے گا، کا طور طے کیا جاتا ہے。

1
2
3

یہ مرادہ عدد ہونا چاہئے، کیونکہ اس کا دفعہ 0 ہے。

实例

تیسرا ایلگسٹ آئٹم دیگر ایلگسٹ آئٹموں کی نسبت میں آٹھ گنا تیزی سے بڑھنے کا طور طے کیا جائے:


  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>

亲自试一试

flex-shrink پروپرتی

flex-shrink پروپرتی ایلگ پروجیکٹ دیگر ایلگ پروجیکٹوں کی طرح کتنا چھوٹ جائے گا، کا طور طے کیا جاتا ہے。

1
2
3
4
5
6
7
8
9

یہ مرادہ عدد ہونا چاہئے، کیونکہ اس کا دفعہ 0 ہے。

实例

تیسرا ایلگسٹ آئٹم دیگر ایلگسٹ آئٹموں کی طرح چھوٹنے کی اجازت نہ دینا:


  
1

  
2

  <div style="flex-shrink: 0">3</div>
  
4

  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>

亲自试一试

flex-basis پروپرتی

flex-basis پروپرتی ایلگ پروجیکٹ کی ابتدائی لمبائی کا طور طے کیا جاتا ہے。

1
2
3
4

实例

تیسرا ایلگسٹ آئٹم کی ابتدائی لمبائی 200 پیکسلس میں ستارہ کی جائے:


  
1

  
2

  <div style="flex-basis: 200px">3</div>
  
4

亲自试一试

flex پروپرتی

flex پروپرتی ایلگ-گرو، ایلگ-شینک اور ایلگ-بیشیس پروپرتیوں کا مختصر پروپرتی ہے。

实例

تیسرا ایلگسٹ آئٹم بڑھنے سے منع کیا جائے (0)، چھوٹنے سے منع کیا جائے (0) اور ابتدائی لمبائی 200 پیکسلس کی ہوگی:


  
1

  
2

  <div style="flex: 0 0 200px">3</div>
  
4

亲自试一试

align-self پروپرتی

align-self پروپرتی کے ذریعے ایلگسٹ کونٹینر میں منتخب کئے گئے آئٹمز کا آلائنمنٹ کا طور طے کیا جاتا ہے。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

1
2
3
4

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：

实例

把第三个弹性项目对齐到容器的中间：


  
1

  
2

  
3

  
4

亲自试一试

实例

将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：


  
1

  
2

  
3

  
4

亲自试一试

使用 Flexbox 的响应式图库

使用 flexbox 创建响应式图像库，该图像库根据屏幕大小在四幅、两幅或全宽图像之间变化：

亲自试一试

使用 Flexbox 的响应式网站

使用 flexbox 创建响应式网站，其中包含弹性导航栏和弹性内容：

亲自试一试

CSS Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性：

属性 描述
display 规定用于 HTML 元素的盒类型。
flex-direction 规定弹性容器内的弹性项目的方向。
justify-content 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow flex-direction 和 flex-wrap 的简写属性。
order 规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self 用于弹性项目。覆盖容器的 align-items 属性。
flex flex-grow،flex-shrink اور flex-basis کی مختصر اپریشنز.