62. CSS3 伸缩布局

CSS3 引入了一种新的布局模式——Flexbox 布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为 Flex。

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

Flexbox 布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox 布局功能主要具有以下几点：

1. 屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
2. 可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
3. 可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4. 可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5. 可以控制元素在页面上的布局方向；
6. 可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

Flexbox 规范版本众多，浏览器对此语法支持度也各有不同，接下来的内容以最新语法版本为例向大家展示：

1.创建一个 flex 容器

任何一个 flexbox 布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在 Safari 浏览器中，你依然需要添加前缀-webkit，

.flexcontainer {
    display:-webkit-flex;
    display:flex;
}

2.Flex 项目显示

Flex 项目是 Flex 容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

3.Flex 项目列显示

.flexcontainer {
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
}

4.Flex 项目移动到顶部

如何实现将 flex 项目移动到顶部的效果，关键点：取决于主轴的方向。justify-content 属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。 如果主轴是水平的方向，通过align-items设置；如果主轴是垂直的方向，通过justify-content设置。

关于 Flex 布局，推荐阅读：css3 Flex 布局教程详解

.flexcontainer {
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
}

.flexcontainer {
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
    -webkit-align-items:flex-start;
    align-items:flex-start;
}

Flexbox 规范版本众多，浏览器对此语法支持度也各有不同，接下来的内容以最新语法版本为例向大家展示：

5.Flex 项目移到左边

flex 项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

.flexcontainer {
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
}

.flexcontainer {
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-align-items:flex-start;
    align-items:flex-start;
}

6.Flex 项目移动右边

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

7.水平垂直居中

在 Flexbox 容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

8.Flex 项目实现自动伸缩

您可以定义一个 flex 项目，如何相对于 flex 容器实现自动的伸缩。需要给每个 flex 项目设置 flex 属性设置需要伸缩的值。

.bigitem {
    -webkit-flex: 200;
    flex: 200;
}

.smallitem {
    -webkit-flex: 100;
    flex: 100;
}

以上关于62. CSS3 伸缩布局的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。