Source

நெகிழ்வு

கிரிட் நெடுவரிசைகள், வழிசெலுத்தல், கூறுகள் மற்றும் பலவற்றின் தளவமைப்பு, சீரமைப்பு மற்றும் அளவை விரைவாக நிர்வகிக்கலாம். மிகவும் சிக்கலான செயலாக்கங்களுக்கு, தனிப்பயன் CSS தேவைப்படலாம்.

நெகிழ்வான நடத்தைகளை இயக்கு

ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலனை உருவாக்கவும், குழந்தைகளின் நேரடி கூறுகளை நெகிழ்வுப் பொருட்களாக displayமாற்றவும் பயன்பாடுகளைப் பயன்படுத்தவும் . ஃப்ளெக்ஸ் கொள்கலன்கள் மற்றும் பொருட்களை கூடுதல் நெகிழ்வு பண்புகளுடன் மேலும் மாற்றியமைக்க முடியும்.

நான் ஒரு ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலன்!
<div class="d-flex p-2">I'm a flexbox container!</div>
நான் ஒரு இன்லைன் ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலன்!
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

.d-flexமற்றும் க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

திசையில்

திசை பயன்பாடுகளுடன் ஒரு நெகிழ்வு கொள்கலனில் நெகிழ்வான உருப்படிகளின் திசையை அமைக்கவும். பெரும்பாலான சந்தர்ப்பங்களில், உலாவி இயல்புநிலையாக இருப்பதால், கிடைமட்ட வகுப்பை இங்கே தவிர்க்கலாம் row. இருப்பினும், இந்த மதிப்பை நீங்கள் வெளிப்படையாக அமைக்க வேண்டிய சூழ்நிலைகளை நீங்கள் சந்திக்கலாம் (பதிலளிக்கக்கூடிய தளவமைப்புகள் போன்றவை).

.flex-rowகிடைமட்ட திசையை (உலாவி இயல்புநிலை) அமைக்க அல்லது .flex-row-reverseஎதிர் பக்கத்திலிருந்து கிடைமட்ட திசையைத் தொடங்க பயன்படுத்தவும் .

ஃப்ளெக்ஸ் உருப்படி 1
ஃப்ளெக்ஸ் உருப்படி 2
ஃப்ளெக்ஸ் உருப்படி 3
ஃப்ளெக்ஸ் உருப்படி 1
ஃப்ளெக்ஸ் உருப்படி 2
ஃப்ளெக்ஸ் உருப்படி 3
<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

.flex-columnசெங்குத்து திசையை அமைக்க அல்லது .flex-column-reverseஎதிர் பக்கத்திலிருந்து செங்குத்து திசையைத் தொடங்க பயன்படுத்தவும் .

ஃப்ளெக்ஸ் உருப்படி 1
ஃப்ளெக்ஸ் உருப்படி 2
ஃப்ளெக்ஸ் உருப்படி 3
ஃப்ளெக்ஸ் உருப்படி 1
ஃப்ளெக்ஸ் உருப்படி 2
ஃப்ளெக்ஸ் உருப்படி 3
<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

உள்ளடக்கத்தை நியாயப்படுத்தவும்

பிரதான அச்சில் உள்ள நெகிழ்வுப் பொருட்களின் சீரமைப்பை மாற்ற, ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலன்களில் உள்ள பயன்பாடுகளைப் பயன்படுத்தவும் justify-content(தொடக்க x-அச்சு, y-அச்சு என்றால் flex-direction: column). start(உலாவி இயல்புநிலை), , end, center, betweenஅல்லது around.

ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

பொருட்களை சீரமைக்கவும்

குறுக்கு அச்சில் உள்ள நெகிழ்வு உருப்படிகளின் சீரமைப்பை மாற்ற, ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலன்களில் உள்ள பயன்பாடுகளைப் பயன்படுத்தவும் align-items(தொடக்க y-அச்சு, x-அச்சு என்றால் flex-direction: column). start, end, center, baseline, அல்லது stretch(உலாவி இயல்புநிலை) இலிருந்து தேர்வு செய்யவும் .

ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

சுயமாக சீரமைக்கவும்

குறுக்கு அச்சில் அவற்றின் சீரமைப்பைத் தனித்தனியாக மாற்ற ஃப்ளெக்ஸ்பாக்ஸ் உருப்படிகளின் பயன்பாடுகளைப் பயன்படுத்தவும் align-self(தொடக்க y-அச்சு, x-அச்சு என்றால் flex-direction: column). அதே விருப்பங்களில் இருந்து தேர்வு செய்யவும் align-items: start, end, center, baselineஅல்லது stretch(உலாவி இயல்புநிலை).

ஃப்ளெக்ஸ் பொருள்
சீரமைக்கப்பட்ட ஃப்ளெக்ஸ் உருப்படி
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
சீரமைக்கப்பட்ட ஃப்ளெக்ஸ் உருப்படி
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
சீரமைக்கப்பட்ட ஃப்ளெக்ஸ் உருப்படி
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
சீரமைக்கப்பட்ட ஃப்ளெக்ஸ் உருப்படி
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
சீரமைக்கப்பட்ட ஃப்ளெக்ஸ் உருப்படி
ஃப்ளெக்ஸ் பொருள்
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

ஆட்டோ ஓரங்கள்

நீங்கள் ஃப்ளெக்ஸ் சீரமைப்புகளை ஆட்டோ மார்ஜின்களுடன் கலக்கும்போது Flexbox சில அற்புதமான விஷயங்களைச் செய்ய முடியும். ஆட்டோ விளிம்புகள் வழியாக ஃப்ளெக்ஸ் உருப்படிகளைக் கட்டுப்படுத்துவதற்கான மூன்று எடுத்துக்காட்டுகள் கீழே காட்டப்பட்டுள்ளன: இயல்புநிலை (தானியங்கு விளிம்பு இல்லை), இரண்டு உருப்படிகளை வலப்புறம் தள்ளுவது ( .mr-auto), மற்றும் இரண்டு உருப்படிகளை இடதுபுறம் தள்ளுவது ( .ml-auto).

justify-contentதுரதிர்ஷ்டவசமாக, IE10 மற்றும் IE11 ஆனது, பெற்றோர் இயல்புநிலை மதிப்பைக் கொண்ட ஃப்ளெக்ஸ் உருப்படிகளில் தானியங்கு விளிம்புகளை சரியாக ஆதரிக்கவில்லை . மேலும் விவரங்களுக்கு இந்த StackOverflow பதிலைப் பார்க்கவும்.

ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

align-உருப்படிகளுடன்

align-items, flex-direction: columnமற்றும் margin-top: autoஅல்லது கலப்பதன் மூலம் ஒரு ஃப்ளெக்ஸ் உருப்படியை ஒரு கொள்கலனின் மேல் அல்லது கீழ் பகுதிக்கு செங்குத்தாக நகர்த்தவும் margin-bottom: auto.

ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

மடக்கு

ஃப்ளெக்ஸ் பொருட்கள் ஒரு ஃப்ளெக்ஸ் கொள்கலனில் எவ்வாறு மடிக்கப்படுகின்றன என்பதை மாற்றவும். உடன் ரேப்பிங் இல்லை (உலாவி இயல்புநிலை) உடன் .flex-nowrapரேப்பிங் .flex-wrap, அல்லது ரிவர்ஸ் ரேப்பிங் உடன் தேர்வு செய்யவும் .flex-wrap-reverse.

ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex flex-nowrap">
  ...
</div>
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex flex-wrap">
  ...
</div>
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex flex-wrap-reverse">
  ...
</div>

க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

ஆர்டர்

ஒரு சில பயன்பாடுகளுடன் குறிப்பிட்ட நெகிழ்வு உருப்படிகளின் காட்சி வரிசையை மாற்றவும் . orderஒரு பொருளை முதலில் அல்லது கடைசியாக உருவாக்குவதற்கான விருப்பங்களை மட்டுமே நாங்கள் வழங்குகிறோம், அத்துடன் DOM ஆர்டரைப் பயன்படுத்துவதற்கு மீட்டமைக்கவும். orderஎந்த முழு எண் மதிப்பையும் எடுத்துக் கொண்டால் (எ.கா., 5), தேவைப்படும் கூடுதல் மதிப்புகளுக்கு தனிப்பயன் CSS ஐச் சேர்க்கவும் .

முதல் நெகிழ்வு பொருள்
இரண்டாவது நெகிழ்வு உருப்படி
மூன்றாவது நெகிழ்வு உருப்படி
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

உள்ளடக்கத்தை சீரமைக்கவும்

குறுக்கு அச்சில் ஃப்ளெக்ஸ் பொருட்களை ஒன்றாகalign-content சீரமைக்க ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலன்களில் உள்ள பயன்பாடுகளைப் பயன்படுத்தவும் . (உலாவி இயல்புநிலை), , , , , அல்லது . இந்த பயன்பாடுகளை நிரூபிக்க, நாங்கள் ஃப்ளெக்ஸ் உருப்படிகளின் எண்ணிக்கையை செயல்படுத்தி அதிகரித்துள்ளோம்.startendcenterbetweenaroundstretchflex-wrap: wrap

எச்சரிக்கை! ஃப்ளெக்ஸ் உருப்படிகளின் ஒற்றை வரிசைகளில் இந்த சொத்து எந்த விளைவையும் ஏற்படுத்தாது.

ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex align-content-end flex-wrap">...</div>
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex align-content-center flex-wrap">...</div>
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex align-content-between flex-wrap">...</div>
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex align-content-around flex-wrap">...</div>
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
ஃப்ளெக்ஸ் பொருள்
<div class="d-flex align-content-stretch flex-wrap">...</div>

க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch