சரியான ஃப்ளெக்ஸ்பாக்ஸ் தளவமைப்புகளை உருவாக்கவும்

எங்கள் உள்ளுணர்வு இழுத்தல் மற்றும் இடைமுகத்துடன் CSS ஃப்ளெக்ஸ்பாக்ஸ் குறியீட்டைக் காட்சிப்படுத்தவும், தனிப்பயனாக்கவும் மற்றும் உருவாக்கவும்.

கொள்கலன் பண்புகள்

display

flex-direction

flex-wrap

justify-content

align-items

align-content

பொருள் பண்புகள்

Items

3 items

தேர்ந்தெடுத்த உருப்படி

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

CSS குறியீடு உருவாக்கப்பட்டது

பிரபலமான ஃப்ளெக்ஸ்பாக்ஸ் முன்னமைவுகள்

மையம் கிடைமட்டமாக

Content

லோகோ, பொத்தான் அல்லது எந்த உறுப்பையும் கிடைமட்டமாகவும் செங்குத்தாகவும் மையப்படுத்துவதற்கு ஏற்றது.

சம இடைவெளி

Item 1

Item 2

Item 3

இடைவெளி-இடையில் அல்லது இடைவெளி-சுற்றி உள்ள உறுப்புகளுக்கு இடையில் சமமான இடைவெளியை உருவாக்கவும்.

செங்குத்து மெனு

Home

About

Contact

நிலையான இடைவெளி மற்றும் சீரமைப்புடன் செங்குத்து வழிசெலுத்தல் மெனுவை உருவாக்கவும்.

பொறுப்பு கட்டம்

Box 1

Box 2

Box 3

Box 4

Box 5

கிடைக்கக்கூடிய இடத்தின் அடிப்படையில் உருப்படிகளை மடக்கும் பதிலளிக்கக்கூடிய கட்டம் தளவமைப்பை உருவாக்கவும்.

ஹீரோ பேனர்

முதன்மைத் தலைப்பு

நடவடிக்கைக்கான அழைப்புடன் ஹீரோ பிரிவு

தலைப்பு, வசன வரிகள் மற்றும் அழைப்பு-க்கு-செயல் பொத்தானுடன் ஹீரோ பேனரை வடிவமைக்கவும்.

அடிக்குறிப்பு தளவமைப்பு

Company

About Us

Careers

Support

உதவி மையம்

எங்களை தொடர்பு கொள்ளவும்

சிறிய திரைகளில் அடுக்கி வைக்கும் நெடுவரிசைகளுடன் பதிலளிக்கக்கூடிய அடிக்குறிப்பை உருவாக்கவும்.

நிஜ உலக எடுத்துக்காட்டுகள்

வழிசெலுத்தல் பட்டி

Logo

Home

Products

About

Contact

இடதுபுறத்தில் லோகோ, மையத்தில் மெனு உருப்படிகள் மற்றும் வலதுபுறத்தில் ஒரு வண்டி ஐகான் கொண்ட பொதுவான வழிசெலுத்தல் பட்டி தளவமைப்பு.

Card Grid

அட்டை தலைப்பு

அட்டை விளக்கம் உரை இங்கே

அட்டை தலைப்பு

அட்டை விளக்கம் உரை இங்கே

அட்டை தலைப்பு

அட்டை விளக்கம் உரை இங்கே

ஃப்ளெக்ஸ்பாக்ஸ் பண்புகளைப் பயன்படுத்தி வெவ்வேறு திரை அளவுகளுக்கு ஏற்ப பதிலளிக்கக்கூடிய அட்டை கட்டம்.

கட்டுரை வடிவமைப்பு

கட்டுரைத் தலைப்பு

ஜனவரி 1, 2023 அன்று வெளியிடப்பட்டது · 5 நிமிடம் படிக்க

கட்டுரை உள்ளடக்கம் இங்கே. இது ஒரு சுருக்கமான சுருக்கம் அல்லது முழு கட்டுரை உரையாக இருக்கலாம். ஃப்ளெக்ஸ்பாக்ஸ் படம் மற்றும் உரையை பார்வைக்கு ஈர்க்கும் வகையில் சீரமைக்க உதவுகிறது.

இடதுபுறத்தில் ஒரு படத்தையும் வலதுபுறத்தில் உரை உள்ளடக்கத்தையும் கொண்ட ஒரு பொதுவான கட்டுரை தளவமைப்பு, மொபைல் சாதனங்களில் அடுக்கி வைக்கப்பட்டுள்ளது.

டாஷ்போர்டு தளவமைப்பு

Header

Sidebar

முக்கிய உள்ளடக்கம்

Footer

தலைப்பு, பக்கப்பட்டி, முக்கிய உள்ளடக்க பகுதி மற்றும் கிடைமட்ட மற்றும் செங்குத்து சீரமைப்பு இரண்டிற்கும் ஃப்ளெக்ஸ்பாக்ஸைப் பயன்படுத்தி அடிக்குறிப்பு கொண்ட டாஷ்போர்டு தளவமைப்பு.

ஃப்ளெக்ஸ்பாக்ஸ் அடிப்படைகள்

ஃப்ளெக்ஸ் பாக்ஸ் என்றால் என்ன?

நெகிழ்வான பெட்டி தளவமைப்பு, பொதுவாக ஃப்ளெக்ஸ்பாக்ஸ் என அழைக்கப்படுகிறது, இது ஒரு CSS3 தளவமைப்பு மாதிரியாகும், இது ஒரு கொள்கலனில் உள்ள உருப்படிகளுக்கு இடையில் இடத்தை விநியோகிக்கவும் சீரமைக்கவும் ஒரு திறமையான வழியை வழங்குகிறது, அவற்றின் அளவு தெரியவில்லை அல்லது மாறும் போது கூட.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

முக்கிய கருத்துக்கள்:ஃப்ளெக்ஸ்பாக்ஸ் இரண்டு முக்கிய கருத்துக்களை அறிமுகப்படுத்துகிறது: திஃப்ளெக்ஸ் கொள்கலன் and the ஃப்ளெக்ஸ் உருப்படிகள். கொள்கலன் பெற்றோர் உறுப்பு, மற்றும் உருப்படிகள் அதன் நேரடி குழந்தைகள்.

முதன்மை அச்சு vs குறுக்கு அச்சு

ஃப்ளெக்ஸ்பாக்ஸ் தளவமைப்புகள் இரண்டு அச்சுகளை அடிப்படையாகக் கொண்டவை: திmain axis and the குறுக்கு அச்சு.

முக்கிய அச்சு:ஃப்ளெக்ஸ் உருப்படிகள் அமைக்கப்பட்டுள்ள முதன்மை அச்சு. வரையறுக்கப்பட்டதுflex-direction.
குறுக்கு அச்சு:மைய அச்சுக்கு செங்குத்தாக அச்சு. அதன் திசை முக்கிய அச்சு திசையைப் பொறுத்தது.

முதன்மை அச்சு →

← குறுக்கு அச்சு

Start

Main

End

கொள்கலன் பண்புகள்

Property	Description
`display`	ஒரு நெகிழ்வு கொள்கலனை வரையறுக்கிறது; கொடுக்கப்பட்ட மதிப்பைப் பொறுத்து இன்லைன் அல்லது பிளாக்.
`flex-direction`	முக்கிய அச்சை நிறுவுகிறது, இதனால் திசையை வரையறுக்கிறது ஃப்ளெக்ஸ் பொருட்கள் ஃப்ளெக்ஸ் கொள்கலனில் வைக்கப்படுகின்றன.
`flex-wrap`	இயல்பாக, ஃப்ளெக்ஸ் உருப்படிகள் அனைத்தும் ஒரு வரியில் பொருந்த முயற்சிக்கும். நீங்கள் அதை மாற்றலாம் மற்றும் இந்த சொத்துடன் தேவைக்கேற்ப உருப்படிகளை மடிக்க அனுமதிக்கலாம்.
`justify-content`	ஃப்ளெக்ஸ் கண்டெய்னரின் தற்போதைய கோட்டின் பிரதான அச்சில் ஃப்ளெக்ஸ் உருப்படிகளை சீரமைக்கிறது.
`align-items`	ஃப்ளெக்ஸ் கண்டெய்னரின் தற்போதைய கோட்டின் குறுக்கு அச்சில் ஃப்ளெக்ஸ் உருப்படிகளை சீரமைக்கிறது.
`align-content`	குறுக்கு-அச்சில் கூடுதல் இடம் இருக்கும்போது ஒரு ஃப்ளெக்ஸ் கொள்கலனின் கோடுகளை உள்ளே சீரமைக்கிறது.

பொருள் பண்புகள்

Property	Description
`order`	முன்னிருப்பாக, நெகிழ்வு உருப்படிகள் மூல வரிசையில் அமைக்கப்பட்டுள்ளன. எனினும்,`order`ஃப்ளெக்ஸ் கொள்கலனில் அவை தோன்றும் வரிசையை சொத்து கட்டுப்படுத்துகிறது.
`flex-grow`	தேவைப்பட்டால் ஒரு ஃப்ளெக்ஸ் உருப்படி வளரும் திறனை வரையறுக்கிறது. இது ஒரு விகிதாச்சாரமாக செயல்படும் அலகு இல்லாத மதிப்பை ஏற்றுக்கொள்கிறது.
`flex-shrink`	தேவைப்பட்டால் ஒரு ஃப்ளெக்ஸ் உருப்படி சுருங்குவதற்கான திறனை வரையறுக்கிறது.
`flex-basis`	ஃப்ளெக்ஸ் காரணிகளின்படி கிடைக்கக்கூடிய எந்த இடமும் விநியோகிக்கப்படுவதற்கு முன்பு ஒரு ஃப்ளெக்ஸ் உருப்படியின் ஆரம்ப அளவை வரையறுக்கிறது.
`align-self`	இயல்புநிலை சீரமைப்பை அனுமதிக்கிறது (அல்லது குறிப்பிடப்பட்ட ஒன்று`align-items`) தனிப்பட்ட ஃப்ளெக்ஸ் உருப்படிகளுக்கு மேலெழுதப்பட வேண்டும்.

Related Tools

சரியான ஃப்ளெக்ஸ்பாக்ஸ் தளவமைப்புகளை உருவாக்கவும்

CSS மாற்றிக்கு ஸ்டைலஸ்

உங்கள் SCSS குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.

CSS மாற்றி SCSS

Base64 குறியாக்கி கருவி

WordPress க்கான பாதுகாப்பான கடவுச்சொல் ஹேஷ்களை உருவாக்கவும்

RGB முதல் CMYK வரை

அச்சு வடிவமைப்பிற்கான RGB வண்ணங்களை CMYK மதிப்புகளாக மாற்றவும்

அழகான CSS ஏற்றிகள் உருவாக்க

எங்கள் உள்ளுணர்வு இழுத்தல் மற்றும் இடைமுகத்துடன் நொடிகளில் தனிப்பயன் CSS ஏற்றுதல் அனிமேஷன்களை உருவாக்கவும். குறியீட்டு முறை தேவையில்லை!