Responsive Flexbox Layout

Responsive Flexbox Layout | CC

Рет қаралды 30,154

CoCheat

Күн бұрын

Пікірлер: 31

@charlestoneoyoo 10 ай бұрын

This is a nice KZbin Channel. Keep up with the posts

@enriquegrageda 11 ай бұрын

Thanks for you work 😊

@mr.z6325 10 ай бұрын

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)

@CoCheatCoding 10 ай бұрын

I added a width to the items

@lofilove2572 9 ай бұрын

nice

@ykw2117 10 ай бұрын

Unfortunately, the last part of the code (starting from @media .... ) is being covered by the You-tube's commercial and hence cannot be seen.

@naoart9320 10 ай бұрын

@media all and (mind-width: 600px){ .side{ flex: 1; } }

@Jj-rc4dr 9 ай бұрын

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

@CoCheatCoding 9 ай бұрын

.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

@Jj-rc4dr 9 ай бұрын

@@CoCheatCoding thanks 👍🏼

@giusyvignes1382 10 ай бұрын

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.

@CoCheatCoding 10 ай бұрын

Maby try row-reversed instead of row

@giusyvignes1382 10 ай бұрын

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...

@giusyvignes1382 10 ай бұрын

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.

@andreasklug6569 9 ай бұрын

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: kzbin.info/www/bejne/bGmyZ5iFfKZ6p6M

@Ek-xtreme 10 ай бұрын

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

@raffmusicgaming3687 10 ай бұрын

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.

@ridelove13 10 ай бұрын

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

@giusyvignes1382 10 ай бұрын

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!