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

CSS3's flex elastic box model layout example analysis, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Flexible Box (elastic box) can make the distribution of pages more reasonable and convenient.

This cannot be done with a conventional layout before.

XML/HTML Code copies content to the clipboard

1 2 3 4

What's the difference between display:flex and display:box?

The former is the syntax of flex 2012 and will be the standard syntax in the future, and most browsers have implemented unprefixed versions.

CSS Code copies content to the clipboard

/ * parent * / .warp {width: 100%; height: 100px; / * this is used to define the scaling container. Whether it is inline or block depends on the set value. * / / * at this point, all of his child elements will become flex document streams, called scalable items. * / / *-- * / display:-webkit-box; / * Chrome 4, Safari 3.1, iOS Safari 3.2 + * / display:-moz-box; / * Firefox 17-* / display:-webkit-flex / * Chrome 21, Safari 6.1, iOS Safari 7, Opera 15 + 16 * / display:-moz-flex; / * Firefox 18 + * / display:-ms-flexbox; / * IE 10 * / display: flex / * Chrome 29, Firefox 22, IE 11, Opera 12.1, IE 17, Android 4.4 + * / *-/ / * use box-align and box-pack attributes together Center the child elements * /-webkit-box-pack:justify -webkit-box-align: ustify;-moz-box-pack:justify;-moz-box-align:justify; box-pack:justify; box-align:justify / *-- * / / * defines the direction in which flex-direction:row; items are placed in the telescopic container * / telescopic-webkit-flex-direction:row / * defines whether to display the abbreviated version of * / flex-wrap:nowrap; / * flex-direction "and" flex-wrap "attributes in a single line or multiple lines in a telescopic container. The default row nowrap*/ flex-flow:row nowrap; / * sets the alignment of the telescopic container in the horizontal direction. * / justify-content:center; / * sets the alignment of the telescopic container in the longitudinal direction. * / align-items:center; / * when there is extra space in the longitudinal direction of the telescopic container, it can be used to adjust the lateral alignment of the telescopic container in the telescopic container * / align-content:center;} / * child * / .warp .container {width:80px; height:80px; background-color:#eee; text-align:center / * set the sequence of scaling projects. * / order:-1; / * sets the expansion ratio of the scaling project. * / flex-grow:1; / * sets the proportion of scaling items to shrink. * / flex-shrink:2; / * sets the scaling base value of the scaling project. The abbreviations of * / flex-basis:auto; / * flex-grow "," flex-shrink "and" flex-basis "are * / flex:1 2 100px; / * are used to override the default alignment on individual scaling items. * / align-self:center;}

Directly on the code, write a Demo to make it easy to understand, where warp is the parent element, called "scaling container", and modular is the child element, called "scaling project".

1) Flexbox layouts are best suited for application components and small-scale layouts, while grid layouts are more suitable for larger layouts.

2) currently, no browsers support the box-flex attribute, Firefox supports the alternative-moz-box-flex attribute, and Safari, Opera and Chrome support the alternative-webkit-box-flex attribute.

3) columns of CSS has no effect on telescopic containers.

4) float, clear and vertical-align have no effect on scaling projects.

Example: mobile navigation (center, left and right, adaptive center, adaptive vertical arrangement)

CSS Code copies content to the clipboard

.nav {background:#00BFFF; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;-webkit-flex-flow:row wrap; / * Adaptive vertical arrangement * /-webkit-flex-flow:column wrap / * all columns are aligned to the starting position of the spindle * / justify-content:flex-start; / * all columns are aligned to the end position of the spindle * / justify-content:flex-end;} .nav a {text-decoration:none; display:block; padding:1em; color:#fff / * Center tile * / flex:1;} @ media all and (max-width: 800px) {.nav {/ * all columns are evenly distributed across the spindle * / justify-content:space-around;}}

XML/HTML Code copies content to the clipboard

1 2 3 4

Example: self-adaptive layout commonly used on mobile terminal

CSS Code copies content to the clipboard

.wrapper {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;-webkit-flex-flow:row wrap; flex-flow:row wrap;} .wrapper > * {padding:10px; flex:1 100% } .header {background:#FF6347;} .footer {background:#90EE90;} .main {background:#00BFFF;} .aside-1 {background:#FFD700;} .aside-2 {background:#FF69B4 } @ media all and (min-width: 600px) {.aside {flex:1 auto;}} @ media all and (min-width: 800px) {.main {flex:3 0px;} .aside-1 {order:1 } .main {order:2;} .aside-2 {order:3;} .footer {order:4;}}

XML/HTML Code copies content to the clipboard

Top

The text I displayed in the middle

The text I display on the left, the bottom of the text that I display on the right.

This is the answer to the sample analysis question about the layout of CSS3's flex elastic box model. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.