CSS 弹性盒子模型

CSS 弹性盒子模型

https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/

CSS Flexible Box Layout Module Level 1

W3C Candidate Recommendation, 26 May 2016

1

1

深入了解 Flexbox 伸缩盒模型

1

w3schools

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_semantic

http://www.w3schools.com/css/css3_flexbox.asp

http://www.w3cplus.com/

1

1

Website Layout Using HTML5

HTML5 offers new semantic elements that define different parts of a web page:

<header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent self-contained article <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details <summary> - Defines a heading for the <details> element

This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout:

HTML Layout Using <div> Elements

	The <div> element is often used as a layout tool, because it can easily be positioned with CSS.

This example uses four <div> elements to create a multiple column layout:

HTML Layout Using Tables

	The <table> element was not designed to be a layout tool. The purpose of the <table> element is to display tabular data.

Layout can be achieved using the <table> element, because table elements can be styled with CSS:

http://www.w3schools.com/html/html_responsive.asp

1

1

4 Different HTML/CSS Layout Techniques to Create a Site

• Tables. What’s good about them? Using tables for layout creation is intuitive. You can see them almost everywhere! You don’t even need to use a separate CSS stylesheet when using tables. And, what is more important, they don’t break. Have you ever seen a broken table? No? Me neither. Sounds great. We’ll use one of them for our site later.
• Float. We’re talking about the CSS property here. It’s common practice to use float within your web page to create a layout. And, in this case, you will need to use a separate stylesheet. Two files, huh? Sounds not so convenient comparing to using tables. However, using float is kind of a standard. The only way you’ll use your HTML file is to determine the content of your web page. If you want to align your content in some freaky way, you must use the CSS file. Only!
• CSS Frameworks. These work the same way as JavaScript frameworks. Just add the source file to your header (using<link rel="stylesheet" type="text/css" href="stylesheets/framework_file.css">, for example) and it’s ready to go! There is no need to write your own properties. Just use the classes that framework developers prepared for you. Sounds great. But how does it work? We’ll see.
• Flexbox. Flexbox is a short name for the CSS Flexible Box Layout Module. And this is something new comparing to the float property, for example. The main idea behind the flexbox is to give a container the ability to alter its items’ width, height and order. You should use it if you want to fill the available space in the best possible way. For example, to accommodate to all kind of display devices and screen sizes. A flex container will expand its items to fill the screen.

https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/

## refs

***

<div>
<a href="https://info.flagcounter.com/QIXi">
<img src="https://s11.flagcounter.com/count2/QIXi/bg_000000/txt_00FF00/border_FF00FF/columns_3/maxflags_12/viewers_0/labels_1/pageviews_1/flags_0/percent_1/" alt="Flag Counter" border="0">
</a>
</div>

***

<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none;">
<h3><strong><span style="font-size: 16pt; color: #00ff00;">&copyxgqfrms 2012-<span data-uid="copyright-aside">2020</span></strong></span</h3>
<p><span style="font-size: 18pt; color: #00ff00;"><strong>www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
</blockquote>

***