1 / 8

Importance of Flexbox for Web application Programmers

Each flexbox layout consists of two important components – flex container and flex items. The flex container acts as a container for flex items. It holds multiple flex items, and lay out them along the main axis. The flexbox model defines how the flex items will be laid out inside the flex container. The developers have option to layout the flex container either vertically or horizontally. They also have option to avail several features of flex container and flex items.<br>

mindfiresolutions
Download Presentation

Importance of Flexbox for Web application Programmers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. E Ea ac ch h f fl le ex xb box i im mp po or rtant a an nd d f fl le ex x i it te em ms s. . T Th he e f fl le ex x c co on nt tai aine a as s a a c co on nta taine m mu ul lt tipl a al lo on ng g t th he e m ma ai in n a ax xi is s. . T Th he e f fl le ex xbox m mo od de el l d de ef fi ine b be e l la ai id d o ou ut t i in ns si id de e t th he e f fl le ex x c co on nt tai aine T Th he e d de ev ve elo loper t th he e f fl le ex x c co on nt tai aine h ho or ri iz zo ontal a av va ai il l s se ev vera a an nd d f fl le ex x i it te em ms s. . ox l la ay yo ou ut t c co on ns si ists tant c co om mp pon sts o of f t tw wo o onen ent ts s – – f fl le ex x c co on nta tain iner er ner r a ac ct ts s iner r f fo or r f fl le ex x i it te em ms. s. It It h ho ol ld ds s iple e f fl le ex x i it te em ms, s, a an nd d l la ay y o ou ut t t th he em m box nes s h ho ow w t th he e f fl le ex x i it te em ms s w wi il ll l ner r. . pers s h ha av ve e o op pt ti ion ner r e ei it the ntally. eral l f fe ea atur on t to o l la ay yo ou ut t her r v ve er rti tically cally o or r on t to o ly. T Th he ey y a al ls so o h ha av ve e o op pt ti ion tures es o of f f fl le ex x c co on nta tain iner er

  2. Under Understanding standing Impor Pr Proper operties ties of of F and F and Fle Flex-direction Important lex Containe x Container r lex Items x Items tant Fle T Th he e p pr ro operty i ite tems v va al lue w wh hi ich ho to to c ch ha ange r re eve o ou ut t th the e f fl lex ha r re eve perty d de ef fines ms i in ns si ide ue o of f f fl lex ch w wi il ll l l la ay y o ou ut t th the e f fl le ex x i ite tems hor rizontally. nge th the e d de efaul verse, ex i ite tems hand, verse ines th the e d di ir rection de f fl lex ex- -dir ection o of f f fl le ex x tainer. direc ectio ex c co on ntain tion n p pr ro op perty er. T Th he e d de efault erty i is s r ro ow ws s fault ms izontally. Bu But t th the e d de evelope fault t v va al lue umn- -rev ms v ve er rtically. reverse rse th the e w wr ri iting veloper rs s ha ue to to c co olumn, reverse. tically. O On n th the e o oth ther se a and ting o or rd der hav ve e o op pti tion lumn, r ro ow w- - umn w wi il ll l l la ay y on rse, o or r c co ol lumn erse. C Co ol lumn er nd, r ro ow w- -rever nd c co ol lum umn n r re everse er o or r m mo od de. e. verse w wi il ll l

  3.  Flex-wrap A As s th the e n na am me e d de ep picts, T Th he e d de eve w whe p pr ro operty to to w wr ra ap p o or r w wr ra ap p- - r re eve Bu i in n th the e f fl lex o or rd der.  Flex-flow T The T Th he e d de eve A Al ls so, o, th the ey y c ca an n u us se e th the e p pr ro operty v va al lue v va al lue icts, th the e p pr ro operty lopers c ca an n ta take hen n th the e s sp pa ace ce i in a perty i is s n no ow wr rap perty s sp pec ecifies ke a ad dv vant n a s si ingle ap. . H Ho owev verse. ex i ite tems ex l li in ne. e. O On n th the e o oth ther er h ha an nd, ifies i if f th the e f fl lex age o of f th the e f fl lex ex l li ine wever, rse. I If f th the e v va al lue ms w wi il ll l b be e w wr ra app d, w wr ra ap p- - r re eve ex i ite tem wrap p pr ro oper dequate. velope ue i is s n no ow wrap ed i if f th the e v va alu lue e i is s w wr ra ap p a and verse m w wi il ll l b be e w wr ra apped perty he d de efault ve o op pti tion rap, , th the e f fl le ex x i ite tems nd th the ere rse w wi il ll l w wr ra ap p th the e f fl lex pped o or r n no ot. t. ex i ite tems ue o of f th the e f fl lex nge th the e d de efault ms w wi il ll l n no ot t b be e w wr ra apped. re i is s i ina ex i ite tem ms s i in n r re eve velopers antage ex- -wrap ate. T The loper rs s h ha ave ty to to w wr ra ap p th the e f fl lex fault v va al lue on to to c ch ha ange ms wrap ue pped. ace verse ngle f fl lex ne i in in n ina adequ ex- -wrap fault v va al lue er, th the e d de eve But t th the e f fl lex pped nadequ dequate ate s sp pace rse er. he f fl lex ex- -flow velopers flow p pr ro opert lopers c ca an n u us se e th the e f fl lex perty y i is s d de es sign igned ex- -flow perty to to s sp pec ecify rap. . B Bu ut t th the e d de eve ection a and ed a as s a a s sho flow p pr ro operty ify i if f th the e f fl lex hor rth thand perty to to d de efine and p pr ro opert fine th the e d di ir rec ectio ex i ite tem ms s w wi il ll l b be e w wr ra apped velopers ping g o of f f fl lex perty y f fo or r f fl le ex x- -d dire irection ction a and nd f fl lex ex e el le eme ex- -wrap men nts. wrap. . ts. fault t fault lt tion n o of f th the e f fl lex pped o or r n no ot. t. T Th he e d de efaul ve o op pti tion ex e el lements. ue o of f th the e p pr ro operty ue a ac cco perty i is s r ro ow w n no ow wrap ding g to to th the e d di ir rection lopers h ha ave on to to c ch ha an nge ge th the e d de efau cor rdin nd w wr ra ap ppin ements.

  4.  Justify-content T Th he e p pr ro operty o on n th the e m ma ai in n a ax xi is. s. T Th he e d de efault a al li ign c ch ha ange  Align-items T Th he e p pr ro operty us s str tretch c ch ha ange b ba aseli e end w wi il ll l p po os si itio p po os sition perty a al li igns ex i ite tem ms s h ho or rizont fault v va alue ms a at t th the e b be eg ginning fault v va alue gns th the e f fl lex ally w wh he en n th the ey y d do o n no ot t u us se e a al ll l s sp pace lue o of f th the e j ju us stify inning o of f th the e f fl lex lue to to f fl le ex x- -end, izontally ace a av vailable ex- -st start wever, th the e d de evel en, a an nd d s sp pa ace ce- -around. ailable ch opers tify- -con ex c co ontai ter, s sp pa ace ce- -betwe conte ten nt t p pr ro operty ntainer. between, perty i is s f fl lex art w wh hi ich velope around. gns s th the e f fl lex nge th the e d de efault ex i ite tems ner. H Ho owever, rs c ca an n end, c ce en nter, perty a al li igns ace o on n th the e c cr ro oss etch w wh hi ich nge th the e d de efault seline nd w wi il ll l p po os si iti tion tion n th the e i ite tems ition th the e i ite tem ms s a at t th the e b ba aseline ms i in ns si ide ss a ax xi is s f ful ully. ex i ite tems lue o of f a al li ign start w wi il ll l p po os sition on th the e i ite tems ms v ve er rtica gns a al ll l i ite tems de f fl le ex x c co on ntain ly. T The ms to to f fi it t th the e c co ontainer. gn- -items ition th the e f fl lex ms a at t th the e b bo ott ttom tical lly ly a at t th the e c ce ent nter seline o of f th the e c co on ntain er v ve erticall ue o of f th the e a al li ign ntainer. H Ho owev perty to to f fl lex ex i ite tems om o of f th the e c co ontain er o of f th the e c co on ntain tainer. rtically y w wh he en n th the e f fl lex gn- -it items wever, ex- -start ms a at t th the e to top p o of f th the e c co on ntain ntainer. tainer, er. tainer fault v va al lue ex i ite tems ems p pr ro opert er, th the e d de eve start, , f fl lex tainer, er. O On n th the e o oth ther er, a an nd d b ba aseline ms d do o n no ot t perty y i is s velope d, c ce en nter, er, w wh he erea er ha seline w wi il ll l use e th the e s sp pace he d de efault ch s str tretches fault v va alue ne. . Fl Fle ex x- -start etches th the e f fl lex loper rs s c ca an n ter, o or r reas s f fl lex hand items p pr ro operty ex- -en end, ex- - nd, , c ce ent nter er

  5.  Align-content Th a al li ig gn n- -content, de o of f f fl le ex x i it te em ms s. . Th t th he e f fl le ex x l li in ne e t ti il ll l i it t o occ ccu upies h ha av ve e o op pt ti io on n t to o ch s sp pa ace ce- -between, b be egi ginn e en nd d o of f t th he e co t th he e f fl le ex x co di dis st tr ri ibute The e al ali ig gn n- -content content, u un nl li ik ke e a al li ig gn n- -items dev vel elo opers The e de den nti tica doe es s n no ot t p po os si iti tion content ault lt v val alu ue e o of f t th he e p pro rop pe erty pies t th he e r re em ma ai in ning cha ang between, o or r s sp pa ace ce- -a arou nni ing con nt tain con nt tain bute t th he e b ba as se eli lines content i it te em m i is s al alm mo os st t i ide cal l t to o t th he e al ali ig gn n- -i items on t th he e f fl le ex x i it te em ms. s. Th tent p pr ro op perty rty i is s s st tre retch ing s sp pa ace. def fa aul ult t v va al lue round ainer, er a an nd ce ainer. nes e ev ven tems p pro rop perty. erty. Bu The e But t items, , do pers ca can n u us se e t th he e a al li ig gn n- -con def fau erty t to o a al li ig gn n t th he e f fl le ex x l li in ne es s i in ns st tead tch w wh hi ich ce. Ho ue t to o f fl le ex x- -start, nd. . F Fl le ex x- -start er, w wh hi il le e f fl le ex x- -end d cen nter er. A At t t th he e s sa am me e t ti im me e, , s sp pa ace ce- -between enly ead ch s st tretche dev ve elop end, , ce cen nt ter, ne t to ow wa ar rds ck t th he e l li in ne es s t to ow wa ar rds ck t th he e b ba as sel eli ine between a an nd d s sp pa ace ce- -arou ughout retches s lopers er, How wever start, f fl le ex x- -end ck t th he e b ba as se eli line end w wi il ll l p pa ack ter w wi il ll l p pa ack ever, , t th he e de ers nge e t th he e de start w wi il ll l p pa ack ds ng o of f t th he e co con nt tain ainer ds t th he e ter o of f nd w wi il ll l ne t to ow wa ards rds t th he e ce cen nter around tainer. ly t th hr ro oug hout t th he e f fl le ex x co con ntain er.

  6.  Flex Item Properties T The p pr ro operties S So om me e o of th al alig ignment o of fle p pr ro operty p pus fl fle ex x p pr ro operty o ot the he we perties o of a fl f the ese nment o or r p po osi sit tion f flex x c co ont ntain perty t to o sp ush the perty t to o sp spe eci cify her r fl fle ex x it ite em ms s ho appl plic ication f a fle ex x it ite em m – – o or rd de er, r, m mar argi gin, se p pr ro operti ion o of f t the ainer. spe ecify h the it ite ems fy t the hold ld b by th web b ap hav ve e o op pt tio ion n t to o us n, fl fle ex x an w d de ev velo he fl fle ex x it ite em he sa sam me e t tim cify o or rd de er r o of a fl ms in in v var arying he le leng y the e sa sam me e c co ont ntain ation p pr ro ogram grammers use e v var ario ious self. ide t the he p pr ro operti pers c can and d m mar argi gin n p pr ro operty ons. . Li Lik kewise, ngth ainer. mers al also so ha us and d al alig ign n- -self. elopers m se set t t thr ime e, , t the f a fle ex x it ite em m an ying di dir re ecti th o of a perties es e ev ve en n al allo low pers t to o o ov ve err rride hro ough he d de ev velo he ugh t the elopers perties use e o or rd der er perty t to o an us tively es er. At At t the an us ctions ewise, t the f a fl fle ex x it ite em ms s r re ela lative er. hey y c can use e t the ly t to o he

  7. Content Designed By Mindfire Solution

More Related