• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 位置: css3教程 -> css3盒子模型

    css3 弹性盒子布局

    CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。

    基本例子

    在以下示例中,已将容器设置为display: flex,这意味着三个子项成为弹性项。justify-content的值已设置为space-between,以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间,左侧和右侧项目与Flex容器的边缘齐平。你还能看到项目在十字轴上拉伸,因为align-items的默认值为stretch。这些项目伸展到Flex容器的高度,使它们看起来都像最高的项目一样高。