Flex布局

Posted 2023-02-04 Sgf227

Flex布局

前置问题

1.flex 是什么？ 是 Flexible Box 的缩写,意为弹性布局
2.flex作用 （1）块级元素垂直居中（2）自动弹性伸缩（3）适配不同大小的屏幕（4）特别适合移动端布局
3.兼容性？旧版本兼容所有浏览器，新版本兼容(除低内核移动端浏览器外)所有浏览器
4.基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器的属性

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
flex-flow: [flex-direction] [flex-wrap]
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
align-items：flex-start|flex-end|center|baseline|stretch;
align-content：flex-start|flex-end|center|space-between|space-around|strentch 

1.flex-direction 主轴方向

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap 主轴满一行时换行方式。

nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

3.flex-flow 1和2的组合。

flex-low: [flex-direction] [flex-wrap]

4.justify-content 主轴元素对齐方式。

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly  平均对齐，不靠着容器壁，剩余空间平分

5.align-items 侧轴上对齐方式。

flex-start：侧轴的起点对齐。
flex-end：侧轴的终点对齐。
center：侧轴的中点对齐。
baseline: 侧轴方向，项目的第一行文字的基线对齐。
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content 交叉轴行对齐方式（针对多行的情况，前提是要换行flex-wrap: wrap或wrap-reverse;）。

flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end   （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center     (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around  (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch      (每一行)伸缩，占满整个高度

项目元素 item 的属性

order：number|0 (默认值)
flex-grow: number|initial|inherit|0 (默认值);
flex-shrink：number|initial|inherit;
flex-basis: number|auto|initial|inherit;
flex：[flex-grow][flex-shrink][flex-basis]|auto (1 1 auto)|none (0 0 auto)
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

1.order 定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item 
  order: <integer>;

2.flex-grow 放大因子，默认为0，当容器主轴上存在剩余空间时该项目将放大。

0 (默认值) 不放大，保持原有大小
initial   设置默认值,与0等效
number    放大因子: 正数
inherit   从父元素继承该属性

3.flex-shrink 收缩因子，默认为1，当容器主轴 “空间不足” 且 “禁止换行”，该项目将缩小。

initial   设置默认值,与1等效
number    一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
inherit   从父元素继承该属性

4.flex-basis 设置或检索弹性盒伸缩基准值。

number    一个长度单位或者一个百分比，规定灵活项目的初始长度。若为长度单位，则占据固定空间。
auto      默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial   设置该属性为它的默认值
inherit   从父元素继承该属性

5.flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

[flex-grow][flex-shrink][flex-basis] 分别设置三个属性的值
auto      快捷值(1 1 auto)
none      快捷值(0 0 auto)

6.align-self 覆盖container align-items 属性。

auto	    默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch	    元素被拉伸以适应容器。
center	    元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end    元素位于容器的结尾。
baseline    元素位于容器的基线上。
initial     设置该属性为它的默认值
inherit     从父元素继承该属性