React Native FlexBox Layout in Hindi #21

Показать описание

Welcome Guys,Today in this Video we are going to see flex box in react native.

What is flex box in react native?
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.

There are few difference in flex box in react native and in css:-

The defaults are different, with flexDirection defaulting to column instead of row, alignContent defaulting to flex-start instead of stretch, flexShrink defaulting to 0 instead of 1, the flex parameter only supporting a single number.
We have seen various values in flex direction, like column,row,column-reverse,row-reverse.

What is Justify Content?

It describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with flexDirection set to row or vertically within a container with flexDirection set to column.
We have seen various values in Justify Content like flex-start,flex-end,center,space-between,space-around.

What is Align Items?

It describes how to align children along the cross axis of their container. It is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis.
We have seen various values in Align Items like stretch,flex-start,flex-end,center.

Then we have seen Align Self,It has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.

------- Timeline -----

00:00 What we are going to learn today?
00:28 Difference between flex box in react native and in css.
01:19 What is flex direction?
02:42 Giving direction horizontally & Vertically.
02:59 reverse column and row
04:02 layout direction
04:20 How to center the content vertically?
05:06 How to center the content horizontally?
05:27 Various values of justify content
07:01 Various values of align items
09:05 How to give various properties to the boxes horizontally?
12:13 How to align a particular item?
13:48 Giving flex value to Text
14:38 Highly recommended video for Flex Box
15:02 Outro

************* Must Watch Videos For Web Development *************

😍😍 Check Programming Videos in One Hour👇

*********** CLICK HERE TO WATCH *************

***************** MUST WATCH VIDEOS ******************

Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi

Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.

Don't Forget to Follow me on all Social Network,

Рекомендации по теме

Комментарии

Sir Thapa ap ki video bth informative han aur muja learn kerna ma bth maza aya raha ha. Special ap ki simple language bth achi ha . example in 5 boxes to nachana ha for flex learning. Thanks

faisalasghars

awesome video from awesome creator
love from delhi❤❤❤❤❤❤

weightlossfreak

Sir please React Native me backend PHP par parhaiye ga, it's a request. Lots of love for you from Pakistan.

usamausman

Hello i m learn from your road map MERN stack react js i have started from html and css now I m at java script...

But I wants to know that I have no idea in data structure what it's necessary.. Plz reply me this I have not so serious on That why... 😒😒

India