Version 2 of the Flexbox/Grid course at Frontend Masters.

  • By Frontend Masters
  • Last update: Jan 3, 2023
  • Comments: 1

Frontend Masters: CSS Grids and Flexbox in Responsive Web Design v2

Frontend Masters

Please click here to head to the course website.

Issues and Pull Requests

Please file issues and open pull requests here! Thank you! For issues with project files, either file issues on this repo or open a pull request on the projects repos. This repo itself is the course website.

License

The content of this workshop is licensed under CC-BY-NC-4.0. Feel free to share freely but do not resell my content.

The code, including the code of the site itself and the code in the exercises, are licensed under Apache 2.0.

Attributions

Icons made by Freepik from www.flaticon.com

Github

https://github.com/FrontendMasters/grid-flexbox-v2

Comments(1)

  • 1

    Question about why flex has different behaviors between chrome and firefox

    hi, I found different flex behavior on chrome and firefox when I was following the lecture video "Text Overlay Effect with Flexbox" on 03:10. After I add "display: flex" to figure, I found chrome has different behaviors than firefox. Here is the code after adding "display: flex": https://codepen.io/nancyz/pen/NWwvEmV?editors=1100

    screen shot on chrome chrome-flex screen shot on firefox firefox-flex

    after I try to add wrapper for image and add height for image css, I found the behaviors of flex acts similarly here is the code after I made some modification and looks same on both chrome and firefox: https://codepen.io/nancyz/pen/NWwvEVV?editors=1100

    I am curious why browsers have different behavior like this. Is adding wrapper to image solve this problem? If so, why adding wrapper solve this problem?

    Thanks!

Popular Tag

Related