CSS Flex Container

CSS Flex Container பண்புகளைக் கற்றுக்கொள்ளுங்கள்

CSS Flex Container Properties

flex container உறுப்பு பின்வரும் பண்புகளைக் கொண்டிருக்கலாம்:

CSS flex-direction Property

flex-direction பண்பு flex கொள்கலனில் flex உருப்படிகளின் காட்சி-திசையைக் குறிப்பிடுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

flex-direction: row (இயல்புநிலை)
1
2
3
flex-direction: column
1
2
3
flex-direction: row-reverse
1
2
3
flex-direction: column-reverse
1
2
3

CSS flex-wrap Property

flex-wrap பண்பு ஒரு flex வரியில் போதுமான இடம் இல்லை என்றால், flex உருப்படிகள் மடிக்கப்பட வேண்டுமா இல்லையா என்பதைக் குறிப்பிடுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

flex-wrap: nowrap (இயல்புநிலை)
1
2
3
4
5
6
7
8
9
flex-wrap: wrap
1
2
3
4
5
6
7
8
9
flex-wrap: wrap-reverse
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

CSS justify-content Property

justify-content பண்பு flex உருப்படிகள் முதன்மை-அச்சில் (கிடைமட்டமாக) அனைத்து கிடைக்கும் இடத்தையும் பயன்படுத்தாதபோது அவற்றை சீரமைக்கப் பயன்படுகிறது.

justify-content: center
1
2
3
justify-content: flex-start (இயல்புநிலை)
1
2
3
justify-content: flex-end
1
2
3
justify-content: space-around
1
2
3
justify-content: space-between
1
2
3
justify-content: space-evenly
1
2
3

CSS align-items Property

align-items பண்பு flex உருப்படிகள் குறுக்கு-அச்சில் (செங்குத்தாக) அனைத்து கிடைக்கும் இடத்தையும் பயன்படுத்தாதபோது அவற்றை சீரமைக்கப் பயன்படுகிறது.

align-items: center
1
2
3
align-items: flex-start
1
2
3
align-items: flex-end
1
2
3
align-items: stretch (இயல்புநிலை)
1
2
3

CSS align-content Property

align-content பண்பு align-items போன்றது, ஆனால் flex உருப்படிகளை சீரமைப்பதற்கு பதிலாக flex வரிகளை சீரமைக்கிறது.

align-content: center
1
2
3
4
5
6
7
8
9
align-content: space-between
1
2
3
4
5
6
7
8
9
align-content: space-around
1
2
3
4
5
6
7
8
9

True Centering

பின்வரும் உதாரணம் ஒரு பொதுவான பாணி சிக்கலை எவ்வாறு தீர்ப்பது என்பதைக் காட்டுகிறது: உண்மையான மையப்படுத்தல்.

உண்மையான மையப்படுத்தலை அடைய, flex கொள்கலனுக்கு justify-content மற்றும் align-items பண்புகள் இரண்டையும் center என அமைக்கவும், மேலும் flex உருப்படி கிடைமட்டமாகவும் செங்குத்தாகவும் சரியாக மையப்படுத்தப்படும்:

Centered flex item

இந்த உருப்படி முழுமையாக மையப்படுத்தப்பட்டுள்ளது

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

Exercise

❓ flex கொள்கலனின் திசையை column ஆக அமைக்க சரியான பண்பு பெயரை இழுத்து விடவும்.

.flex-container {
  display: flex;
  : ;
}
flex-direction: column
✓ சரி! flex-direction பண்பு flex உருப்படிகளின் திசையைக் கட்டுப்படுத்துகிறது
flex-wrap: column
✗ தவறு! flex-wrap பண்பு மடித்தலைக் கட்டுப்படுத்துகிறது, திசையை அல்ல
justify-content: column
✗ தவறு! justify-content பண்பு கிடைமட்ட சீரமைப்பைக் கட்டுப்படுத்துகிறது
align-items: column
✗ தவறு! align-items பண்பு செங்குத்து சீரமைப்பைக் கட்டுப்படுத்துகிறது

The CSS Flex Container Properties

பின்வரும் அட்டவணை அனைத்து CSS Flex Container பண்புகளையும் பட்டியலிடுகிறது:

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