CSS3之伸缩布局盒模型

Posted 2021-04-09 前端技术博文

一、css的布局模式

css2.1中定义了四种布局模式，由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法。

• 块布局：呈现文档的布局模式

• 行内布局：呈现文本的布局模式

• 表格布局：用格子呈现2D数据的布局模式

• 定位布局：定位元素的布局模式，定位元素基本与其它元素无关

css3引入的布局模式flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。

二、Flexbox模型的功能

Flexbox布局对于设计比较复杂的页面非常有用，可轻松地实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

特点：

• 屏幕和浏览器窗口大小发生改变也可以灵活地调整布局

• 指定伸缩项目沿着主轴或侧轴按比例分配额外的空间，从而调整伸缩项目的大小

• 指定伸缩项目沿着主轴或侧轴将伸缩容器额外的空间，分配到伸缩项目之前、之后或之间。

• 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围

• 控制元素在页面上的布局方向

• 按照不同于文档对象模型（DOM）所指定的排序方式对屏幕上的元素重新排序

三、Flexbox模型中的术语

1、主轴和侧轴

伸缩布局偏向使用伸缩流的方向。

1）主轴、主轴方向：用户代理沿着一个伸缩容的主轴配置伸缩项目，主轴是主轴方向的延伸。它不一定是水平的，主要取决于justify-content属性。
2）主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。
3）主轴长度、主轴长度属性：伸缩项目在主轴方向的宽度或高度就是项目的主轴长度
4）侧轴、侧轴方向：与主轴垂直的轴称作侧轴，侧轴是侧轴方向的延伸，主要取决于主轴方向。
5）侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
6）侧轴长度、侧轴长度属性：伸缩项目在侧轴方向的宽度和高度就是项目的侧轴长度

2、伸缩容器和伸缩项目

通过display属性给一个元素设置为flex或者inline-flex，这个容器就是一个伸缩容器。伸缩容器会为其内容创立新的伸缩格式化上下文，其中设置为flex的容器被渲染为块级元素，设置为inline-flex的容器渲染为行内元素。若元素display的指定值是inline-flex且元素是一个浮动或绝对定位元素，则display的计算值是flex。

一个伸缩容器内具有零个以上的伸缩项目，伸缩容器的每个子元素都会成为一个伸缩项目，且用户代理会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目。

3、伸缩容器的属性

Flexbox伸缩布局中伸缩容器和伸缩项目是伸缩布局模块中的重要部分，其中每一部分都具有各自的属性。
1）伸缩流方向：指伸缩容器的主轴方向，决定了伸缩项目放置在伸缩容器的方向。主要通过flex-direction属性设置，默认值为row。
2）伸缩行换行：主要用来设置伸缩容器的伸缩项目是单行显示还是多行显示，以及决定侧轴的方向。通过flex-wrap属性设置伸缩项目是否换行，默认值为nowrap。
3）伸缩方向与换行：是伸缩流方向与伸缩换行的缩写，决定了伸缩容器的主轴与侧轴，通过flex-flow同时设定了伸缩流方向和伸缩换行两个属性。
4）主轴对齐：用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器的额外空间。
5）侧轴对齐：定义伸缩项目在伸缩容器的当前行的侧轴对齐方式，类似于主轴对齐。
6）堆栈伸缩行：用来定义伸缩容器中伸缩项目行在侧轴的对齐方式，类似于侧轴对齐，只不过是用来控制伸缩项目行在布局轴的堆放方式。

4、伸缩项目的属性

一个伸缩项目是一个伸缩容器的子元素，伸缩容器的文本也被视为一个伸缩项目。
伸缩项目都有一个主轴长度和侧轴长度，主轴长度是伸缩项目在主轴上的尺寸，侧轴长度是伸缩项目在侧轴的尺寸。一个伸缩项目的宽度和高度取决于伸缩容器的轴。
1）显示顺序：伸缩容器中的伸缩项目默认显示顺序遵循文档在源码中出现的先后顺序（DOM结构中的先后顺序）。可以通过伸缩项目的显示顺序修改伸缩项目在页面中的显示顺序，也可以通过这个属性对伸缩项目进行排序组合。
2）侧轴对齐：包含两种，一种是align-items属性，用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式；另一种是align-self属性，用来在单独的伸缩项目上覆写默认的对齐方式。对于匿名的伸缩项目，align-self的值与其关联的伸缩容器的align-items的值相同。
3）伸缩性：定义伸缩项目可改变他们的宽度或高度填补可用的空间，可将伸缩容器的额外空间分发给其伸缩项目（与伸缩项目的正弹性成正比）或将他们缩小以防止伸缩项目溢出（与伸缩项目的负弹性成正比）。

5、伸缩行

伸缩项目沿着伸缩容器内的一个伸缩行定位，伸缩容器可以是单行的，也可以是多行的。主要由flex-wrap决定。

四、Flexbox模型的基本使用

1、伸缩容器display

语法：display:flex|inline-flex
参数说明：

• flex：将一个容器设置为块伸缩容器

• inline-flex：将一个容器设置为内联 伸缩容器

注意：设为 Flex 布局以后，css的columns在伸缩容器上将失效；子元素的float、clear和vertical-align属性将失效。

2、伸缩流方向flex-direction

flex-direction适用于伸缩容器，就是伸缩项目的父元素。主要用来创建主轴，从而定义了伸缩项目放置在伸缩容器的方向。
语法：
flex-direction：row|row-reverse|column|column-reverse

参数说明：

• row：在ltr排版方式下从左到右排列，在rtl排版方式下从右向左排列（默认值）

• row-reverse：与row排列方向相反

• column：类似于row，不过是从上到下排列

• column-reverse：类似于row-reverse，不过是从下到上排列

3、伸缩换行flex-wrap

flex-wrap属性适用于伸缩容器，也就是伸缩项目的父元素，主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向，决定了新行堆放的方向。
语法：flex-wrap:nowrap|wrap|wrap-reverse
参数说明：

• nowrap：伸缩容器单行显示，ltr排版下，伸缩项目从左到右排列；rtl排版下，伸缩项目从右向左排列（默认值）

• wrap：伸缩容器多行显示，ltr排版下，伸缩项目从左到右排列；rtl排版下伸缩项目从右向左排列。

• wrap-reverse：伸缩容器多行显示，ltr排版下，伸缩项目从右向左排列；rtl排版下，伸缩项目从左往右排列（与wrap相反）

4、伸缩流方向与还换行flex-flow

flex-flow适用于伸缩容器，也就是伸缩项目的父元素，是flex-direction和flex-wrap属性的缩写版本，同时定义了伸缩容器的主轴和侧轴，默认值为row  nowrap。
语法：flex-flow:flex-direction|flex-wrap

5、主轴对齐justify-content

主轴对齐justify-content适用于伸缩容器，也就是伸缩项目的父元素，主要用来定义伸缩项目沿着主轴线的对齐方式。
当一行的所有伸缩项目都不能伸缩或可伸缩但已经达到其最大长度时，这一属性才会对伸缩容器额外的空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些限制。

语法：justify-content:flex-start|flex-end|center|space-between|space-around
参数说明：

• flex-start：伸缩项目向一行的起始位置靠齐

• flex-end：伸缩项目向一行的结束位置靠齐

• center：伸缩项目向一行的中间位置靠齐

• space-between：伸缩项目会平均的分布在行里

• space-around：伸缩项目会平均地分布在行里，两端保留一半的空间

示例链接：justify-content  

6、侧轴对齐align-items和align-self

设置伸缩项目在侧轴的对齐方式有两种：一种是伸缩项目行在侧轴的对齐方式，主要由属性align-items控制；另一种是伸缩项目自身在侧轴的对齐方式，主要由属性align-self控制。

align-items和justify-content相呼应。align-items调整伸缩项目在侧轴上的定位方式，主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴对齐方式。

align-self属性主要是用来设置单独伸缩项目在侧轴的对齐方式，可以用来覆盖该伸缩项目的伸缩容器的align-items属性，属性值和align-items一样。

语法：align-items:flex-start|flex-end|center|baseline|stretch
参数说明：

• flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边

• flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点边

• center：伸缩项目的外边距盒在该行的侧轴上居中放置

• baseline：伸缩项目根据伸缩项目的基线对齐

• stretch：默认值，伸缩项目拉伸填充整个伸缩容器。

示例链接：align-items       align-self

7、堆栈伸缩行align-content

align-content属性会更改flex-wrap的行为，和align-items相似，但不是对齐伸缩项目，它对齐的是伸缩行。
align-content属性主要用来调准伸缩行在伸缩容器里的对齐方式。
语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch
参数说明：

• flex-start：各行向伸缩容器的起点位置堆叠

• flex-end：各行向伸缩容器的结束位置堆叠

• center：各行向伸缩容器的中间位置堆叠

• space-between：各行在伸缩容器中平均分布

• space-around：各行在伸缩容器中平均分布，在两边各有一半的空间

• stretch：默认值，各行将会伸展以占用额外的空间

示例链接：align-content  

提示：这个属性只有伸缩项目有多行时才生效，这种情况只有display的flex-wrap为wrap时，并且没有足够的空间把伸缩项目行放在同一行中。这个属性将对每一行起作用，而不是每个伸缩项目。

8、伸缩性flex

flex属性是让伸缩项目可伸缩，让伸缩项目的宽度和高度自动填充伸缩容器额外的空间。一个伸缩容器会等比地按照各伸缩项目的扩展比率分配额外的空间，也会按照收缩比率缩小各伸缩项目以避免伸缩项目溢出伸缩容器。

flex属性可以用来指定可伸缩长度的部件，扩展比率、收缩比率、以及伸缩基准值。
当一个元素是伸缩项目时，flex属性将代替主轴长度属性决定元素的主轴长度；若元素不是伸缩项目，则flex属性没有效果。
语法：flex:none|flex-grow|flex-shrink|flex-basis

• flex-grow:

  (默认值为0)，设置伸缩项目占伸缩容器的额外空间的份数

• flex-shink：

  (默认值为1)，用来定义伸缩项目收缩的能力

• flex-basis：

  |auto(默认值auto)，设置伸缩项目的伸缩基准值

9、显示顺序order

默认状态下，元素是按照文档流的结构顺序排列，可以通过order属性来改变伸缩项目出现在原文档的次序。
语法：order：<number>
order属性透过将伸缩项目分到有序号的组以控制伸缩项目的顺序。伸缩容器会从序号最小的组开始布局，在同一个组里伸缩项目依据源文档里的次序布局。