flex布局整理以及demo flex：
概念：
flex容器：
display:flex
flex项:
轴:⽔平的主轴、垂直的交叉轴
容器的属性：
1. flex-direction(决定主轴的⽅向、即项⽬的排列⽅向)
1.1 row(默认值): 主轴为⽔平⽅向，起点在左端
1.2 row-reverse: 主轴为⽔平⽅向，起点在右端
1.3 column: 主轴为垂直⽅向，起点在上⾯
1.4 column-reverse: 主轴为垂直⽅向，起点在下⾯
2.flex-wrap(决定如何换⾏，默认是对item缩放)
2.1 nowrap(默认值)：不换⾏
2.2 warp: 换⾏，第⼀⾏在上⽅
2.3 wrap-reverse: 换⾏，第⼀⾏在下⽅flex布局对齐方式
3.flex-flow(flex-direction、flex-wrap的简写)
3.1 <felx-direction> || <flex-wrap>
4.justify-content(item在主轴上的对齐⽅式)
4.1flex-start: 左对齐
4.2flex-end: 右对齐
4.3center: 居中
4.4space-between: 两端对齐，每个项⽬之间间隔相等
4.5space-around: 每个项⽬的两侧间隔相等
5.align-items(定义项⽬在交叉轴上如何对齐)
5.1strech(默认值)：如果项⽬未设置⾼度或为auto，讲占满容器⾼度
5.2flex-start: 交叉轴的起点对齐
5.3flex-end: 交叉轴的终点对齐
5.4center: 交叉轴的中点对齐
5.5baseline：项⽬的第⼀⾏⽂字的基线对齐
6.align-content(定义多根轴线，多⾏)
项⽬属性
1.1order: <integer>
2.flex-grow(定义项⽬的放⼤⽐例，默认为0，如果存在剩余空间，也不放⼤)
2.1flex-grow: <default>
3.flex-shrink(定义项⽬的缩⼩⽐例，默认为1，即空间不⾜时，会缩⼩该项⽬)
3.1flex-shrink: <number>
4.flex-basis(定义分配多余空间前，项⽬占据的主轴空间，)
4.4flex-basis：<length> | auto(默认值)
5.flex(flex-grow、flex-shrink、flex-basis简写)
5.1auto(1,1,auto)
5.2none(0,0,auto)
6.align-self(设置单个项⽬的对齐⽅式，可覆盖align-items属性)
6.1auto(默认值，继承⽗元素的align-items)
6.2其余与algin-items⼀致

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。