CSS అలైన్-కంటెంట్ అట్రిబ్యూట్

定义和用法

align-content 属性修改 flex-wrap 属性的行为。它与 align-items 相似，但是它不对齐弹性项目，而是对齐弹性线。

నోటిస్:ఈ లక్షణం కార్యకారిణి అవుతుంది అయితే పలు వరుసల ప్రాజెక్టులు ఉండాలి!

అనుష్ఠానం:ఉపయోగించండి justify-content ప్రధాన అక్షం (main-axis) పై ప్రాజెక్టులను హోరిజంటల్ విస్తరణగా సరిచేస్తుంది.

మరియు ఇతర లింక్లు:

CSS పాఠ్యక్రమం:CSS ఫ్లెక్స్‌బాక్స్

CSS పాఠ్యక్రమం:CSS గ్రిడ్

CSS సందర్భాంశం:align-items లక్షణం

CSS సందర్భాంశం:align-self లక్షణం

CSS సందర్భాంశం:justify-content లక్షణం

HTML DOM సందర్భాంశం:alignContent లక్షణం

ఉదాహరణ

వరుసలను ఎలాస్టిక్ కంటైనర్ యొక్క మధ్యవర్తి వైపుకు ప్యాక్ చేస్తారు:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

స్వయంగా ప్రయత్నించండి

CSS సంకేతపత్రం

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

లక్షణపు విలువ

విలువ వివరణ
stretch అప్రమేయ విలువ. వరుసలు మిగిలిన అంతరాన్ని పంపిణీ చేస్తాయి.
center వరుసలను ఎలాస్టిక్ కంటైనర్ యొక్క మధ్యవర్తి వైపుకు ప్యాక్ చేస్తారు.
flex-start వరుసలను ఎలాస్టిక్ కంటైనర్ యొక్క మొదటి వైపుకు ప్యాక్ చేస్తారు.
flex-end వరుసలను ఎలాస్టిక్ కంటైనర్ యొక్క చివరి వైపుకు ప్యాక్ చేస్తారు.
space-between వరుసలు ఎలాస్టిక్ కంటైనర్ లో సమానంగా పంపిణీ అవుతాయి.
space-around వరుసలు ఎలాస్టిక్ కంటైనర్ లో సమానంగా పంపిణీ అవుతాయి, మొదటి మరియు చివరి వాటికి ప్రతిభాగం ఉంటుంది.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేసుకుంటుంది. దయచేసి ఈ లింక్ ను సందర్శించండి: initial.
inherit ఈ లక్షణాన్ని తన పేర్పడుతున్న మూల ఉపాంతం నుండి పారంపర్యం చేసుకుంటుంది. దయచేసి ఈ లింక్ ను సందర్శించండి: inherit.

సాంకేతిక వివరాలు

అప్రమేయ విలువ stretch
పారంపర్యం: లేదు
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ లింక్ ను సందర్శించండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: CSS3
JavaScript సంకేతపత్రం: object.style.alignContent="center"

బ్రౌజర్ మద్దతు

పట్టికలో వివరించబడిన నంబర్లు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను నిర్దేశిస్తాయి.

క్రోమ్ IE / ఎండ్జ్ ఫైర్‌ఫాక్స్ సఫారీ ఓపెరా
క్రోమ్ Edge ఫైర్‌ఫాక్స్ సఫారీ ఓపెరా
57.0 16.0 52.0 10.1 44.0