flowlayout布局怎么换行_前端布局篇

前端布局

css盒模型

css 盒模型是理解css的基础，和css布局关系密切，理解好盒模型能帮助我们更好的掌握css其他样式及元素的布局

盒模型换而言之就是把每个元素抽象成一个个矩形盒子，每个盒子有以下两个特点

• 盒子里面可以放内容，这个内容既可以是文本，也可以是其他元素标签（特殊元素除外）
• 盒子不仅可以嵌套，也可以水平垂直排列

那么我们怎么理解盒模型呢，下面为chrome浏览器开发者工具的截图

可以看到，盒模型就是一个矩形，由于外层定位信息不属于盒模型，暂时不做说明

盒模型从外到内，首先是margin，它是盒子的外边距，它决定了该标签和相邻元素之间的距离，再之后是border边框，然后是padding，它决定了子元素或者内容到外边距的距离，最里面的元素就是content了。

盒模型又分为两种，一种是标准盒模型，对于的box-sizing: content-box，另一种是IE的盒模型，也叫怪异盒模型，对应的box-sizing: border-box。他们的区别是标准盒模型的宽高指的是content，而IE盒模型指的是content，padding，border

css 布局

如果要问css最重要的概念是什么，那么答案是布局。布局指的是标签元素的排布方式，在css中，决定元素布局方式的主要是position和float两个属性，以及css3中的新增的display属性的grid和flex

普通文档流

主要属性

所有元素的默认排布方式都是遵循普通文档流的，也就是说position属性值为static，这类元素的排列方式是从左到右排列，当一行位置不够时，另起一行向下排列。这种排布方式除了受padding和margin的影响外，还受到display的影响

普通文档流display属性介绍

• none，元素直接消失，不占用空间，在非普通文档流中也适用
• block，块级元素，在默认情况下，元素的宽度会占满整行，这就意味着块级元素的宽度会受到父级元素的宽度影响，而且不管元素是否占满整行，它的兄弟元素都会另起一行
• inline，内联元素，元素的默认宽度为content的宽度，高度由font-size决定，内联元素在未填满父级元素的时候会水平排列，一般只会用来承载内容
• inline-block，块级内联元素，相对与内联元素的有点是可以设置宽高，缺点是块级内联元素之间会出现间隙（解决办法是设置父级元素的font-size：0）.

格式化上下文

什么是块格式化上下文呢？它是css2.1提出的概念，定义的是页面中的一块渲染区域，或者这么理解，就是页面中的一块独立的作用域，同一个格式化上下文的区域和不同格式化上下文之间的定位方式都会发生变化。

格式化上下文分为两种，块格式化上下文（BFC）和内联格式化上下文（ICF）

BFC的形成

• 根元素
• 脱离普通文档流的元素（浮动，固定定位，绝对定位）
• 非块级元素（display设置了inline-block，table，flex）
• overflow属性值不为visible的块级元素

BFC的影响

BFC对布局产生的影响主要有以下几方面

• 同一个BFC内的相邻元素会发生垂直边距的折叠，即两者的边距取决于双方边距的最大值而不是总和
• BFC是页面上的独立作用域，内部元素不会和外部元素产生影响
• 计算BFC时，内部浮动元素也会被计算在内

IFC的形成

多个内联元素排列在一起的时候就形成一个IFC，这些内联元素直接不能穿插块级元素

IFC的影响

• 一个IFC内的元素都是水平排列的
• 横向的margin、border、padding属性对这些元素都有效
• 垂直方向可以调整对齐方式

浮动

float属性被称之为浮动，是目前一种常见的布局方式

float常用的属性有以下几个

• left，左浮动
• right，右浮动
• none，无浮动，即默认属性

其他的暂时不做讨论

定位

这里的定位指的是绝对定位（position: absolute）和固定定位（position: fixed），两者都是完全的脱离了文档流，在普通文档流中不占空间

绝对定位的特点

• 独立性，绝对定位不会干涉普通文档流的布局方式
• 定位上下文，支持使用top，left，bottom，right四个属性控制上，左，下，右的各个位置，参考定位元素为从下往上的第一个不为静态定位的父元素或者根元素
• 层叠，允许使用z-index属性设置其层叠关系
• 滚动，绝对定位虽然不能撑起父元素的高度，但是父元素能感知其存在，当父元素支持滚动，且绝对定位超出父元素的高度，父元素会出现滚动条

固定定位的特点

固定定位和绝对定位的特性基本一致，不同的是它不会随父元素滚动，而是固定在浏览器的某个位置，设置的上，左，下，右也是基于整个窗口的

弹性盒模型

弹性盒模型和盒模型的概念是有区别的，它不是用来定位元素的，而是css3提出来的一种布局方式。弹性盒模型的核心思想是通过调整元素的大小来适应不同的空间，包括水平方向的宽度和垂直方向的高度。但是它也有缺点，就是IE兼容的不太好，只有IE10以上才能完全支持。但是在移动端不存在IE兼容性问题

弹性盒模型有两个重要的概念，容器（container）和项目（item）。其中容器是用来设置项目的公共样式，比如排列方式，对齐方式。项目是用来设置各项目之间的相对关系，如比例，顺序等。容器和项目是嵌套关系，一个容器里可以有多个项目

弹性盒模型的容器上有这么几个属性

1. justify-content
   它定义了水平方向的对齐方式

• flex-start，默认值，项目靠近首端的排布方式
• flex-end，靠近末尾
• center，居中排列
• space-between，两端对齐
• space-around，两端居中对齐
• space-evenly，使临近项目、项目与边框之间的距离相等

align-items
定义了多个项目在垂直方向的对齐方式

• flex-start，垂直方向靠近首端对齐
• flex-end，垂直方向尾端对齐
• center，居中对齐
• baseline，与第一行文字基线对齐
• stretch，两端对齐flex-

align-content
定义多个项目多行情况下的垂直方向对齐

• flex-start，垂直方向靠近首端对齐
• flex-end，垂直方向尾端对齐
• center，居中对齐
• space-between，两端对齐
• space-around，两端居中对齐
• stretch，可以使得相邻项目、项目与边框之间的间距相等

flex-direction
定义容器在水平方向上的排布方式

• row，水平从左到右排列
• row-reverse，水平方向从右到左排列
• column，垂直方从上到下排列
• column-reverse，垂直方向从下到上排列

flex-wrap
用来控制是否换行

• nowrap，默认值，项目超出容器尺寸不换行，这个尺寸根据排列方式而定，水平方向为宽度，垂直方向为高度
• wrap，项目超出尺寸后换行
• wrap-reverse，项目超出尺寸后换行，不过是反序排列

flex-flow
这是一个复合属性，属性有两个值，第一个是flex-direction，第二个是flex-wrap，默认值是“row nowrap”order
这个属性是一个整数值，它规定了项目的排列顺序，按照数字从大到小排列，默认值为0align-self
可以覆盖容器align-items属性的设置，为当前项目单独设置对齐方式flex-grow
它定义项目在容器中剩余空间的放大比例，默认值为0，如果每个项目的值都相等，则均分flex-shrink
定义项目在容器空间不足时的缩小比例，默认值为1，如果每个项目的值都相等，那么均匀的缩小每个项目flex-basis
定义项目的默认尺寸，值和width相同，默认为autoflex
为flex-grow，flex-shrink，flex-basis的缩写，第一个值时必须的，剩余两个选填