[分享]css中弹性布局怎么设置

弹性布局（Flexbox）是 CSS3 中一种新的布局模式。通过弹性盒子模型（flex container）、弹性项目（flex item）两部分组成。下面是弹性布局怎么设置的基本介绍：1、定义弹性容...

弹性布局（Flexbox）是 CSS3 中一种新的布局模式。通过弹性盒子模型（flex container）、弹性项目（flex item）两部分组成。下面是弹性布局怎么设置的基本介绍：

1、定义弹性容器（Flex Container）

.container {
  display: flex; /* 声明为弹性布局 */
  flex-direction: row; /* 设置主轴方向为水平（默认） */
  justify-content: center; /* 设置主轴上的对齐方式 */
  align-items: center; /* 设置交叉轴上的对齐方式 */
} 

以上代码，声明容器为弹性布局模式，并设置主轴方向为水平，默认值，以及将主轴上的对齐方式设置为居中，并将交叉轴上的对齐方式也同样设置成居中。

2、定义弹性项目（Flex Item）

.item {
  flex: 1 1 auto; /* 长度和弹性基础值，其中auto表示大小由内容决定 */
  margin: 10px; /* 设置外边距 */
} 

以上代码，设置 flex 属性使用三个值，第一个值为 flex-grow（增长比例），第二个值为 flex-shrink（缩短比例），第三个值为 flex-basis（弹性基础值）。可以使用 flex 缩写进行设置。

除了上述基本设置外，弹性布局的其他属性包括 order、align-self、flex-wrap、flex-flow 等，可根据实际需要进行设置。弹性布局是常用的页面布局设置方式之一，应用广泛。