1. GridLayout布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GridLayout</title> <style> .container { display: grid;/*块级网格*/ /*display: inline-grid;!*内联网格*!*/ /*<track-size>表示可用空间的长度，<line-name>任意名称 *使用以空格分隔的值列表定义网格的列和行，值表示轨道大小，它们之间的空格表示网格线 * */ /*不定义行名，但网格会自动分配正数和负数*/ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; /*定义行名，一行也可以有多个名字，如[row1-end row2-start] *对于重复部分，可以使用repeat表示，如grid-template-columns: repeat(3, 20px [col-start]) 其等价于...:[col-start] 20px [col-start] 20px [col-start] 20px; */ grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [lastline]; /* *该fr单元允许将轨道的大小设置为网格容器的可用空间的一部分 */ grid-template-columns: 1fr 1fr 1fr; /*将每个item设为网格容器宽度的三分之一*/ grid-template-columns: 1fr 50px 1fr 1fr; /*fr单元可用的总可用空间量不包括50px*/ /*创建四列三行高的网格 *整个顶行将由标题区域组成。 *中间行将包括两个主要的区域， *一个空单元格和一个侧边栏区域。 *最后一行是所有页脚。 */ grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; /*用于复合属性 grid-template-rows, *grid-template-columns,grid-template-areas * */ grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; /*与上面形式等价*/ grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto ; grid-template-areas: "header header header" "footer footer footer"; /*指定网格线的大小,即是列行之间装订线的宽度 *间隔仅在列行之间创建，而不是在外边缘之间创建 *不带前缀的column-gap和row-gap已经可以使用，Chrome 68 +，Safari 11.2 Release 50+和Opera 54+ */ grid-row-gap: 15px; grid-column-gap: 10px; /*复合属性 *...:<grid-row-gap> <grid-column-gap> *不带前缀的gap已经可以使用，Chrome 68 +，Safari 11.2 Release 50+和Opera 54+ */ grid-gap: 15px 10px; /*沿着内联（行）轴对齐网格项 *start 将要与其单元格的起始边缘齐平的项目对齐 *end -将item与其单元格的结束边缘齐平 *center -对齐其单元格中心的位置 *stretch -填充单元格的整个宽度（default） *也可以在通过justify-items在单个网格项上设置此行为 */ justify-items: start; justify-items: end; justify-items: center; justify-items: stretch; /*沿着块（列）轴对齐网格项，此值适用于容器内的所有网格项 *也可以通过align-self在单个网格项上设置此行为 */ align-items: start; align-items: end; align-items: center; align-items: stretch; /* *align-items和justify-items的复合属性 *place-items: <align-items> <justify-items>; *除Edge之外的所有主流浏览器都支持place-items; */ place-items: center center; /*有时网格的总大小可能小于其网格容器的大小， *如果所有的网格项的大小都是非灵活单元，则会发生 *此属性沿着内联（行）轴align-content对齐网格 */ justify-content: start; justify-content: end; justify-content: center; justify-content: stretch; justify-content: space-around; justify-content: space-between; justify-content: space-evenly; /* *此属性沿着块(列)轴对齐网格 */ align-content: start; align-content: end; align-content: center; align-content: stretch; align-content: space-around; align-content: space-between; align-content: space-evenly; /* *除Edge外的所有浏览器都支持place-content属性 */ place-content: start center; place-content: center;/*等价于place-content: center center*/ /*指定任何自动生成的网格轨道（也称为隐式网格轨道）的大小。 *当网格项目多于网格中的单元格或网格项目放置在显式网格之外时，将创建隐式轨道. *隐式轨道可以使用grid-column和grid-row创建，假如一开始在容器内创建了2 X 2的网格， *当在 子项 中通过grid-column: <start>/<end>，grid-row: <start>/<end>引用不存在的行或列时，就会创建宽度为0的隐式轨道， *此时就可以用grid-auto-columns和grid-auto-rows来指定这些隐式轨道的宽度了 *value 可以是网格中可用空间的长度，百分比或分数（fr单位） */ grid-auto-columns: 50px; grid-auto-rows: 50px; /* */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; } .item-a { text-align: center; padding:20px; /*通过引用特定的网格线确定网格项在网格中的位置， *grid-column-start/././.：<number>|<name>; -> 引用一个网格线编号或者网格线名称 *grid-column-end/././.: span <number>; ->该项跨越的网格轨道数量 *grid-row-start/././.: span <name>; ->该项目将跨越直到该名称 *grid-row-end/././.: auto; ->表示自动放置，自动跨度或默认跨度 */ grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-start: span 2; /*分别为grid-column-start + grid-column-end, *grid-row-start + grid-row-end的简写 */ grid-column: 3 / span 2; /*从序号3开始跨2列*/ grid-row: third-line / 4; /*从第三行开始到序号为4的行*/ /*为项目指定名称，以便可以使用该grid-template-areas属性创建的模板引用该项目。 *或者，此属性可用作grid-row-start + *grid-column-start + *grid-row-end + *grid-column-end更短的简写。 */ grid-area: 1 / col4-start / last-line / 6; /*沿着内联（行）轴对齐单元格内的网格项。 *此值适用于单个单元格内的网格项。 * *start - 将网格项对齐以与单元格的起始边缘齐平 *end - 将网格项对齐以与单元格的结束边缘齐平 *center - 将网格项对齐在单元格的中心 *stretch - 填充单元格的整个宽度（这是默认值） */ justify-self: start; justify-self: end; justify-self: center; justify-self: stretch; /*沿着块（列）轴对齐单元格内的网格项。 *此值适用于单个网格项内的内容。 */ align-self: start; align-self: end; align-self: center; align-self: stretch; /* *align-self和justify-self的复合形式 *place-self: <align-self> <justify-self>; *如果省略第二个数，则将第一个值分配给这两个属性 */ place-self: start center; place-self: auto; } .item1 { grid-area: header;/*为item指定名称*/ } .item2 { grid-area: main;/*为item指定名称*/ } .item3 { grid-area: sidebar;/*为item指定名称*/ } .item4 { grid-area: footer;/*为item指定名称*/ } </style> </head> <body> <div class="container"> <div class="item-a item1">header</div> <div class="item item2">main</div> <div class="item item3">sidebar</div> <div class="item item4">footer</div> </div> </body> </html>
2. Flexbox布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FlexBoxLayout</title> <style> .container{ display:-webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; /*组合属性flex-direction和flex-wrap *flex-flow: <'flex-direction'> || <'flex-wrap'>*/ flex-flow: row nowrap; /*沿主轴对齐的方式 *space-around: 使items均匀分布在行周围，请注意，在视觉上空间不相等， 因为所有项目在两侧都有相等的空间。第一个项目将在容器边缘上有一个空间单位， 但在下一个项目之间有两个单位的空间，因为下一个项目有自己适用的间距。 *space-between: 使items在行间均匀分布,首项在起始行，尾项在结束位置 *space-evenly: items完全均布，任何两个子项之间间距（包括和容器边界空间）相等 */ justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-around; justify-content: space-between; justify-content: space-evenly; /*沿侧轴对齐的方式 *stretch: 拉伸以填充容器 *baseline: 沿基线对齐 */ align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch; align-items: baseline; /*当只有一行flex时,此属性不起作用 *flex-start：各行打包到容器的开头 *flex-end：各行打包到容器的末尾 *center：各行行包装到容器的中心 *space-between：各行均匀分布; 第一行是容器的开头，而最后一行是在末尾 *space-around：各行均匀分布，每条线周围的空间相等 *stretch （默认值）：各行拉伸以占用剩余空间 */ align-content: flex-start; align-content: flex-end; align-content: center; align-content: stretch; align-content: space-between; align-content: space-around; } .item{ /*控制显示顺序，数值越小越靠前*/ order: 1; /*规定了项目应占用的Flex容器内可用空间量 *子项都为1时将空间均分，不等时按比例占用空间 */ flex-grow: 1; /*默认时0, 负数无效*/ /*定义项目在必要的时候缩放的能力*/ flex-shrink: 1 ; /*默认时1，负数无效*/ /*定义了在分配剩余空间之前元素的默认大小 *可以是length(例如20%，5rem等)和auto */ flex-basis: 25%;/*如果设为0，则不考虑内容周围的额外空间*/ flex-basis: auto;/*设为auto则根据其flex-grow值分配额外空间*/ /*复合属性flex *复合flex-grow，flew-shrink, flex-basis *第一第二各参数及是可选参数，默认是 0 1 auto; */ flex: 0 1 auto; /*允许align-items为各个flex items覆盖默认对齐（或指定的对齐）方式。 例如将align-items项为flex-start的用flex-end覆盖，使之显示出unique的性质（self） *注意 float clear,vertical-align不影响flex item */ align-self: auto; align-self: flex-start; align-self: flex-end; align-self: center; align-self: baseline; align-self: stretch; } </style> </head> <body> <div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </div> </body> </html>
3. -webkit-box布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display:box</title> <style> .container { display: -webkit-box; /* *该属性定义父元素的子元素是如何排列的。 */ -webkit-box-orient: horizontal; -webkit-box-orient: vertical; -webkit-box-orient: inherit; /*设置沿着box-orient轴的父元素中子元素的排列方式。 *因此，如果box-orient是水平方向的，则父元素的子元素是水平的排列方式。 *表示父容器里面子容器的水平对齐方式 ->垂直排列时 ->定宽 */ -webkit-box-pack: start; -webkit-box-pack: end; -webkit-box-pack: center; -webkit-box-pack: justify; /*设置框的子代在框中的排列方式，如果方向是垂直的，该属性就会决定垂直排列。 *表示父容器里面子容器的垂直对齐方式 ->水平排列时 ->定高 */ -webkit-box-align: start; -webkit-box-align: end; -webkit-box-align: center; -webkit-box-align: baseline; -weblit-box-align: stretch; /*box-direction是用来确定子元素的排列顺序 */ -webkit-box-direction: normal; -webkit-box-direction: reverse; -webkit-box-direction: inherit; /*用来决定子元素是否可以换行显示的 *single表示不换行 *multiple表示多行显示 */ -webkit-box-lines: single; -webkit-box-lines: multiple; } .item { /*该属性让子容器针对父容器的宽度按一定顺序规则进行划分， *用来按比例分配父标签的宽度（或高度）空间 */ -webkit-box-flex: 1; /*数值越小，位置就越靠前，box-ordinal-group:1的item *就会在box-ordinal-group:2的组的前面。 *利用这个属性改变子元素的顺序 */ -webkit-box-ordinal-group: 1; } </style> </head> <body> <div class="container"> <div class="item item1">item1</div> <div class="item item1">item1</div> <div class="item item1">item1</div> </div> </body> </html>
参考：