Home >Web Front-end >HTML Tutorial >CSS box model CSS3 scalable box attribute (Flexible Box)_html/css_WEB-ITnose
CSS box model CSS3 scalable box attribute (Flexible Box)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:451626browse
CSS box model (Part 2)
1. CSS3 Flexible Box
The Flexible Box attribute is a newly added box model attribute in CSS3. Some people call it the flexible box model. Its appearance breaks the floating layout we often use. , realize vertical equal height, horizontal division, proportional division and other distribution methods and how to deal with the available space. This model makes it easy to create a fluid layout that adapts to the browser window or a flexible layout that adapts to the font size. But it has certain limitations. In Firefox and Chrome browsers, they need to be defined using their private attributes: Firefox (-moz), Chrome (-webkit).
CSS3 scalable box property list:
property
| Description <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Flexible Box</title></head><body> <div id="main"> <div id="div1">1</div> <div id="div 2">2</div> <div id="div 3">3</div> </div></body></html> | Descriptionbody,div{清除所有元素的默认外边距和内边距 margin: 0; padding: 0;}#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px;}#div1{/*给div1添加样式*/ width: 100px; height: 50px; background-color: #00B366;}#div2{/*给div2添加样式*/ width: 100px; height: 50px; background-color: #80C8FE;}#div3{/*给div3添加样式*/ width: 100px; height: 50px; background-color: #FEB380;}
| |||||||||||||||||||||||||||
| box-orient
| Specifies whether the box's child elements should be arranged horizontally or vertically. | Horizontal or vertical distribution
| |||||||||||||||||||||||||||
| box-direction
| Specifies the display direction of the box's child elements. | Inverse distribution
| |||||||||||||||||||||||||||
| box-ordinal-group
| Specifies the display order of the box's child elements.
| Specific distribution
| |||||||||||||||||||||||||||
| box-flex | Specifies whether the child elements of the box are scalable.
| Box size | |||||||||||||||||||||||||||
| box-flex-group
| Assign scalable elements to flex groups.
| Box size | |||||||||||||||||||||||||||
box-pack
| Specifies the horizontal position in a horizontal box or the vertical position in a vertical box. | More processing space | |||||||||||||||||||||||||||
| box-align | Specifies how to align the child elements of the box. | More processing space | |||||||||||||||||||||||||||
| box-lines | Specifies whether to wrap the display when the space of the parent element box is exceeded. | Insufficient processing space |
| 值 | 描述 |
| horizontal | 在水平行中从左向右排列子元素。 |
| vertical | 从上向下垂直排列子元素。 |
| inline-axis（默认值） | 沿着行内轴来排列子元素（映射为 horizontal）。 |
| block-axis | 沿着块轴来排列子元素（映射为 vertical）。 |
| inherit | 应该从父元素继承 box-orient 属性的值。 |
| Value | Description |
| content-box (default) | This is the width-height behavior specified by CSS2.1. The width and height are applied separately to the element's content box. Draws the element's padding and borders outside of its width and height. |
| border-box | The width and height set for the element determine the border box of the element . That is, any padding and borders specified for the element will be drawn within the set width and height. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively. |
| inherit | The value of the box-sizing attribute should be inherited from the parent element. |
| Value | Description |
| horizontal | Arrange child elements from left to right in a horizontal row. |
| vertical | Arrange child elements vertically from top to bottom. |
| inline-axis (default) | Arrange child elements along the inline axis (map for horizontal). |
| block-axis | Arrange child elements along the block axis (mapped vertically). |
| inherit | The value of the box-orient attribute should be inherited from the parent element. |
说明：
horizontal和inline-axis属性其效果表现一致，都可以将容器水平排列，在默认情况下也呈现水平排列的样式。当父容器设置高度时，在firefox下面其子容器的高度无效，但chrome下面则有效。
如果你容器不设置高度，子容器的高度值才生效，在firefox下面他们的高度取其中的最大值。而chrome下面设置高度的子容器为自己的高度，未设置的其高度和最大值的高度一样，其实就是和父容器的高度一致。
vertical和block-axis属性效果表现一致，都可将子容器垂直排列。他们是对父容器的高度进行分配。如果子容器设置了宽度，也是谷歌下面有效，火狐无效，其它都与horizontal表现一致。
切记，inline-axis为默认值，沿着行内轴来排列子元素（映射为 horizontal）。
示例代码3：设置框的子元素在水平行中从左向右排列子元素 （修改样式表文件，添加如下样式代码）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient: horizontal; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient: horizontal; /*W3C*/ display:box; box-orient: horizontal; } 效果如下：
注:
实现垂直方向上布局、inline-axis 和 block-axis，只需修改值即可。
inherit 属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局。
3. box-direction：规定框的子元素的显示方向。
语法：
box-direction: normal|reverse|inherit;
取值：
| 值 | 描述 |
| normal（默认值） | 以默认方向显示子元素。 |
| reverse | 以反方向显示子元素。 |
| inherit | 应该从子元素继承 box-direction 属性的值 |
说明：以反方向显示子元素。
示例代码4：设置垂直且以反方向显示子元素（修改样式表文件，添加如下样式代码）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; -moz-box-direction:reverse; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-direction:reverse; /*W3C*/ display:box; box-orient:vertical; box-direction:reverse;} 效果如下：
注:
normal只需修改值即可。inherit可自己实验。
4. box-ordinal-group：规定框的子元素的显示次序。
语法：
box-ordinal-group: integer;
取值：
| 值 | 描述 |
| integer（默认值1） | 一个整数，指示子元素的显示次序。 |
说明：根据box-ordinal-group的integer值从小到大显示。
示例代码5：设置子元素的显示次序（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical;}#div1{/*给div1添加样式*/ width: 100px; height: 50px; background-color: #00B366; box-ordinal-group:2; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2;}#div2{/*给div2添加样式*/ width: 100px; height: 50px; background-color: #80C8FE; box-ordinal-group:1; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1;}#div3{/*给div3添加样式*/ width: 100px; height: 50px; background-color: #FEB380; box-ordinal-group:3; -webkit-box-ordinal-group:3; -moz-box-ordinal-group:3;} 效果如下：
5. box-flex：规定框的子元素是否可伸缩。
语法：
box-flex: value;
取值：
| 值 | 描述 |
| value（默认值0.0） | 元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。 |
说明：
可伸缩，顾名思义，子元素如果规定可伸缩，则不要设置宽或高。但一些盒子可以有固定大小，不伸缩。
示例代码6：设置div3为固定大小，div1和div2为可伸缩且div1是div2的两倍（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical;}#div1{/*给div1添加样式*/ box-flex:2.0; -webkit-box-flex:2.0; -moz-box-flex:2.0; background-color: #00B366;}#div2{/*给div2添加样式*/ box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0; background-color: #80C8FE;}#div3{/*给div3添加样式*/ height: 100px; background-color: #FEB380;} 效果如下：
6. box-flex-group：将可伸缩元素分配到柔性分组。
语法：
box-flex-group: integer;;
取值：
| 值 | 描述 |
| integer（默认值1） | 一个整数。（第一个柔性分组是 1，后面的柔性分组是更大的值）。 |
说明：
动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）。具体怎么分，本人还不清楚。
示例代码7：将可伸缩元素分配到柔性分组（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical;}#div1{/*给div1添加样式*/ background-color: #00B366; box-flex:2.0; -webkit-box-flex:2.0; -moz-box-flex:2.0; box-flex-group:1; -webkit-box-flex-group:1; -moz-box-flex-group:1;}#div2{/*给div2添加样式*/ background-color: #80C8FE; box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex-group:2; -webkit-box-flex-group:2; -moz-box-flex-group:2;}#div3{/*给div3添加样式*/ background-color: #FEB380; box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex-group:1; -webkit-box-flex-group:1; -moz-box-flex-group:1;} 效果如下：
7. box-pack：规定水平框中的水平位置或者垂直框中的垂直位置。
语法：
box-pack: start|end|center|justify;
取值：
| 值 | 描述 |
| start（默认值） | 对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）。 对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。 |
| end | 对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。 对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。 |
| center | 均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后。 |
| justify | 在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。 |
说明：
空间太多如何处理，可利用空间的分布取决于两个属性值：box-align 和 box-pack。
属性“box-pack”一般管理水平方向上的空间分布（根据box-orient的值，也可管理垂直方向），有以下四个可能属性：start、end、 justify、 or center。如，start 所有盒子在父盒子的左侧，余下的空间在右侧。
属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。如：start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部。
示例代码8：设置所有盒子在父盒子的右侧（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 400px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:end; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:end; /*W3C*/ display:box; box-orient:horizontal; box-pack:end;}#div1{/*给div1添加样式*/ width: 100px; height: 50px; background-color: #00B366;}#div2{/*给div2添加样式*/ width: 100px; height: 50px; background-color: #80C8FE;}#div3{/*给div3添加样式*/ width: 100px; height: 50px; background-color: #FEB380;} 效果如下：
设置所有盒子在父盒子的中间（center），如下图左；设置垂直（box-orient）且盒子在父盒子的左侧（start），如下图右
8. box-align：规定如何对齐框的子元素。
语法：
box-align: start|end|center|baseline|stretch;
取值：
| 值 | 描述 |
| start | 对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。 对于反方向的框，每个子元素的下边缘沿着框的底边放置。 |
| end | 对于正常方向的框，每个子元素的下边缘沿着框的底边放置。 对于反方向的框，每个子元素的上边缘沿着框的顶边放置。 |
| center | 均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。 |
| baseline | 如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。 |
| stretch（默认值） | 拉伸子元素以填充包含块。 |
说明：控制垂直方向（box-pack的相对方向）。
示例代码9：设置所有盒子在父盒子的右侧（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 400px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; -moz-box-pack:justify; -moz-box-align:center; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:justify; -webkit-box-align:center; /*W3C*/ display:box; box-orient:vertical; box-pack:justify; box-align:center;} 效果如下：
9. box-lines：规定当超出父元素框的空间时，是否换行显示。
语法：
box-lines: single|multiple;
取值：
| 值 | 描述 |
| single（默认值） | 所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。 |
| multiple | 允许框扩展为多行，以容纳其所有子元素。 |
Explanation:
What to do if there is insufficient space? Like the traditional box model, the overflow attribute is used to determine its display mode. To avoid overflow, you can set box-lines to multiple so that it displays in new lines. To be verified.
2. Introduction to DIV CSS pattern
Web standards are mainly composed of three parts: structure, presentation and behavior.
? The main language corresponding to the structural standard is XHTML
? The main language corresponding to the performance standard is CSS
? The main language corresponding to the behavioral standard is JavaScript
To make a static page, XHTML and CSS are mainly used, so the technology for making standard pages is XHTML CSS. We often use DIV for the overall layout structure of the page (formerly using table layout), and use CSS to modify the appearance of the content, thus forming the DIV CSS mode.
DIV is actually an instance of the box model, so a deep understanding of the box model is very important for web page layout.
🎜>