视频字幕
欢迎学习CSS Flexbox弹性盒子布局。Flexbox是CSS中的一维布局模型，用于在容器中排列项目，使其能够根据容器的空间自动调整大小和位置。主要概念包括弹性容器、弹性项目、主轴和交叉轴。弹性容器是设置了display flex的父元素，其直接子元素成为弹性项目。主轴是项目排列的主要方向，交叉轴垂直于主轴。
要使用Flexbox布局，首先需要将容器设置为弹性容器。在CSS中，给父元素添加display冒号flex属性即可。设置前，子元素作为块级元素会垂直排列，每个元素占据一行。设置display flex后，子元素立即变为弹性项目，默认会水平排列在一行中。这是Flexbox最基本的效果。
justify-content属性用于控制弹性项目在主轴上的对齐方式。flex-start是默认值，项目从起始端开始排列。center让项目在主轴上居中对齐。flex-end让项目从结束端开始排列。space-between实现两端对齐，项目之间的间隔相等。space-around让每个项目两侧的间隔相等。这些属性让我们能够灵活控制项目的水平分布。
flex属性是弹性项目最重要的属性，它控制项目如何放大、缩小和分配空间。flex冒号1表示项目会平均分配剩余空间。flex冒号2表示该项目占用的空间是flex冒号1项目的两倍。flex冒号auto让项目基于自身内容大小进行伸缩。flex冒号none表示项目不会伸缩，保持原始大小。通过设置不同的flex值，我们可以精确控制每个项目在容器中占用的空间比例。
总结一下我们学习的CSS Flexbox核心要点：首先使用display冒号flex创建弹性容器，然后用justify-content控制项目在主轴上的对齐方式，用align-items控制交叉轴对齐，通过flex属性精确控制项目的空间分配比例。Flexbox是现代网页开发中响应式布局的重要基础，掌握这些属性就能创建灵活美观的页面布局。