Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of CSS streaming layout for everyone, Xiaobian thinks it is quite practical, so share it with you for a reference, I hope you can gain something after reading this article.

description

Flow layouts use non-fixed pixels to define web page content, i.e. percentage layouts.

By setting the width of the box to a percentage, it scales according to the width of the screen, not limited by fixed pixels, and the content fills to both sides.

classification

Fixed left, adaptive right

Right Fixed Left Adaptive

Fixed on both sides, adaptive in the middle (Holy Grail layout)

bisected layout

examples

.masonry { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Valley Song */ column-count:3; -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em; width: 80%; margin:1em auto;}.item { padding: 1em; margin-bottom: 1em; -moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; background: #b5ffa1;} //adapt screen @media screen and (max-width: 800px) { .masonry { column-count: 2; // two columns on larger phones }}@media screen and (max-width: 500px) { .masonry { column-count: 1; // two columns on larger phones }} About "CSS streaming layout sample analysis" This article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.