நெகிழ்வு
கிரிட் நெடுவரிசைகள், வழிசெலுத்தல், கூறுகள் மற்றும் பலவற்றின் தளவமைப்பு, சீரமைப்பு மற்றும் அளவை விரைவாக நிர்வகிக்கவும். மிகவும் சிக்கலான செயலாக்கங்களுக்கு, தனிப்பயன் CSS தேவைப்படலாம்.
நெகிழ்வான நடத்தைகளை இயக்கு
ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலனை உருவாக்குவதற்கும், குழந்தைகளின் நேரடி கூறுகளை நெகிழ்வான பொருட்களாக display
மாற்றுவதற்கும் பயன்பாடுகளைப் பயன்படுத்துங்கள் . ஃப்ளெக்ஸ் கொள்கலன்கள் மற்றும் பொருட்களை கூடுதல் நெகிழ்வு பண்புகளுடன் மேலும் மாற்றியமைக்க முடியும்.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">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
எதிர் பக்கத்திலிருந்து கிடைமட்ட திசையைத் தொடங்க பயன்படுத்தவும் .
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
.flex-column
செங்குத்து திசையை அமைக்க அல்லது .flex-column-reverse
எதிர் பக்கத்திலிருந்து செங்குத்து திசையைத் தொடங்க பயன்படுத்தவும் .
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">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
நிரப்பவும்
.flex-fill
கிடைக்கக்கூடிய அனைத்து கிடைமட்ட இடத்தையும் எடுத்துக் கொள்ளும்போது, அவற்றின் உள்ளடக்கத்திற்கு சமமான அகலங்களுக்கு (அல்லது அவற்றின் உள்ளடக்கம் அவற்றின் எல்லை-பெட்டிகளை மீறவில்லை என்றால் சம அகலங்களுக்கு) கட்டாயப்படுத்த, உடன்பிறப்பு உறுப்புகளின் தொடரின் வகுப்பைப் பயன்படுத்தவும் .
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
வளர்ந்து சுருங்கும்
.flex-grow-*
கிடைக்கக்கூடிய இடத்தை நிரப்ப ஒரு ஃப்ளெக்ஸ் உருப்படியின் திறனை மாற்றுவதற்கு பயன்பாடுகளைப் பயன்படுத்தவும் . கீழே உள்ள எடுத்துக்காட்டில், .flex-grow-1
உறுப்புகள் தன்னால் இயன்ற அனைத்து இடத்தையும் பயன்படுத்துகின்றன, அதே நேரத்தில் மீதமுள்ள இரண்டு ஃப்ளெக்ஸ் உருப்படிகளுக்கு தேவையான இடத்தை அனுமதிக்கின்றன.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
.flex-shrink-*
தேவைப்பட்டால் சுருங்குவதற்கான ஃப்ளெக்ஸ் உருப்படியின் திறனை மாற்ற, பயன்பாடுகளைப் பயன்படுத்தவும் . கீழே உள்ள எடுத்துக்காட்டில், உடன் உள்ள இரண்டாவது ஃப்ளெக்ஸ் உருப்படியானது .flex-shrink-1
அதன் உள்ளடக்கங்களை ஒரு புதிய வரியில் மடிக்க வேண்டிய கட்டாயத்தில் உள்ளது .w-100
.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
flex-grow
மற்றும் க்கு பதிலளிக்கக்கூடிய மாறுபாடுகளும் உள்ளன flex-shrink
.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
ஆட்டோ ஓரங்கள்
நீங்கள் ஃப்ளெக்ஸ் சீரமைப்புகளை ஆட்டோ மார்ஜின்களுடன் கலக்கும்போது Flexbox சில அற்புதமான விஷயங்களைச் செய்ய முடியும். ஆட்டோ விளிம்புகள் வழியாக ஃப்ளெக்ஸ் உருப்படிகளைக் கட்டுப்படுத்துவதற்கான மூன்று எடுத்துக்காட்டுகள் கீழே காட்டப்பட்டுள்ளன: இயல்புநிலை (தானியங்கு விளிம்பு இல்லை), இரண்டு உருப்படிகளை வலப்புறம் தள்ளுவது ( .mr-auto
), மற்றும் இரண்டு உருப்படிகளை இடதுபுறம் தள்ளுவது ( .ml-auto
).
justify-content
துரதிர்ஷ்டவசமாக, IE10 மற்றும் IE11 ஆனது, பெற்றோர் இயல்புநிலை மதிப்பைக் கொண்ட ஃப்ளெக்ஸ் உருப்படிகளில் ஆட்டோ மார்ஜின்களை சரியாக ஆதரிக்கவில்லை . மேலும் விவரங்களுக்கு இந்த StackOverflow பதிலைப் பார்க்கவும்.
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">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 bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">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 bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">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
சீரமைக்க ஃப்ளெக்ஸ்பாக்ஸ் கொள்கலன்களில் உள்ள பயன்பாடுகளைப் பயன்படுத்தவும் . (உலாவி இயல்புநிலை), , , , , அல்லது . இந்த பயன்பாடுகளை நிரூபிக்க, நாங்கள் ஃப்ளெக்ஸ் உருப்படிகளின் எண்ணிக்கையை செயல்படுத்தி அதிகரித்துள்ளோம்.start
end
center
between
around
stretch
flex-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-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch