菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: Flex弹性布局-陈旭辉-20230426 [打印本页]

作者: 陌殇 时间: 2023-4-26 23:10
标题: Flex弹性布局-陈旭辉-20230426
一、学习内容

Flex布局的原理：1.flex 是弹性布局的意思，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局
                        2.当我们的父盒子设置为flex布局之后，子元素里面的float、clear和vertical-align属性都将失效
                        3.采用flex布局的父元素叫做flex容器（flex-container），子元素叫做flex项目（flex-item）
Flex布局的父项常见属性：1.row  默认值，子元素沿x轴从左向右排列2.row-reverse 子元素沿x轴从右向左进行排列3.column 子元素沿y轴从上到下进行排列4.column-reverse 子元素沿y轴从下到上进行排列5.在flex布局中x轴和y轴分别是水平向右和垂直向下的6.x轴是默认的主轴，如果想将y轴设置为主轴，就可以使用flex-direction 属性
justify-content：控制主轴子元素的排列方式
                     1.flex-start 默认值，控制子元素沿主轴头部开始排列，如果主轴是x轴，就代表从左到右 2.flex-end 控制子元素沿主轴的尾部开始排列，如果是y轴，代表从下往上 3.center 控制子元素沿主轴居中对齐 4.space-around 控制子元素平分主轴剩余空间 5.space-between 控制子元素两侧元素先贴边，然后剩余的元素平分主轴剩余空间
align-items：设置主轴的子元素排列方式（单行）
                  1.flex-start 从侧轴头部开始排列 2.flex-end 从侧轴尾部开始排列 3.center 沿侧轴居中排列 4.stretch 拉伸子元素到父级的宽度或高度（和主轴方向相关）
align-content：设置侧轴上的子元素的排列方式（多行）
                     1.align-content: flex-start;默认值：沿侧轴头部开始排列 2.align-content: flex-end;沿侧轴尾部开始排列 3.align-content: center;沿侧轴居中对齐 4.align-content: space-around;侧轴上的多行子元素平分侧轴剩余空间  5.align-content: space-between;侧轴上的多行子元素两侧先沿侧轴贴边，剩余的子元素平分侧轴剩余空间  6.align-content: stretch; 侧轴上的子元素拉伸到平分父级高度或宽度（与主轴方向相关）
aligin-items和align-content的区别：1.algin-items适用于单行的情况，只有上对齐、下对齐、居中对齐和拉伸。2.algin-content 适用于多行的情况，可以设置上对齐、下对齐、居中对齐、拉伸、平分空间等属性值。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)