Have not written a blog for one months, their own blog has not seen, the previous period has been busy writing code, the company has a paint products, and traditional vertical layout is not the same, the layout of the page layout, similar to the Win8, the first, I did not have any clue, and then the bite to do, and later, Encountered a lot of trouble, I checked some information on the Internet, but are not very good, had to do their own, in the process of doing, suddenly think, flex layout, I tried a bit, succeeded
<!DOCTYPE HTML><Head> <styletype= "Text/css">. Scroll{Display:Flex; }. Content{Flex:None;position:relative;float: Left;Display:Flex;width:200px;Height:100px;background:Red;Margin-right:10px;Margin-bottom:10px; } </style></Head><Body><Divclass= "Scroll"> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div> <Divclass= "Content">111111</Div></Div></Body></HTML>
It's my Code.
The effect of running out is as follows:
Flex layout is easy to fix.
Win8 horizontal layout of the effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
