The Box-sizing property can be one of three values: Content-box (Default), Border-box,padding-box.
The FF supports all three values.
<! 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}
Flexbox
is a layout module, not a simple property, which contains the attributes of the parent and child elements.
Flexbox
The 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.
Create a Flex containerflexbox
The layout first needs to create a flex
container. Set display
the value of the property to for this element flex
. For IE10, we need to add it at the beginning -ms-flexbox
.
.container{ display:-webkit-flex; display:-moz-flex; display:flex; display:-ms-flexbox;}
Horizontal OR vertical distributionbox-orient
Axes 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 |
| ------------- |:-------------:|
| 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).
Case<! 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 body
element contains the caption element that you want to center, we display
set his property value to "Flex":
body { display: flex; }
The main function is to let the body of the element use flexbox
the 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.
Reverse distributionBody {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>
Set the alignment of the Flex boxYou 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-self
align-content
adjust this alignment by and properties.
Using justify-content
properties, 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 displayed justify-content
and 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-items
is a property that corresponds justify-content
to and echoes. align-items
adjust 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-reverse
If 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-content
flex-wrap
the behavior that will change. It align-items
is 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-self
override the properties of the project's scaling container align-items
. Its value is the align-items
same as:
stretch (默认)flex-startflex-endcenterbaseline
Properties Explainedbox-direction
property specifies in what direction the child elements of the box element are arranged.
Grammar:
box-direction: normal|reverse|inherit;
box-pack
The property specifies where the child element is placed when the box is larger than the child element's dimensions.
Grammar
box-pack: start|end|center|justify;start :所有子容器都分布在父容器的左侧,右侧留空end :所有子容器都分布在父容器的右侧,左侧留空justify :所有子容器平均分布(默认值)center :平均分配父容器剩余的空间(能压缩子容器的大小,并且有全局居中的效果)
box-align
The property specifies how the child elements of the alignment box are aligned.
Grammar
box-align: start|end|center|baseline|stretch;start :子容器从父容器顶部开始排列end :子容器从父容器底部开始排列center :子容器横向居中(有点奇怪)baseline :所有子容器沿同一基线排列(很难理解)stretch :所有子容器和父容器保持同一高度(默认值)
box-flex
property specifies whether the child elements of the box can scale their dimensions.
Grammar
box-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, overflow
properties are used to determine how they are displayed. To avoid overflow, you can set box-lines
the multiple
display to make it wrap.
flex: initial
A flex
scaling item with a property value set to it initial
will not change if there is space left, but will shrink if necessary.
flex: auto
A Flex property value is set to a auto
telescopic project that automatically scales to occupy all the remaining space according to the spindle.
auto
Currently 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: none
A flex
property value is set as a none
scaling 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