Home >Web Front-end >HTML Tutorial >CSS3 flexible layout_html/css_WEB-ITnose
CSS3 flexible layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:021329browse
Flexbox is a page layout module proposed by CSS3. Flexbox can arrange the list horizontally or vertically, and fill the space that can be extended. Slightly more complex layouts can be achieved by nesting flex containers.
Using flexbox, you can easily create flexible layouts, which allows elements to expand and contract within the container on mobile devices, making it easier to implement common layouts, such as three-column layouts.
Flexible container and flexible block
A flex container contains three flexible blocks: left content right.
You can set the display to flex to make the block a flexible block.
You can set flex-flow to determine the layout direction of the elastic block. Set it to row, horizontal layout, and set to cloumn, vertical layout:
Flexible blocks can be arranged in multiple rows or in a single row. You can set wrap to arrange it in multiple rows, as shown in the figure:
Horizontal layout requires specifying the width of each block, which can be a fixed width, such as 300px, or a proportional width, such as flex :1, meaning the width that occupies one-Nth of the remaining space except the specified width, N is the total number of copies.
Its height is the height of the flex container.
As shown in the picture:
The vertical height is a similar situation.
A comprehensive example:
<!DOCTYPE html><html><head><style> .container{ background:#a1a1a1; display:flex; flex-flow:row; height:500px;}.main { width: 60%;}.left { flex: 1; background:pink;}.right { flex: 2; background:pink;}</style></head><body><div class="container"> <nav class="nav left">…</nav> <section class="main"> Winter comes after autumn.It snows heavily here.... </section> <nav class="nav right">…</nav></div></body></html> Effect:
Browser support: For wider browser support , you need to consider adding support for the old syntax version of flexbox. The above example runs OK in FF23.0.1.
Reference English documentation: http://helephant.com/2013/03/23/css3-flexbox-layout/