Flexbox布局中被称为弹性容器

　　CSS Flexbox，或者说弹性盒模型是CSS3推出的一种新的布局模式，旨在解决网页设计中遇到的各种布局问题。它为设计师安排容器中的元素提供了一种灵活而强大的方式。无论这些元素的大小如何，都可以轻松对齐、排序、分布和拉伸。

　　首先，弹性容器和弹性项目

　　包含弹性项目的元素在Flexbox布局中被称为弹性容器。(flex container)，而且每个子元素都被称为弹性项目。(flex item)。通过CSS的弹性容器`display`属性设置为`flex`或`inline-flex`创建。一旦将容器设置为弹性容器，其直接子元素将自动成为弹性项目。

　　Flexbox的主要属性

　　Flexbox布局主要由弹性容器属性和弹性项目属性两部分组成。弹性容器属性包括`flex-direction`、`flex-wrap`、`justify-content`、`align-items`、`align-content`等等，用来控制容器中弹性项目的布局。而且弹性项目属性如`order`、`flex-grow`、`flex-shrink`、`flex-basis`和`align-self`等等，用来控制单个弹性项目的布局行为。

　　1. `flex-direction`：在容器中定义弹性项目的排列方向，可以是`row`(默认值，水平排列)、`row-reverse`(水平排列，反向排列)、`column`(垂直排列)或`column-reverse`(垂直排列，反向)。

　　2. `flex-wrap`：当弹性项目不能在一行或一列中放下时，就决定了如何换行或换列。可能是`nowrap`(默认值，不换行)、`wrap`(换行)或`wrap-reverse`(反向交换)。

　　3. `justify-content`：在容器的主轴上定义弹性项目(水平方向，`flex-direction`为`row`时间)上的对齐方式，可以是`flex-start`(默认值，起点对齐)、`flex-end`(终点对齐)、`center`(居中对齐)、`space-between`(两端对齐，项目间隔均匀分布)、`space-around`(每一项两侧的间隔相等)`space-evenly`(项目之间的间隔等于项目与容器之间的间隔)。

　　4. `align-items`：在容器的交叉轴上定义弹性项目(垂直方向，`flex-direction`为`row`时间)上的对齐方法，可能的值`stretch`(默认值，如果项目没有设置高度或者设置为auto，将占据整个容器的高度)、`flex-start`、`flex-end`、`center`、`baseline`(项目第一行文字的基线对齐)等。

　　5. `align-content`：在交叉轴上有多行弹性项目时，`align-content`属性定义了行与行之间的对齐方式，其可能值和可能值`align-items`相同。

　　而且弹性项目属性允许我们更精细地控制每一项的布局行为。举例来说，`order`用来定义项目的排列顺序的属性，数值越小，排列越高;`flex-grow`、`flex-shrink`和`flex-basis`三个属性共同决定了项目的放大、缩小和基准大小。通常，我们也可以使用简要的属性。`flex`这三个值可以一次性设置。

　　使用Flexbox布局

　　通过Flexbox布局，我们可以很容易地实现各种复杂的布局效果。举例来说，我们可以很容易地创建一个水平导航栏，当容器宽度不足时，链接项可以自动更换;或者我们可以创建一个垂直居中的卡片布局，无论卡片的大小如何，它都可以在容器中保持垂直居中。

　　总的来说，CSS Flexbox布局提供了创建复杂网页布局的强大而灵活的方法。我们可以更好地掌握这种布局模式，并在实际项目中自由使用，通过学习和了解Flexbox的主要属性和使用方法。

（编辑：开发网_商丘站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!