知识归纳-弹性布局-flex

Posted 2023-03-17

参考技术A

main start 主轴起点 main axis 主轴 main end 主轴终点
cross start 交叉轴起点 cross axis 交叉轴 cross end 交叉轴终点
     [交叉轴也称 侧轴]
     [项目默认沿主轴排列]

设定主轴方向：     [指定项目的排列方向]
flex-direction: row [默认值] | row-reverse | column | column-reverse
     [row 默认值 主轴水平向右]
     [row-reverse 主轴水平向左]
     [column 主轴垂直向下]
     [column-reverse 主轴垂直向上]

指定项目的换行方式：
flex-wrap: nowrap [默认值] | wrap | wrap-reverse
     [nowrap 默认值 不换行]
     [wrap 换行 从主轴上往主轴下排列]
     [wrap-reverse 换行 从主轴下往主轴上排列]

主轴方向与换行的复合写法：
flex-flow: row nowrap [默认值]

指定项目在主轴上的对齐方式
justify-content: flex-start [默认值] | flex-end | center | space-between | space-around | space-evenly
     [flex-start 默认值 起点对齐]
     [flex-end 终点对齐]
     [center 居中]
     [flex-start 默认值 起点对齐]
     [space-between 两端对齐]
     [space-around 项目两侧间距相等排开]
     [space-evenly项目与项目间、项目与边框的间距相等，对标 space-around ]

指定主轴的对齐方式
align-content: flex-start [默认值] | flex-end | center | space-between | space-around | space-evenly

指定项目在侧轴上的对齐方式
align-items:flex-start [默认值] | flex-end | center | baseline
     baseline 对齐项目的 第一行文字的 基线

指定项目的排列顺序： order: val;

指定项目对剩余空间分配的占比: flex-grow:0 [默认值];
     [若所有项目均为1，则项目将平分剩余空间]

指定项目 在分配多余空间前 占据的主轴空间: flex-basis:auto [默认值];
     [类 width 但优先级比 width 高]

指定项目的缩小比例： flex-shrink:1 [默认值]
     [若所有项目均为1，则空间不足时，项目均会等比缩小]

缩放属性、占据主轴空间属性的复合写法： flex: flex-grow flex-shrink flex-basis
     [快捷值1：auto == (1 1 auto)]
         项目占据(或均分)本行剩余的主轴所有空间     (因为flex-basis属性优先级高于width，所以不会出现元素溢出问题)
     [快捷值2：none == (0 0 auto)]
         空间不足时项目不会缩小，空间剩余时项目不会放大
         当项目没指定高度 height 时， align-content:stretch [默认值] 会失效，因为侧轴空间的缩放也被禁止

指定单个项目在侧轴上的对齐方式： align-self:flex-start [默认值] | flex-end | center | baseline
     [优先级高于align-content]