今天主要回顾一下CSS布局相关的问题

CSS

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。

CSS布局

正常布局流

正常布局流 (normal flow) 是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。

行级排版上下文

只包含行级盒子的容器会创建一个IFC(Inline Formatting Context)
IFC内的排版规则：

盒子在一行内水平摆放
一行放不下时，换行显示
text-align:决定一行内盒子的水平对齐
vertical-align:决定一个盒子在行内的垂直对齐
避开浮动元素

块级排版上下文

某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
flex子项和grid子项
overflow不是visible的块盒
dispaly:flow-root

BFC内的排版规则

盒子从上到下拜访
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

display属性

display属性允许我们更改默认的显示方式。

弹性盒子（Flexbox）

flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。

以下6个属性设置在容器上：

flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex:1 表示 flex: 1 1 0%

Grid布局

同 flex 一样，你可以通过指定 display 的值来转到 grid 布局：display: grid。那么我们为什么要引入grid布局呢？

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大

概念

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效

举例：

<div><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div>
</div>

在这里最外层<div>是元素，而内层的三个<div>就是项目

水平区域称为行(row)，垂直区域称为列(column)；行和列的交叉区域成为单元格(cell)，划分网格的线称为网格线(grid line)

容器属性

display: grid指定一个容器采用网格布局(块级网格)

display: inline-grid 生成行内网格

grid-template-columns 属性定义每一列的列宽，grid-template-rows属性定义每一行的行高

repeat()：有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

.container {display: grid;grid-template-columns: repeat(3, 33.33%);grid-template-rows: repeat(3, 33.33%);
}

auto-fill：有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。下面的代码表示每列宽度为100px，然后自动填充，知道不能放置更多的列。

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

fr：为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
auto表示有浏览器自己决定长度
grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

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

row-gap属性设置行与行的间隔（行间距），column-gap属性设置列与列的间隔（列间距）。
grid-template-areas属性用于定义区域
grid-auto-flow属性指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。place-items属性是align-items属性和justify-items属性的合并简写形式。

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

项目属性

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
grid-area属性指定项目放在哪一个区域
justify-self属性设置单元格内容的水平位置（左中右），

align-self属性设置单元格内容的垂直位置（上中下）

学习参考：

阮一峰flex布局教程

阮一峰gird布局教程

MDN文档

【CSS布局】gird布局和flex布局相关推荐

好用的前端flex布局，通用的flex布局CSS代码
我的社交恐惧症,主要来自于,收入低??? 今天看到一个图,真是人间真实: 不知道大家上班之后有没有经常写前端,反正身为后端的我是经常写前端的,尤其是调样式调的人痛不欲生,最烦人的是,还要一个像 ...
css日积月累系列---简易的flex布局使用sass和less 封装版
本文只是作日积月累的css 样式使用随着实际应用的开发,会越来越大 ,本css只是针对日常用到的.less 语法封装,适用antdesign- UI 后台管理系统开发 .font(@i) when(@ ...
css专业名词,CSS进阶系列一（flex布局基础知识——介绍、规范、主要思想、专业术语）...
一.介绍 flex是flexible box的缩写,意为弹性布局.flexible box是CSS3新增加的,用来为盒模型提供最大的灵活性.flex旨在提供一个更加有效的方式来布置,对齐和分布在容器之 ...
html左右超出,css 横向超出滚动使用flex布局
描述横向超出滚动一般使用display:inline-block布局,元素里面东西比较多,想使用flex布局怎么办?可以使用下面的方法使用 Document .box { width: 700p ...
【Flex布局案例】使用Flex布局搭建静态页面
最近整理自己零散的知识点,把以前刚学写的小demo放上来,这个页面是自己刚学flex布局写的页面. html部分: <!DOCTYPE html> <html lang=" ...
flex布局单独一行_CSS3 Flex布局（伸缩布局盒模型）
CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是"垂直居中"布局,非常容易实现. 一 ...
html布局属性,hTML之FLEX布局属性
HTML之flex布局 flex布局是什么 flex布局,中文意思为弹性布局,用来为盒模型提供最大的支持,如果靠简单的float,position,很难将页面做的好看.flex灵活性非常的好,任何一个 ...
仿移动端苏宁(rem布局)、携程(flex布局)首页静态页面，源码可下载
移动端苏宁首页(rem布局) 前几个月时跟着黑马pink老师的视频使用rem布局制作了移动端苏宁首页以及移动端携程首页,视频里只完成了一部分页面,于是自己则把剩下未完成的部分敲完并通过码云部署发布静态 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
详解CSS的Flex布局
本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...

【CSS布局】gird布局和flex布局

CSS