CSS之页面布局

布局概念

-静态布局：直接使用px作为单位
-流式布局：宽度使用%，高度使用px作为单位
-自适应布局：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询来切换多个布局。

@media screen and (min-width: 320px) {
    html { font-size: 20px; }
}
@media screen and (min-width: 414px) {
    html { font-size: 30px; }
}

-响应式布局：流式布局+弹性布局，搭配@media媒体查询
-弹性布局：rem布局、em布局、vm布局等

水平垂直居中

1. 绝对定位

#parent{
    position: relative;
}
#son{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
}

2. 视窗居中
   vh为视口单位，即文档可视部分

#son{
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

flex布局

1. 基础用法

display: flex;（默认块级元素）
display:inline-flex;设置为行内元素

flex中核心概念分为容器和轴，轴分为主轴和交叉轴，主轴默认为水平向右方向，交叉轴为主轴顺时针旋转90度。
tips:容器设置为flex布局后，项目的float、vertical-align、clear属性均失效。

2.容器属性

-flex-direction:主轴方向
row水平方向从左开始；row-reverse水平方向从左开始；column垂直方向从上开始；column-reverse垂直方向从下开始

-flex-wrap:项目如果在容器内一个方向放不下时的换行方式
nowrap不换行；wrap换行，第一行在上方；wrap-reverse换行，第一行在下方

flex-flex: <flex-direction> || <flex-wrap>:合并简写

.container{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}

-justify-content:项目在主轴的对齐方式
flex-start左对齐；flex-end右对齐；center居中；space-between两端对齐，项目之间间隔都相等；space-around每个项目两侧的间隔相等

.container{
  display:flex;
  justify-content:space-between;
}

-align-items:项目在交叉轴的对齐方式
stretch若项目未设置高度或者设置为auto，将占满容器高度；flex-start与交叉轴起点对齐；flex-end与交叉轴终点对齐；center与交叉轴中点对齐；baseline项目第一行文字的基线对齐

.container{
  display:flex;
  align-items:center;
}

-align-content:多根轴线的对齐方式
stretch轴线占满整个交叉轴；flex-start与交叉轴起点对齐；flex-end与交叉轴终点对齐；center与交叉轴中点对齐；space-between与交叉轴两端对齐，轴线间隔均匀分布；space-around每根轴线两侧间隔相等

.container{
  display:flex;
  align-items:center;
}

3.项目属性

-order: num:排列顺序，数值越小，排列越靠前（num默认为0）

.item{
  order:1;
}

-flex-grow: num:项目的放大比例（num默认为0），按照比例分配剩余空间
-flex-shrink: num:项目的缩小比例（num默认为1），空间不足时按照比例缩小
此属性生效，容器的 flex-wrap 属性要设置为 nowrap
-flex-basis: <length> | auto: 在分配多余空间前，项目占据的主轴空间

-flex: <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>:合并简写，后两个属性可选，默认0 1 auto
快捷值：auto（1 1 auto）和 none（0 0 auto）

.item{
  flex-grow:2;
  flex-shrink:0;
  flex-basis:auto;
  //合并
  flex: 2 0 suto;
}

-align-self:单个项目的对齐方式
auto继承父元素的align-items属性，无父元素则同strech；flex-start交叉轴起点对齐；flex-end交叉轴终点对齐；center交叉轴中点对齐；baseline项目第一行文字的基线对齐；stretch若项目未设置高度或者设置为auto，将占满容器高度；

.item{
  display:flex;
  align-self: flex-end;
}

grid 网格布局

1. 基础用法

display: grid;（默认块级元素）
display:inline-grid;设置为行内元素
grid-template-columns定义每列的列宽
grid-template-rows定义每行的行高

 tips:容器设置为网格布局后，其项目的float、display: inline-block/table-cell、vertical-align、cloumn-*均失效

-repeat(n,v)函数：简化重复值，n表示重复次数，v表示重复的值或者某种模式

.container{
  display:grid;
  grid-template-columns:repeat(3,50px);
  grid-template-rows:repeat(1,80px 50px 100px);
}

-auto-fill关键字：自动填充满容器；单元格大小固定，但是容器大小不确定时使用

.container{
 display:grid;
 grid-template-columns:repeat(auto-fill,50px);
}

-fr关键字：fraction片段，表示比例关系

.container{
 display:grid;
 //表示两者宽度比例为1:2
 grid-template-columns:1fr 2fr;
 //与绝对长度单位结合，可进行非固定多列布局，下列表示在分为3列，第一列宽度为50px，剩下两列以1:2的宽度填满剩下的容器宽度
 grid-template-columns:150px 1fr 2fr;
}

-minmax(min,max)函数：表示长度在设定区间内

.container{
 display:grid;
 grid-template-columns:1fr 1fr minmax(200px,1rf);
}

-auto关键字：表示由浏览器自己决定长度

.container{
 display:grid;
 grid-template-columns:100px auto 100px;
}

-[name]：使用方括号指定每一根网格线名称，方便引用(允许同一根线有多个名称)

.container{
 display:grid;
 grid-template-columns:[c1] 100px [c2] auto [c3 line3];
 grid-template-rows:[r1] 100px [r2] auto [c3];
}

2. 容器属性

-grid-row-gap：属性设置行与行的间距
grid-column-gap：属性设置列与列的间距
grid-gap:<grid-row-gap> <grid-column-gap>：合并简写

	.container{
	   display:grid;
	   grid-row-gap:20px;
	   grid-column-gap:20px;
	   //合并
	   grid-gap:20px 20px;
	}

-grid-template-areas：定义区域，不需要利用的区域，用·表示

.container{
   display:grid;
   grid-template-rows:50px 50px 50px;
   grid-template-columns:50px 50px 50px;
   //区域
   grid-template-areas:'a a a' 
   					   'b . c'
   					   'd d d';
}

tips:区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为areaName-start，终止网格线自动命名为areaName-end。

-grid-auto-flow：排列顺序
row:先行后列
column:先列后行
row dense / column dense:某些项目指定位置后，剩下项目自动放置的顺序（尽可能紧密填满，不出现空格）

.container{
   display:grid;
   grid-template-rows:50px 50px 50px;
   grid-template-columns:50px 50px 50px;
   grid-auto-flow:column;
}

-justify-items:start | end | center | stretch：设置单元格内容的水平位置
align-items:start | end | center | stretch:设置单元格内容的垂直位置
place-items: <align-items> <justify-items>:合并简写模式

.container{
   display:grid;
   justify-items:start;
   align-items:start;
   //合并
   place-items: start end;
}

-justify-content：设置整个内容区域在容器中的水平位置
align-content:设置整个内容区域在容器中的垂直位置
place-content: <align-content> <justify-content>:合并简写模式
取值：
start:对齐起始边框
end:对齐结束边框
center:内部居中
stretch:大小无指定时拉升占据整个网格容器
space-around:每个项目两侧的间隔相等
space-between:项目与项目间隔相等，项目与容器边框之间没有间隔
space-evenly:项目与项目、项目与容器边框间隔均相等

.container{
   display:grid;
   justify-content:start;
   align-content:start;
}

-grid-auto-columns和grid-auto-rows：浏览器自动创建的多余网格的列宽和行高

.container{
   display:grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-auto-rows: 50px; 
}

3. 项目属性

-grid-column-start：左边框所在垂直网格线
grid-column-end：右边框所在垂直网格线
grid-row-start：上边框所在水平网格线
grid-column-start：下边框所在水平网格线

span关键字：跨越，表示左右/上下边框直接跨越的网格个数

合并写法：
grid-column: <grid-column-start> / <grid-column-end>
grid-row: <grid-row-start> / <grid-row-end>

.item{
   grid-column-start: span 2;
   grid-column-end: 3;
   grid-row-start: 2;
   grid-row-end: 4;
   //合并
   grid-row: 2 / 4;
}

-grid-area：指定项目放置区域，需要先定义区域
grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>：合并简写，直接指定项目位置

.item{
   grid-area: e;
   //作为合并简写
   grid-area: 1 / 1 / 3 / 3;
}

–justify-self :start | end | center | stretch：设置单元格内容的水平位置
align-self :start | end | center | stretch:设置单元格内容的垂直位置
place-self: <align-self> <justify-self>:合并简写模式

.item{
   display:grid;
   justify-self:start;
   align-self:start;
   //合并
   place-self: start end;
}

实例

圣杯布局

1. Flexbox实现方案

<header></header>
<main>
    <article></article>
    <nav></nav>
    <aside></aside>
</main>
<footer></footer>

body {
    width: 100vw;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    width: 100%;
}

footer {
    margin-top: auto;
}

nav {
    width: 300px;
    order: -1;
}

article {
    flex: 1;
}

aside {
    width: 300px;
}

2. Grid实现方案

<body>
    <header></header>
    <main></main>
    <nav></nav>
    <aside></aside>
    <footer></footer>
</body>

body {
    display: grid;
    grid-template: auto 1fr auto / 300px 1fr 300px;
}

header {
    grid-column: 1 / 4;
}

main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

nav {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

aside {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

footer {
    grid-column: 1 / 4;
}

或

作者：阿里巴巴淘系技术
链接：https://www.zhihu.com/question/21775016/answer/1358336033

body {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: auto 1fr auto;
}

header {
    grid-area: header;
}

main {
    grid-area: main;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

@media screen and (max-width: 800px) {
    body {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }

    main {
        margin-left: 0;
        margin-right: 0;
    }
}