I'd rather use Grid way more adjustable then flex box my general rule of thumb is Flexbox for one dimensional layouts, Grid for multidimensional layouts ez stuff
thanks for the explanation. I'm new and this is really helpful . but can you explain what the following code is used for : .container>* { margin: 10px; padding: 10px; flex: 1 100%; } I'm still stuck on that
.container is your class and >* selects all direct children. padding add 10px of padding inside the selected element. margin adds 10 px of margin around the selected element. and flex 1 100% is shorthand for setting the flex-grow and flex-basis properties. it means the element will grow to fill the available space
Hi, I have the same layout with the two left and right sidebars, by default when the layout reduces the sidebars it always starts from the one on the left and then follows the one on the right, I would like to be able to reverse this order because I positioned the menu on the right and I would like to display the right sidebar first when the layout is resized, is it possible to do something like this? Can you reverse first right and then left? I thank you.
thank you, in this way I only managed to obtain the exchange of the two sidebars leaving the central one intact, I would like the sidebars to remain intact and to reverse only when resizing, left to right and right to left in order to obtain display main, side2, side1...
hi, I tried but I think I will have to change a lot to the css, it is the first responsive layout, before this I only created simple layouts, to understand how it works I tried with another layout with a different media query, solved with flex-direction: column -reverse;, the left and right sidebars reverse perfectly. I thank you.
You will have more freedom to order the elements if you use display grid instead of flexbox. With a grid, you can give the different fields manes and then order them as you want. See example: ruclips.net/video/68O6eOGAGqA/видео.html
if you look at a page on a pc it looks different than on an phone. With that you can access the page on a pc and phone and you can still read the page normally
Hi, in the index.html page I can't read the entire etc, even in style.css I can't even see the last line @media all and (... Here I can read 600px){ .side{ flex: this ending doesn't I can see... The Number Is 1?} }.... it's the first time I've tried to make a responsive one, I created the template but side1 and side2 both remain on the left. Please, I would be grateful if you wrote the final code in a comment. Thank you. Ok, the Flex Number I believe Is 1, and the meta tag Is this? It's the First Time I try responsive template... unfortunately the video couldn't be seen well... ok, solved! it was .main{ order: 2;}... I misread it and entered 3. thanks. it's great!
![Hunxho - Ball Forever [Official Video]](http://i.ytimg.com/vi/nki9ZTF9Uls/mqdefault.jpg)
nice
This is a nice RUclips Channel. Keep up with the posts
I'd rather use Grid way more adjustable then flex box my general rule of thumb is Flexbox for one dimensional layouts, Grid for multidimensional layouts ez stuff
Thanks for you work 😊
thank you
Nice video
thanks for the explanation. I'm new and this is really helpful . but can you explain what the following code is used for :
.container>* {
margin: 10px;
padding: 10px;
flex: 1 100%;
}
I'm still stuck on that
.container is your class and >* selects all direct children. padding add 10px of padding inside the selected element. margin adds 10 px of margin around the selected element. and flex 1 100% is shorthand for setting the flex-grow and flex-basis properties. it means the element will grow to fill the available space
@@CoCheatCoding thanks 👍🏼
i like how you hide the part of code i was looking for at the end 😕
🙏🙏🙏🙏
Hi, I would like to understand why when you typed "flex-flow: row rap" why did all the items disappear? and what made it pop up like that? (3:06)
I added a width to the items
Unfortunately, the last part of the code (starting from @media .... ) is being covered by the You-tube's commercial and hence cannot be seen.
@media all and (mind-width: 600px){
.side{
flex: 1;
}
}
Hi, I have the same layout with the two left and right sidebars, by default when the layout reduces the sidebars it always starts from the one on the left and then follows the one on the right, I would like to be able to reverse this order because I positioned the menu on the right and I would like to display the right sidebar first when the layout is resized, is it possible to do something like this? Can you reverse first right and then left? I thank you.
Maby try row-reversed instead of row
thank you, in this way I only managed to obtain the exchange of the two sidebars leaving the central one intact, I would like the sidebars to remain intact and to reverse only when resizing, left to right and right to left in order to obtain display main, side2, side1...
hi, I tried but I think I will have to change a lot to the css, it is the first responsive layout, before this I only created simple layouts, to understand how it works I tried with another layout with a different media query, solved with flex-direction: column -reverse;, the left and right sidebars reverse perfectly. I thank you.
You will have more freedom to order the elements if you use display grid instead of flexbox. With a grid, you can give the different fields manes and then order them as you want. See example: ruclips.net/video/68O6eOGAGqA/видео.html
😊
❤❤
Please max your font size ..this is too small
Nice one bro thanks 👍.
I'm an extreme beginner, could someone exactly explain me what's the purpose of this? And what's the sauce code that mad the 'Difference' thank you.
if you look at a page on a pc it looks different than on an phone. With that you can access the page on a pc and phone and you can still read the page normally
no audio explanation......?
please, remove music it disturbs too much.
mute your damn audio 🤣
Lover your volume to zero 🪄
Hi, in the index.html page I can't read the entire etc, even in style.css I can't even see the last line @media all and (... Here I can read 600px){ .side{ flex: this ending doesn't I can see... The Number Is 1?} }.... it's the first time I've tried to make a responsive one, I created the template but side1 and side2 both remain on the left. Please, I would be grateful if you wrote the final code in a comment. Thank you.
Ok, the Flex Number I believe Is 1, and the meta tag Is this?
It's the First Time I try responsive template...
unfortunately the video couldn't be seen well... ok, solved! it was .main{ order: 2;}... I misread it and entered 3. thanks. it's great!