Learn CSS Flexbox in easy way

in the world of web development we often need to control the position of elements using position or margin properties but what if we need to create a footer for a website or a cool menu our ancestors used some complicated ways to do this but now forget about any other way than flexbox flexbox is a CSS technology a set of rules properties and values that allows you to create complex and flexible layouts that previously seemed impossible by the way flexbox is widely supported by browsers in HTML let's create a container and three elements in it with class in order to turn this container into a flex container we need to change its display type to flex now the child elements will obey Flex box rules the elements will be arranged in two axes the main axis horizontal and the cross axis which is perpendicular to the main axis let's change the direction of the elements using the flex Direction property by default it is row which means they are arranged horizontally by specifying the value of column they will be lined up vertically usually the elements will be placed in the upper left Edge but with the justifi content property you can place it in the center which is very convenient or in the right Edge you can also distribute them evenly space between value will place the elements so that the first and third elements will be on the edges and the second in the middle space equal will set equal space between the elements and their edges space around works the same way but the edge distance will be half half align items property works the same way as justify content but it aligns the elements to the Cross axes by the way if you want to Center the blocks you can set the height of the container and the center alignment on two axes let's talk about common situation say you have not three elements but nine elements with a width of 100 pixels each a total of 900 pixels and the width of the container is only 500 this will lead to compression of blocks to move blocks to a new row use flex wrap property and wrap value very useful Gap property sets the space between elements this will often come in handy note that you can't set the space on the edges only between elements align content property sounds similar to align items but don't get them confused they are different because align content aligns elements to the Cross axis but only if they have Flex wrap wrap and are moved to a new row you can place elements at the bottom center top and use space between space evenly and space around values simply put this property is used to evenly distribute the space between several rows along the cross axis okay so far we've talked about properties that apply to the flex container there are several properties that need to be added directly to individual elements with the order property you can change the order in which the elements are displayed usually the elements are displayed in the order in which they are placed in the HTML markup and the default value of this property is zero let's give each element a different order first the element will be displayed with order zero then with order one then with order two and so on let's create some more elements for a total of five elements with a width of 200 pixels each Flex grow property allows you to stretch an element so that it occupies all the free space in the container the default value is zero so elements are not stretched in any way if you specify a value of one the element will occupy all the free space in the container Flex shrink property works the other way around let's reduce the size of the container a bit and set the second element Flex shrink two now it will be compressed by a factor of two relative to the other elements the default value of this property is one which means that the elements are compressed to fit in the container look at your elements they're 200 pixels wide with flex basis property you can overwrite this value for example set it to 400 pixels and the width of the element will be 400 pixels if you specify the value column in the flex Direction property then Flex basis will determine the height of the element but don't waste your time time and write all three of these properties separately rather use the shorthand Flex property it combines the three values of these properties Flex grow is mandatory the others will have default values if your elements have alignment set with align items then individual elements can be aligned differently for example all elements have align items start and the second block has align self-c Center and it will be centered separate from the others and so as you may have noticed flexbox is one of the big Topics in CSS that you may come across flexbox is the best way in create creating responsive elements I tried to make it clear for you with cool pictures now an important point that you need to know about you know what's the best thing to help you learn CSS my Instagram Community there is over 76,000 of us I've been teaching people CSS for a year and a half now and I've made hundreds of awesome posts and helped thousands of people based on my vast experience I developed a scheme to teach people and wrote my book on CSS where you will become Pro in web development from scratch read more on this site CSS launch.com and for this weekend I will be giving a minus 25 % discount on it so don't miss the moment to change your life as a developer bye friends

Channel: cssiseasy

Views: 14,556

Keywords:

Id: Zln40_7VVts

Length: 5min 5sec (305 seconds)

Published: Sat Jun 22 2024