2026_CSS3_07

伸缩盒模型1、简介1、2009年W3C提出了一种新的盒子模型——Flexible Box伸缩盒模型又称弹性盒子2、它可以控制元素分布方式、元素对齐方式、元素视觉顺序3、截至目前除了在部分IE浏览器不支持其他浏览器均已全部支持4、伸缩盒模型的出现逐渐演变出了一套新的布局方案——flex布局注1、传统布局是指基于传统盒状模型主要靠display属性position属性float属性2、flex布局目前在移动端应用比较广泛因为传统布局不能很好的呈现在移动设备上2、伸缩容器、伸缩项目伸缩容器开启了flex的元素1、给元素设置displayflex或displayinline-flex该元素就变为了伸缩容器2、displayinline-flex很少使用因为可以给多个伸缩容器的父容器也设置为伸缩容器3、一个元素可以同时是伸缩容器、伸缩项目伸缩项目伸缩容器所有子元素自动成为了伸缩项目1、仅伸缩容器的子元素成为了伸缩项目孙子元素、重孙子元素等后代不是伸缩项目2、无论原来是哪种元素块、行内块、行内一旦成为了伸缩项目全都会“块状化”3、主轴与侧轴主轴伸缩项目沿着主轴排列主轴默认是水平的默认方向是从左到右侧轴与主轴垂直的就是侧轴侧轴默认是垂直的默认方向是从上到下4、主轴方向属性名flex-direction常用值注侧轴方向随着主轴方向改变而改变5、主轴换行方式属性名flex-wrap常用值如下6、flex-flow是一个符合属性复合了flex-direction和flex-wrap两个属性值没有顺序要求不推荐6、主轴对齐方式属性名justify-content常用值如下7、侧轴对齐方式1、只有一行的情况属性名align-items常用值如下注stretch的前提是元素不能给高度2、多行情况属性名align-content常用值如下3、元素水平垂直居中4、项目在主轴的基准长度概念flex-basis设置的是主轴方向的基准长度会让宽度或高度失效主轴横向宽度失效主轴纵向高度失效作用浏览器根据这个属性设置的值计算这周上是否有多余空间默认值auto伸缩项目的宽或高5、flex-grow伸概念flex-grow定义伸缩项目的放大比例默认为0即总是主轴存在剩余空间也不拉伸放大规则1、若所有伸缩项目的flex-grow值都为1则等分剩余空间前提是有空间2、若三个伸缩项目的flex-grow值分别为1、2、3则分别瓜分到1/6、2/6、3/6的空间6、flex-shrink缩概念flex-shrink定义了项目的压缩比例默认为1即如果空间不足该项目会缩小收缩项目的计算举例7、flex复合属性复合了flex-grow、flex-shrink、flex-basis三个属性默认值为0 1 auto8、项目排序order属性定义项目的排列顺序值越小排列越靠前默认为09、单独对齐通过align-self属性可以单独调整摸个伸缩项目的对齐方式默认值为auto表示继承父元素的align-items属性响应式布局1、媒体查询1、媒体类型2、媒体特性完整列表请参考media - CSS层叠样式表3、运算符4、常用阈值在实际开发中会将屏幕划分成几个区间5、结合外部样式的用法