Home > Developer > Web Develop
The Box-sizing property can be one of three values: Content-box (Default), Border-box,padding-box.
Content-box,border and padding do not count into width
Padding-box,border-box,border and padding calculated into width
ie8+ Browser supports Content-box and Border-box;
The FF supports all three values.
When used:
-webkit-box-sizing:100px; Ios-safari, Android
-moz-box-sizing:100px; Ff
box-sizing:100px; Other
<! DOCTYPE html>
1,box-origent: horizontal or vertical distribution.
Box-origent has two values: horizional (horizontal) and vertical (vertical), meaning the way the elements are arranged!
The CSS code is as follows:
Body {
Display:-webkit-box;-webkit-box-orient: horizional;
}
The horizontal arrangement is as follows:
Body {
Display:-webkit-box;-webkit-box-orient: vertical;
}
The vertical arrangement is as follows:
2,box-direction: Reverse Distribution
Box-direction also has two values normal (normal) and reverse (reverse), of course, if the use of course is generally for reverse! The function of this property is to turn an element that is originally arranged from 1-2-3 upside down: 3-2-1
Note: Both box-orient and box-direction need to be defined in the parent element to determine the arrangement of the child elements, and they work if the Display:box must set the display value to box, otherwise it will not take effect. There are also different browsers that must be prefixed (-webkit-、-moz-、-o-、-ms-, etc.).3, In addition to box-direction can achieve the reverse distribution, there is a more specific method of disclosure, is defined in each child element of the attribute, it can even determine any sort order, 1-3-2,3-1-2 ... Yes, that's box-ordinal-group ,
Its value is a positive integer starting at 1, and the higher the value, the more advanced the urine is!
The CSS code is as follows:
. box1{-webkit-box-ordinal-group:1}
. Box2{-webkit-box-ordinal-group:3}
. Box3{-webkit-box-ordinal-group:2}
Flexboxis a layout module, not a simple property, which contains the attributes of the parent and child elements.Create a Flex container
FlexboxThe main idea of the layout is that elements can be resized to fit the available space, and when the available space becomes larger, the flex element will stretch to fill the available space and will shrink automatically when the flex element exceeds the free space. In short, the flex element allows you to automatically scale your layout according to the size of the browser.
flexboxThe layout first needs to create aflexcontainer. Setdisplaythe value of the property to for this elementflex. For IE10, we need to add it at the beginning-ms-flexbox.Horizontal OR vertical distribution.container{ display:-webkit-flex; display:-moz-flex; display:flex; display:-ms-flexbox;}
box-orientAxes for defining distributions: Vertical and horizional. These two values define the box vertical display and the horizontal display, respectively:.container{ display: box; box-orient: horizontal;}Grammar
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;| Value | Description |
Case
| ------------- |:-------------:|
| Inline-axis (axis) | Arranges child elements (that is, from left to right) along the inline axis.
| Block-axis | Arranges child elements along the block axis (that is, from top to bottom).<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="Utf-8"/><Title>centering an Element on the Page</Title><StyleType="Text/css" > Html{Height 100%;}Body{Display-webkit-box;/* old version syntax: Safari, IOS, Android Browser, older WebKit browsers. */Display-moz-box;/* old version syntax: Firefox (Buggy) */Display-ms-flexbox;/* Mixed version syntax: IE 10 */Display-webkit-flex;/* New version syntax: Chrome 21+ */DisplayFlex/* New version syntax: Opera 12.1, Firefox 22+ *//* Vertical Center *//* old version syntax */-webkit-box-align:Center-moz-box-align:Center/* Mixed version syntax */-ms-flex-align:Center/* New version syntax */-webkit-align-items:CenterAlign-items:Center/* Horizontal Center *//* old version syntax */-webkit-box-pack:Center-moz-box-pack:Center/* Mixed version syntax */-ms-flex-pack:Center/* New version syntax */-webkit-justify-content:CenterJustify-content:CenterMargin 0;Height 100%;Width 100%/* Needed for Firefox */}/* Implement text vertically centered */H1{Display-webkit-box;Display-moz-box;Display-ms-flexbox;Display-webkit-flex;DisplayFlex-webkit-box-align:Center-moz-box-align:Center-ms-flex-align:Center-webkit-align-items: Center; align-items: Center; height: 10rem; </style> </head><body> <h1>omg, I ' m centered</ h1></body> </html>http://jsfiddle.net/8ca9zq8q/
Enable FlexboxBecause the
bodyelement contains the caption element that you want to center, wedisplayset his property value to "Flex":body { display: flex; }The main function is to let the body of the element use
Reverse distributionflexboxthe layout rather than the normal block layout. All child elements in the document flow (that is, elements that are not absolutely positioned) now become scaling items.Set the alignment of the Flex boxBody {display:-webkit-box; Display:-moz-box; box-orient:vertical; Box-direction:reverse; Color:white;} #box1 {background:red; height:100px; width:80px; } #box2 {background:black; height:100px; width:80px;} #box3 {background:blue; height:100px; width:80px;}</style></ head><body> <div id= "box1" >1</div> <div id= "Box2" >2</div> <div id= "Box3" >3</div> </body>You can also specify the alignment of the contents of the elastic container with the spindle and the horizontal axis (perpendicular to the spindle) after any flexible length and automatic margins have been resolved. You can
justify-content、align-items、align-selfalign-contentadjust this alignment by and properties.Using
justify-contentproperties, you can set the alignment of an elastic item to the spindle of an elastic container after resolving any flexible length and automatic margins. The values that are displayedjustify-contentand the effects of these values on the elastic container (with three elastic items).justify-content：flex-start(默认值) 伸缩项目向一行的起始位置靠齐。justify-content：flex-end 伸缩项目向一行的结束位置靠齐。justify-content：center 伸缩项目向一行的中间位置靠齐。justify-content：space-between 伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。justify-content：space-around 伸缩项目会平均地分布在行里，两端保留一半的空间。align-items 侧轴对齐（适用于伸缩容器，也就是伸缩项目的父元素）
align-itemsis a property that correspondsjustify-contentto and echoes.align-itemsadjust how the telescopic project is positioned on the side axis. The possible values are:flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。center：伸缩项目的外边距盒在该行的侧轴上居中放置。baseline：伸缩项目根据他们的基线对齐。stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。flex-wrap 伸缩行换行So far, each telescopic container has and has only one stretch row. With Flex-wrap you can create multiple scaling lines for a telescopic container. This property accepts the following values:
nowrap (默认)wrapwrap-reverseIf Flex-wrap is set to wrap, the scaling item wraps to a new stretch line when a scaling line cannot tolerate all the scaling items. The new telescoping row is added according to the direction of the side axis.
align-content 堆栈伸缩行
align-contentflex-wrapthe behavior that will change. Italign-itemsis similar to, but not aligned with, the scaling project, which aligns with the scaling line. As you might have thought, the values it accepts are similar:flex-start：各行向伸缩容器的起点位置堆叠。flex-end：各行向伸缩容器的结束位置堆叠。center：各行向伸缩容器的中间位置堆叠。space-between：各行在伸缩容器中平均分布。space-around：各行在伸缩容器中平均分布，在两边各有一半的空间。stretch（默认值）：各行将会伸展以占用剩余的空间。align-self 侧轴对齐The properties of the telescopic project
align-selfoverride the properties of the project's scaling containeralign-items. Its value is thealign-itemssame as:Properties Explainedstretch (默认)flex-startflex-endcenterbaseline
box-directionproperty specifies in what direction the child elements of the box element are arranged.Grammar:
box-direction: normal|reverse|inherit;
box-packThe property specifies where the child element is placed when the box is larger than the child element's dimensions.
Grammarbox-pack: start|end|center|justify;start ：所有子容器都分布在父容器的左侧，右侧留空end ：所有子容器都分布在父容器的右侧，左侧留空justify ：所有子容器平均分布（默认值）center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）
box-alignThe property specifies how the child elements of the alignment box are aligned.
Grammarbox-align: start|end|center|baseline|stretch;start ：子容器从父容器顶部开始排列end ：子容器从父容器底部开始排列center ：子容器横向居中（有点奇怪）baseline ：所有子容器沿同一基线排列（很难理解）stretch ：所有子容器和父容器保持同一高度（默认值）
box-flexproperty specifies whether the child elements of the box can scale their dimensions.
Grammarbox-flex: value;Look at one of the following examples:
<div style= <div style= </div>< div style=-webkit-box-flex:2;< Span class= "Hljs-tag" ></div>< Div style= "Width:100px; </div></DIV>As with traditional box models,
overflowproperties are used to determine how they are displayed. To avoid overflow, you can setbox-linesthemultipledisplay to make it wrap.flex: initialA
flexscaling item with a property value set to itinitialwill not change if there is space left, but will shrink if necessary.flex: autoA Flex property value is set to a
autotelescopic project that automatically scales to occupy all the remaining space according to the spindle.
autoCurrently only valid in Opera 12.11, not available on Chrome 23.0.1271.95. You can do this by using Flex:1; To achieve the same effect.flex: noneA
flexproperty value is set as anonescaling project and does not scale in any case.The Flexbox of the
CSS3 elastic box model is the Layout module box-sizing & box-orient & box-direction & Box-ordinal-group
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
