(1)Flex布局核心概念一、Flex 是什么Flex 是 CSS3一维弹性布局专治元素对齐、自适应、空间分配问题布局更高效灵活。二、两大核心角色1. 父容器Flex容器设置display: flex即为弹性父盒子负责统一规定子元素排列规则。2. 子项目Flex项目容器内所有直接子元素自动变为弹性项服从父盒布局规则。三、两根轴线核心主轴由flex-direction决定是项目排列的方向。交叉轴永远垂直于主轴。四、三大对齐规则1.justify-content控制主轴对齐2.align-items控制单行交叉轴对齐3.align-content控制多行整体交叉轴对齐需配合 flex-wrap:wrap五、空间分配三属性子项专属flex-basis元素初始基础宽度flex-grow剩余空间时的放大比例0不放大flex-shrink空间不足时的收缩比例0不缩小极简口诀父开 flex 定规则子变项目随轴排主轴 justify 调左右交叉 align 调上下basis定宽、grow放大、shrink缩小。(2)Flex 容器默认规则flex-direction: row主轴水平向左至右子元素横向排列flex-wrap: nowrap默认不换行空间不足元素自动压缩设wrap可开启换行justify-content: flex-start主轴靠左对齐可选右对齐、居中、均分间距等样式align-items: stretch无固定高度时元素拉伸占满交叉轴空间也可设置上下对齐、居中align-content: normal仅多行布局生效管控多行整体交叉轴对齐flex-grow: 0默认不放大设为 1可自动均分剩余空间flex-shrink: 1默认空间不足自动压缩设 0 禁止收缩仅尺寸参与压缩边距边框不压缩flex-basis: auto默认沿用元素宽度可自定义像素值设定基础尺寸布局示例(1)Flex 布局默认效果演示(什么属性都没加只用了 display: flex)父盒子加了display: flex里面的子元素自动变成一行横着排不换行、挤在一起也不换行。1. 代码里的默认规则横着排默认 flex-direction: row不换行默认 flex-wrap: nowrap靠左挤默认 justify-content: flex-start挤不下就压扁默认 flex-shrink:1总结父盒子 flex → 子元素自动横排、不换行、靠左挤代码:!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleFlex布局示例1 - 基本容器按照默认规则排列/title style .container { display: flex; border: 2px solid #aaa; width: 600px; height: 300px; padding: 10px; } .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; text-align: center; } /style /head body h3Flex容器示例项目按照容器默认规则排列/h3 div classcontainer !-- 块元素从上到下文档流排列 -- div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div /div /body /html结果:(2)
