పర్ఫెక్ట్ ఫ్లెక్స్ బాక్స్ లేఅవుట్ లను సృష్టించండి

మా సహజ డ్రాగ్-అండ్-డ్రాప్ ఇంటర్ఫేస్తో సిఎస్ఎస్ ఫ్లెక్స్బాక్స్ కోడ్ను విజువలైజ్ చేయండి, కస్టమైజ్ చేయండి మరియు జనరేట్ చేయండి.

Container గుణాలు

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

స్పేస్-మధ్య లేదా స్పేస్-చుట్టూ ఉన్న మూలకాల మధ్య సమాన అంతరాన్ని సృష్టించండి.

Vertical Menu

Home

About

Contact

స్థిరమైన దూరం మరియు అమరికతో నిలువు నావిగేషన్ మెనూను రూపొందించండి.

Responsive Grid

Box 1

Box 2

Box 3

Box 4

Box 5

అందుబాటులో ఉన్న స్థలం ఆధారంగా ఐటమ్ లను చుట్టే ప్రతిస్పందనాత్మక గ్రిడ్ లేఅవుట్ ను సృష్టించండి.

హీరో బ్యానర్

ప్రధాన శీర్షిక

యాక్షన్ కు పిలుపునిచ్చే హీరో సెక్షన్

టైటిల్, సబ్ టైటిల్, కాల్ టు యాక్షన్ బటన్ తో హీరో బ్యానర్ డిజైన్ చేయండి.

Footer Layout

Company

About Us

Careers

Support

సహాయ కేంద్రం

మమ్మల్ని సంప్రదించండి

చిన్న స్క్రీన్ లపై నిక్షిప్తం చేసే కాలమ్ లతో ప్రతిస్పందించే ఫుట్టర్ ను నిర్మించండి.

నిజ-ప్రపంచ ఉదాహరణలు

నావిగేషన్ బార్

Logo

Home

Products

About

Contact

ఎడమవైపు లోగో, మధ్యలో మెనూ ఐటమ్స్, కుడివైపు కార్ట్ ఐకాన్ తో కూడిన కామన్ నావిగేషన్ బార్ లేఅవుట్.

Card Grid

కార్డు శీర్షిక

కార్డ్ వివరణ టెక్స్ట్ ఇక్కడ

కార్డు శీర్షిక

కార్డ్ వివరణ టెక్స్ట్ ఇక్కడ

కార్డు శీర్షిక

కార్డ్ వివరణ టెక్స్ట్ ఇక్కడ

ఫ్లెక్స్ బాక్స్ లక్షణాలను ఉపయోగించి విభిన్న స్క్రీన్ పరిమాణాలకు అనుగుణంగా ప్రతిస్పందించే కార్డ్ గ్రిడ్.

ఆర్టికల్ లేఅవుట్

వ్యాస శీర్షిక

జనవరి 1, 2023 న పోస్ట్ చేయబడింది · 5 నిమిషాలు చదవండి

వ్యాసం కంటెంట్ ఇక్కడ. ఇది సంక్షిప్త సారాంశం కావచ్చు లేదా పూర్తి వ్యాస పాఠం కావచ్చు. ఫ్లెక్స్ బాక్స్ చిత్రం మరియు టెక్స్ట్ ను దృశ్యపరంగా ఆకర్షణీయమైన రీతిలో అలైన్ చేయడానికి సహాయపడుతుంది.

ఎడమ వైపు చిత్రం మరియు కుడి వైపున టెక్స్ట్ కంటెంట్ తో కూడిన ఒక సాధారణ వ్యాస లేఅవుట్, మొబైల్ పరికరాలపై నిల్వ చేయబడింది.

Dashboard Layout

Header

Sidebar

ప్రధాన కంటెంట్

Footer

హారిజాంటల్ మరియు వర్టికల్ అలైన్ మెంట్ కొరకు ఫ్లెక్స్ బాక్స్ ఉపయోగించి శీర్షిక, సైడ్ బార్, మెయిన్ కంటెంట్ ఏరియా మరియు ఫుట్టర్ తో కూడిన డ్యాష్ బోర్డ్ లేఅవుట్.

ఫ్లెక్స్ బాక్స్ ఫండమెంటల్స్

ఫ్లెక్స్ బాక్స్ అంటే ఏమిటి?

ఫ్లెక్సిబుల్ బాక్స్ లేఅవుట్, సాధారణంగా ఫ్లెక్స్బాక్స్ అని పిలుస్తారు, ఇది సిఎస్ఎస్ 3 లేఅవుట్ మోడల్, ఇది కంటైనర్లోని వస్తువుల మధ్య స్థలాన్ని పంపిణీ చేయడానికి మరియు సర్దుబాటు చేయడానికి సమర్థవంతమైన మార్గాన్ని అందిస్తుంది, వాటి పరిమాణం తెలియనప్పుడు లేదా డైనమిక్గా ఉన్నప్పటికీ.

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 ఫ్లెక్స్ ఐటమ్ లు. కంటైనర్ అనేది పేరెంట్ ఎలిమెంట్, మరియు ఐటమ్ లు దాని ప్రత్యక్ష పిల్లలు.

మెయిన్ యాక్సిస్ వర్సెస్ క్రాస్ యాక్సిస్

ఫ్లెక్స్ బాక్స్ లేఅవుట్లు రెండు అక్షాలపై ఆధారపడి ఉంటాయి:main axis and the క్రాస్ యాక్సిస్.

ప్రధాన అక్షం:ఫ్లెక్స్ ఐటమ్ లను ఉంచే ప్రాధమిక అక్షం. దీని ద్వారా నిర్వచించబడిందిflex-direction.
క్రాస్ యాక్సిస్:అక్షం ప్రధాన అక్షానికి లంబంగా ఉంటుంది. దీని దిశ ప్రధాన అక్ష దిశపై ఆధారపడి ఉంటుంది.

ప్రధాన యాక్సిస్ →

← క్రాస్ యాక్సిస్

Start

Main

End

Container గుణాలు

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

SCSS నుంచి CSS కన్వర్టర్ వరకు

మీ ఎస్సీఎస్ఎస్ కోడ్ను సీఎస్ఎస్గా మార్చండి. వేగవంతమైన, సులభమైన మరియు సురక్షితమైనది.

CSS కన్వర్టర్ కు తక్కువ

మీ లెస్ కోడ్ ని CSS గా మార్చండి. వేగవంతమైన, సులభమైన మరియు సురక్షితమైనది.

సులభంగా CSS3 రూపాంతరాలను జనరేట్ చేయండి

సంక్లిష్టమైన CSS3ని సృష్టించడానికి ఒక శక్తివంతమైన, సహజమైన సాధనం కోడ్ రాయకుండానే రూపాంతరం చెందుతుంది. రియల్ టైమ్ లో మార్పులను విజువలైజ్ చేయండి మరియు మీ ప్రాజెక్ట్ ల్లో ఉపయోగించడం కొరకు జనరేట్ చేయబడ్డ CSSను కాపీ చేయండి.

దశాంశానికి టెక్స్ట్

టెక్స్ట్ ని అప్రయత్నంగా దశాంశ ప్రాతినిధ్యానికి మార్చండి

Bytes Unit Converter

డిజిటల్ సమాచారం యొక్క విభిన్న యూనిట్ల మధ్య ఖచ్చితత్వంతో మార్చండి

కస్టమ్ డిస్క్లైమర్లను సృష్టించండి

మీ వెబ్ సైట్, అనువర్తనం లేదా సేవకు అనుగుణంగా సమగ్ర డిస్క్లైమర్లను జనరేట్ చేయండి.