Home > Article > Web Front-end > CSS3 scalable layout box model note_html/css_WEB-ITnose
CSS3 scalable layout box model note_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:01996browse
CSS3 Flexible Layout Box Model
The layout mode Flexbox layout introduced by CSS3, the main idea is to give the container the ability to allow its sub-items to change their width and height to fill the available space in the best way. Flex containers use Flex items to automatically expand and contract to fill available free space.
More importantly, Flexbox layout direction is unpredictable, unlike conventional layouts (block-level from top to bottom, inline from left to right), which are suitable for page layout, but are not suitable for supporting large or complex The application lacks flexibility.
If regular layout is based on block and inline text flow direction, then Flex layout is based on "Flex-flow" direction. Let’s first understand some special terminology of the telescopic box model.
Spindle: The main axis of the Flex container is mainly used to configure Flex projects. It is not necessarily horizontal, it mainly depends on the fle-direction attribute.
Spindle starting point, main axis end point: The configuration of the Flex project starts from the main axis starting point of the container and ends at the main axis end point.
Main axis length: The width or height of the Flex project in the main axis direction is the main axis length of the project. The main axis length attribute of the Flex project is the width or height attribute, which one is determined by which one faces the main axis direction.
Side axis: The axis perpendicular to the main axis is called the lateral axis, which is an extension of the lateral axis direction.
Cross-axis start point, cross-axis end point: The configuration of the telescopic row starts from the cross-axis starting edge of the container and ends at the cross-axis end point.
Cross-axis length: The width or height of the Flex item in the cross-axis direction is the cross-axis length of the project. The cross-axis length attribute of the Flex item is the widht or height attribute, which one faces the main axis direction. Decide.
The syntax specification of Flex layout has changed a lot over the years, which has also brought certain limitations to the use of Flexbox. Because there are many versions of the syntax specification and inconsistent browser support, Flexbox layout is not used much. . Flexbox layout syntax specifications are mainly divided into three types.
The old version, the 2009 version, is the earliest scalable layout. The major mainstream browsers have slightly different support for it. Unfortunately, the support for various attributes of Flexbox layout is not complete. When using it, You also need to add the prefix of each browser.
Hybrid version, 2011 version, only supported by IE10.
The latest version is the 2012 version. Except for Safari browser which does not support it, other latest browsers support this version.
Flex container attributes
display
To change the mode of an element to a flex container, you need to use the display attribute.
display:flex | inline-flex
flex: Set as a block-level scalable container.
inline-flex: Set as an inline-level scalable container.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } div>div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } #box{ display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; border:1px solid; margin:20px; } #inline{ display:-moz-inline-box; display:-webkit-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flexbox; display:inline-flex; border:1px solid; margin:20px; }</style></head><body><div id="box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div id="inline"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div></body></html> Block-level scalable containers are similar to inline-level scalable containers. They are arranged from left to right by default. The only difference is that block-level scalable containers Occurs on a single line, while inline-level scalable containers change as their content changes.
Flex containers are not block containers, so some properties designed to control block layout do not apply in flex layout. Floating has no effect on a flex container, and the margins of a flex container do not overlap with the margins of its content. If an inline flex container is floated, the element will be displayed in a block-level flex container.
flex-direction
Defines the direction in which Flex items are placed in the Flex container.
flex-direction:row | row-reverse | column | column-reverse
Row: Default value, if the writing method is ltr, then the Flex items are arranged from left to right; if the writing method is rtl, then the Flex items are arranged from right to left.
Row-reverse: If the writing method is ltr, then the Flex items are arranged from right to left; if the writing method is rtl, then the Flex items are arranged from left to right.
Column: Similar to row, the direction is from top to bottom.
Column-reverse: Similar to row-reverse, the direction is from bottom to top.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } div>div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box{ display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:-webkit-flexbox; display:flex; border:1px solid; margin:20px; } .box1{ /*定义Flex项目在Flex容器中放置的方向,从左往右。*/ -moz-box-orient:block-axis; -moz-box-direction:normal; -webkit-box-orient:block-axis; -webkit-box-direction:normal; flex-direction:row; } .box2{ /*定义Flex项目在Flex容器中放置的方向，从右往左。*/ -moz-box-orient:block-axis; -moz-box-direction:reverse; -webkit-box-orient:block-axis; -webkit-box-direction:reverse; flex-direction:row-reverse; } .box3{ /*定义Flex项目在Flex容器中放置的方向，从上往下。*/ -moz-box-orient:inline-axis; -moz-box-direction:normal; -webkit-box-orient:inline-axis; -webkit-box-direction:normal; flex-direction:column; } .box4{ /*定义Flex项目在Flex容器中放置的方向，从下往上。*/ -moz-box-orient:inline-axis; -moz-box-direction:reverse; -webkit-box-orient:inline-axis; -webkit-box-direction:reverse; flex-direction:column-reverse; }</style></head><body><div class="box box1"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box2"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box3"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box4"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div> </body></html> When the default value flex-direction is equal to row, Flex items are arranged from left to right.
When flex-direction is equal to row-reverse, Flex items are arranged from right to left.
When flex-direction is equal to column, Flex items are arranged from top to bottom.
When flex-direction is equal to column-reverse, Flex items are arranged from bottom to top.
flex-wrap
By default, Flex items are displayed in one line as much as possible. You can change it according to the property value of flex-wrap to display Flex items in multiple lines.
flex-wrap:nowrap | wrap | wrap-reverse
nowrap: Default value, single line display, if the writing method is ltr, Flex items are arranged from left to right; if the writing method is trl, Flex items are arranged from right to left.
Wrap: Multi-line display, if the writing method is ltr, Flex items are arranged from left to right; if the writing method is trl, Flex items are arranged from right to left.
Wrap-reverse: Multi-line display, if the writing method is ltr, Flex items are arranged from right to left; if the writing method is trl, Flex items are arranged from left to right.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:-webkit-flexbox; display:flex; border:1px solid; margin:20px; -moz-box-lines:multiple; /*定义伸缩换行属性为nowrap(默认值)*/ flex-wrap:nowrap; } .box div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } </style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div> <div>H</div> <div>I</div> <div>J</div> <div>K</div> <div>L</div></div> </body></html> 因为默认值nowrap不准换行，伸缩容器容纳不下伸缩项目时，各伸缩项目会根据默认的收缩比例进行缩小以适应伸缩容器的宽度。
.box{ ... flex-wrap:wrap;} flex-wrap等于wrap时，伸缩容器容不下伸缩项目时自动换行了。
.box{ ... flex-wrap:wrap-reverse;} flex-wrap等于wrap-reverse时，伸缩容器容不下伸缩项目时换行了。不同的是换行的方向相反。
flex-flow
这是flex-direction和flex-wrap两个属性的缩写,默认值是row nowrap。
flex-flow:flex-direction || flex-wrap
justify-content
用来设置伸缩项目在主轴上的对齐方式。指定如何在伸缩项目之间分布伸缩容器额外空间。当一行上的所有伸缩项目不能伸缩或可伸缩但是已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。
justify-content:flex-start | flex-end | center | space-between | space-around
flex-start:默认值，伸缩项目向一行的起始位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾。
flex-end:和flex-start相反，伸缩项目向一行的结束位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的开始。
center:伸缩项目向一行的中间位置靠齐。伸缩容器的所有额外空间平均分布在第一伸缩项目前面和最后一个伸缩项目的后面。
space-between:伸缩项目会平均分布在行里。伸缩容器的所有额外空间平均分布在所有伸缩项目之间，但是在第一个伸缩项目之前和最后一个伸缩项目之后不分配空间，也就是说，第一个伸缩项目靠齐开始位置，最后一个伸缩项目靠齐结束位置。
space-around:伸缩项目会品均分布在行里。伸缩容器的所有额外空间品均分布在所有伸缩项目之间，但是第一个伸缩项目之前与最后一个伸缩项目之后只分配其他位置得到额外空间的一半。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ width:500px; height:500px; border:1px solid; margin:20px; display:flex; justify-content:flex-start; } body>div:first-child{ flex-flow:row nowrap; } body>div:last-child{ flex-flow:column nowrap; } .box div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } </style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> <div class="box"> <div>A</div> <div>B</div> <div>C</div></div> </body></html> justify-content等于默认值flex-start时，伸缩项目在主轴起点处对齐，所有额外空间在最后一个伸缩项目的后面。
.box{ ... justify-content:flex-end;} justify-content等于flex-end时，伸缩项目在主轴结束处对齐，所有额外空间在第一个伸缩项目前面。
.box{ ... justify-content:center;} justify-content等于center时，所有项目在容器主轴中间处对齐，额外空间在第一个前面和最后一个后面。
.box{ ... justify-content:space-between;} justity-content等于space-between时，第一个项目在主轴开始处，最后一个项目在主轴结束处，所有额外空间被其他项目平分。
.box{ ... justify-content:space-around;} justify-content等于space-around时，类似于space-between，但是第一个项目前面与最后一个项目后面分配了其他项目拥有额外空间一半的空间。
align-items
align-items属性和justify-content同样是用来管理伸缩容器额外空间，不同的是，justify-content是用来管理伸缩容器主轴方向的额外空间，而align-items是用来管理伸缩容器侧轴方向的额外空间。
align-items:flex-start | flex-end | center | baseline | stretch
flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
center:伸缩项目的外边距盒在该行的侧轴上居中放置。
baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。
stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
.box{ ... align-items:flex-start;} align-items等于flex-start时，伸缩项目在侧轴起点处对齐，额外空间在侧轴终点处。
.box{ ... align-items:flex-end;} align-items等于flex-end时，伸缩项目在侧轴结束处对齐，额外空间在侧轴起点处。
.box{ ... align-items:center;} align-items等于center时，伸缩项目在侧轴中间处对齐，额外空间在侧轴两端。
.box{ ... align-items:baseline;} align-items等于baseline时，如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效，那么额外空间在侧轴结束处。
.box{ ... align-items:stretch;} align-items等于stretch时，伸缩项目往侧轴方向拉伸以占用额外空间。
align-content
是伸缩项目占多行时在侧轴方向的对齐属性，这个属性将对每一行起作用而不是每个伸缩项目。
align-content:flex-start | flex-end | center | space-between | space-around | stretch
flex-start:各行向伸缩容器的起点位置堆叠。
flex-end:各行向伸缩容器的结束位置堆叠。
center:各行向伸缩容器的中间位置堆叠。
space-between:各行在伸缩容器中平均分布。
space-around:各行在伸缩容器中品均分布，在两边各有一半空间。
stretch:默认值，各行将会伸展以占用额外空间。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ border:1px solid; margin:20px; display:flex; align-content:flex-start; height:500px; width:500px; } body>div:first-child{ flex-flow:row wrap; } body>div:last-child{ flex-flow:column wrap; } .box div{ min-width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } </style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div></div> <div class="box"> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div></div> </body></html> align-content等于flex-start时，各行向侧轴起点处对齐，额外空间在侧轴终点处。
.box{ ... align-content:flex-end;} align-content等于flex-end时，各行向侧轴终点处对齐，额外空间在侧轴开始处。
.box{ ... align-content:center;} align-content等于center时，各行向侧轴中间处对齐，额外空间在侧轴两端。
.box{ ... align-content:space-between;} align-content等于space-between时，第一行向侧轴起点处对齐，最后一行向侧轴终点处对齐，额外空间被除了第一行与最后一行处平分。
.box{ ... align-content:space-around;} align-content等于space-around时，第一行向侧轴起点处对齐，最后一行向侧轴终点处对齐，第一行与最后一行的额外空间是其他处额外空间的一半。
.box{ ... align-content:stretch;} align-content等于默认值stretch时，各行将沿着侧轴方向伸展以占用额外空间。
Flex项目属性
order
默认情况下，Flex项目是按照文档流的结构顺序排列，在Flexbox模型中，可以通过order属性来改变伸缩项目出现在文档中的顺序。
order:<number>;
number可以是负值，Flexbox容器将根据各项目中order值的大小进行排列。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ border:1px solid; margin:20px; display:inline-flex; flex-flow:row wrap; align-items:flex-start; } .box div{ min-width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ order:2; } .box div:nth-child(2){ order:1; } .box div:nth-child(3){ order:3; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> flex-grow
定义一个Flex项目的扩大比例。
flex-grow:<number>
默认值为0，不能取负值，没有单位。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ border:1px solid; margin:20px; display:flex; flex-flow:row wrap; align-items:flex-start; } .box div{ min-width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ flex-grow:1; } .box div:nth-child(2){ flex-grow:2; } .box div:nth-child(3){ flex-grow:1; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> 如果伸缩项目的flex-grow设置为1，每个伸缩项目将设置一个大小相等的额外空间。如果给其中一个伸缩项目设置flex-grow设置为2，这个伸缩项目所占的额外空间是其他伸缩项目所占额外空间的2倍。
也可以这样理解，把上例各项目的flex-grow值加起来等于4，就是把额外空间分成4份，比例为1的占1份，比例为2的占2份。
flex-shrink
定义一个Flex项目的缩小比例。
flex-shrink:<number>
默认值为1。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ width:200px; border:1px solid; margin:20px; display:flex; flex-flow:row nowrap; } .box div{ width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ flex-shrink:1; } .box div:nth-child(2){ flex-shrink:2; } .box div:nth-child(3){ flex-shrink:1; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> 与flex-grow类似，也是处理伸缩容器额外空间的属性，不同的是，flex-grow处理的是伸缩容器内部剩下的额外空间，而flex-shrink处理的是伸缩容器外部溢出的额外空间。上例中将溢出的额外空间分成4份，收缩比例为1的占1份，收缩比例为2的占2份，如果不设置收缩比例，默认的比例为1。
flex-basis
定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。
flex-basis:<length> | auto<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ width:500px; border:1px solid; margin:20px; display:flex; flex-flow:row nowrap; } .box div{ width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ flex-basis:150px; } .box div:nth-child(2){ flex-basis:200px; } .box div:nth-child(3){ flex-basis:50px; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> flex-basis类似于width，用来设置flex-basis长度并指定伸缩基准值，也就是根据可伸缩比例计算出额外空间的分布之前，伸缩项目主轴长度的起始数值。
如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。如下所示：
flex
flex是flex-grow，flex-shrink，flex-basis三个属性的缩写。第二个和第三个参数是可选值。默认值是0 1 auto。
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
建议使用缩写属性。如果flex取值为none，等于0 0 auto。
align-self
用来在单独的伸缩项目上覆写默认的对齐方式。
align-self:auto | flex-start | flex-end | center | baseline | stretch
align-self的值与align-items一样。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ width:400px; border:1px solid; margin:20px; display:flex; flex-flow:column wrap; } .box div{ width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ align-self:flex-start; } .box div:nth-child(2){ align-self:center; } .box div:nth-child(3){ align-self:flex-end; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> CSS3 Flexbox完。