Web前端开发 课件 6.4 弹性布局

静态网页设计第六章核心应用——排版布局弹性布局1什么是弹性布局弹性布局的适用场景2弹性布局的“容器”和“项目”3弹性布局的基础应用4什么是弹性布局01什么是弹性布局语法要实现弹性布局，需要给弹性容器添加display属性弹性容器{display:flex; /*将元素设置为弹性容器*/display:inline-flex; /*将元素设置为内联块级弹性容器*}CSS3新增的特性，是一种优化的CSS盒子模型，所以也叫“弹性盒子”代替传统float，主要用于控制子元素在一维空间上的排列和布局⽬前几乎得到所有浏览器的⽀持概念弹性布局的适用场景02弹性布局的适用场景与浮动、定位布局相比，弹性布局更加灵活，功能也更加强大。常用场景步进计数器标签页站点头部表单底部侧边栏居中提示居中图标功能列表卡片卡片组……弹性布局的“容器”和“项目”03弹性布局的“容器”和“项目”项目1项目2项目3项目4弹性容器弹性项目弹性容器：添加了display:flex属性值的外框弹性项目：弹性容器内部的子元素弹性布局的“容器”和“项目”弹性容器的六个属性属性作用flex-direction用于调整主轴及弹性项目的排列方向flex-wrap用于设置弹性项目的换行方式flex-flow是flex-direction和flex-wrap的简写justify-content用于设置弹性项目在主轴上的对齐方式align-items用于设置弹性项目在交叉轴上的对齐方式align-content用于设置有多根轴线的对齐方式弹性布局的“容器”和“项目”弹性项目的六个属性属性作用order设置当前项目的排列顺序flex-grow设置当前项目的放大比例flex-shrink设置当前项目的缩小比例flex-basis设置在分配多余空间之前，当前项目占据的主轴空间浏览器根据这个属性，计算主轴是否有多余空间flex是flex-grow、flex-shrink和flex-basis的简写形式align-self设置单个项目有与其他项目不一样的对齐方式，可覆盖弹性容器的align-items弹性布局的基础应用04弹性布局的基础应用示例1快速实现多元素在水平或垂直方向上的间隔布局.flex-container{

display:flex;

gap:10px;}.flex-container{display:flex;

gap:10px;

flex-direction:column;}项目1项目2项目3项目4项目1项目2项目3项目4弹性布局的基础应用示例2快速实现多元素“区域等分”或“按比例分割”的布局.flex-container{display:flex;gap:10px;}.flex-item{flex:1;}.flex-item:nth-child(2){

flex:2;}flex:1flex:2flex:1flex:1flex:1flex:1flex:1flex:1弹性布局的基础应用示例3快速实现多元素在垂直居中对齐.flex-container{height:120px;

display:flex;align-items:center;

gap:50px;}.flex-item:nth-child(3){

margin-left:auto;}后期剪辑：了解弹性布局的基本概念和适用情景弄清弹性布局的“容器”和“项目”，熟悉各自的常用属性掌握弹性布局的基本应用总结与思考简单快捷，是主流布局方式解决旧特性定位时产生元素脱离文档流问