Css 弹性布局

淩亂°似流年 2022-11-03 10:44 136阅读 0赞

**弹性布局**

display:flex 要发生弹性布局的子元素，他们的父元素，成为容器需设置display:flex
    flex将块级元素设置为容器
    inline-flex将行内元素设置为容器 元素设置为flex容器后，容器的text-align，vertical-align失效

设置主轴的方向

flex-direction 取值
    row 默认值，主轴是x轴，主轴起点在左端
    row-reverse 主轴是x轴，主轴起点在右端
    column     主轴是y轴，主轴起点在顶部
    column-reverse 主轴是y轴，主轴起点在底部

设置项目的换行

flex-wrap: 取值
    默认值  nowrap  空间不够时，不换行，项目会自动缩小
    wrap  空间不够时，项目不缩小，换行
    wrap-reverse 项目换行，并反转

定义项目在主轴上的对齐方式

justify-content 取值
    flex-start 默认值，主轴起点对齐
    flex-end 主轴终点
    center   主轴中心
    space-around 每个外边距相同，两端有空白
    space-between 两端对齐，两端无空白

项目们在交叉轴上的对齐方式

align-items: 取值
    flex-start 默认值，交叉轴起点对齐
    flex-end 交叉轴终点对齐
    center 交叉轴中间对齐
    baseline 基线，同flex-start类似
    stretch 项目不写高，充满容器整个高度

让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

flex:1; // 要发生弹性布局的子元素设置 默认值： 0 1 auto
    
    flex 是flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式,后两个属性可选写
    
    flex-grow
    表示当子元素的空间小于父元素的空间时,如何处理剩余空间,
    默认值为0表示不占有剩余空间;
    当子元素都设置为1时表示平均分配剩余空间;
    当一个子元素为2其余子元素为1时为2的子元素占据的剩余空间比其他子元素多一倍;
    当一个子元素为1其余子元素为0,为1的子元素占据全局剩余空间
    
    felx-shrink
    表示当子元素的空间大于父元素的空间时,如何缩小子元素
    默认值为1表示等比缩小
    当所有子元素都设置为1时所有子元素都会等比例缩小
    当一个子元素为0其余子元素为1是表示为0的子元素不缩小,其余元素缩小
    
    flex-basis
    用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值