css弹性布局

整个弹性布局的宽度是12栏。可以给弹性布局下的每个格子都占有一定宽度，空单元格不占宽度。

css弹性布局

一个格子一般占1栏（当然如果整行元素太少，每个元素的宽度会增加，例如整行只有6个元素，那么每个元素占2栏，以此类推）。如果某个元素是合并格，那么占有合并格数的宽度。

可以通过弹性布局下的某个格子的样式配置，来手动设置格子的宽度。

弹性布局中如果格子宽度总和太多，默认是挤压显示，可以通过样式设置改为换行或者反向换行。

2.弹性布局下的格子的样式

css弹性布局

弹性布局下的格子具有自己独特的样式。

例如选中A1，点击右上的样式配置。可以看到多了一个弹性容器元素的样式组。

弹性布局子元素样式

分栏宽度：代替默认的宽度，可以设置该格子占有的宽度，12栏就是占有全部宽度。平分表示和其他平分的格子一起平分所有剩余的宽度。例如 A1格就是平分，那么实际占有的会是除了剩余的5个格子之外的7栏宽度。

分栏偏移：表示这个格子前面要留几栏空白。

纵向自身对齐：表示这个格子是向上对齐，还是向下对齐...如果整个弹性布局容器设置的向下对齐，而这个格子向上对齐，那么其他都会向下对齐，而该格子向上对齐。

行内水平对齐：居左，居中，居右。

3.弹性布局的样式配置一

css弹性布局

继续上一章表格布局，我们以列表页面的标题和按钮区为例来学习弹性布局。

选中弹性区域的某一格例如A1，鼠标右键选中区域（或者Ctrl+3），再鼠标右键选中样式（或者按设计器右上角的样式配置，或者Ctrl+2）。

我们可以看到弹性布局区域的样式如下：

弹性布局容器样式配置1

主轴排列方向：指的这一行的元素可以从左向右排列，也可以从右向左排列，还可以从上到下，或者从下往上。

主轴对齐方式：头对齐，尾对齐，居中对齐，分散对齐等。

主轴排列方向：默认从左到右，我们选中从右到左，看看效果。

主轴排列方向由右向左

可以看到，容器下的格子的显示顺序反过来了。

4.弹性布局的样式配置二

弹性布局容器样式配置2

换行方式：默认式不换行，如果内容太多就挤压，可以选择混行或者反向换行。

交叉轴对齐：对于常见的从左到右的布局来说，就是纵向的对齐，这一排元素是向上对齐，向下对齐，居中对齐，还是拉伸。