preface
Recently learned Flexbox layout, then felt really a layout artifact. Finally get rid of the days of using all kinds of positioning floating layouts. To sum up, I found that all the articles introducing Flexbox layout class have been written badly, and all kinds of great god have written vivid images. It is not meaningful to write a layout usage except to record it by myself and check it locally, so I thought of such a website I saw in a video before. But I couldn’t open the web address, so I had the idea to write one of my own. It can also be used for beginners.
Flexbox demo station
It looks something like this:
- Click to set the values and widths of the Flex container and Flex project properties. You can see the effect in real time on the right.
- Friendly tips: beginners are not easy to remember all the attributes and values of the left and right, the mouse on the attribute name can show the role of the corresponding attributes.
Check out the Flexbox demo station
Just simple to write a few responsive CSS, mobile end to see the effect may not be too good, recommended PC side consumption
Making the address
The last
Flex layout tutorial: Syntax chapter: Flex Layout Tutorial: Examples of how Flexbox works by using dynamic diagrams.
If you happen to be learning Flexbox, this little site will help you a little bit. Give me a Star