CSS布局
in Origin Pageviews
几种常用的CSS布局策略。
文章以stylesheet中的样式控制信息展示布局的基本结构。
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>
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>
-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>
