flex布局

flex布局(Flexible布局, 弹性布局)

 重要概念:

1. 开启flex布局的元素叫做  flex container
2. flex container 里面的直接子元素叫做  flex items

如何开启flex布局:?

设置display属性为flex或者inline-flex 可以成为flex container

1. display: flex    块级元素, flex container 以block-level形式存在
2. display: inline-flex   行内元素  , flex container 以inline-level形式存在

flex布局模型:

main axis 主轴

cross  axis 交叉轴

 

 

 

flex相关属性

应用在flex container 上的CSS属性

1. flex-flow
2. flew-direction
3. flex-wrap
4. justify-content
5. align-items
6. align-contaent

应用在flex items 上的CSS属性

1. flex
2. flex-grow
3. flex-basis
4. flex-shrink
5. order
6. align-self

flex container相关属性

flew-direction

flex items 默认是沿着main axis(主轴)  从mian start 开始往main end 方向排布

flew-direction属性是决定主轴的方向.有4个属性值

1. row (默认) ,主轴从左往右
2. row-reverse   主轴从右往左
3. column 主轴从上到下
4. column-reverse  主轴从下到上
5. 

justify-content

justify-content  决定了  flex items 在 main axis (主轴)上的对齐方式

取值:

1. flex-start (默认值), 与main start 对齐
2. flex-end   与main end 对齐
3. center ; 居中对齐
4. space-between:
   1. flex items 之间的距离相等
   2. 与main start , main end 两端对齐
5. space-evenly
   1. flex items 之间的距离相等
   2. flex items 与main start , main end 之间的距离 等于flex items之间的距离
6. space-around
   1. flex items 之间的距离相等
   2. flex items 与main start , main end 之间的距离 是flex items之间距离的一半
7. 

    

    

align-items

align-items   决定了flex items 在cross axis (交叉轴)上的对齐方式

属性值为:

1. normal: 在弹性布局中,效果与stretch 一样
2. stretch : 当flex items 在cross axis 方向的size 为auto时,会自动拉伸至填充flex  container
3. flex-start : 与 cross start 上对齐
4. flex-end : 与 cross end 上对齐
5. center: 在交叉轴居中对齐
6. baseline: 与基准线对齐
7. 

flex-wrap

flex-wrap 决定flex container 是单行还是多行

属性值:

1. nowrap (默认): 单行(如果items宽度大于一行,宽度会被压缩)
2. wrap : 多行
3. wrap-reverse : 多行(对比wrap, cross start 与 cross end 相反)

   

flex-flow

 flex-flow:  <'flex-direction'> || <'flex-wrap'>

align-content 

 align-content  决定了多行flex items 在cross axis 上的对齐方式,用法与justify-content类似

属性值:

1. stretch(默认值) :与align-items 的stretch类似
2. flex-start: 与cross start  对齐
3. flex-end: 与cross end对齐
4. center: 居中对齐
5. space-between
   1. flex items之间的距离相等
   2. 与cross start. cross end 两端对齐
6. space-evenly
   1. flex items 之间的距离相等
   2. flex items 与main start , main end 之间的距离 等于flex items之间的距离
7. space-around
   1. flex items 之间的距离相等
   2. flex items 与main start , main end 之间的距离 是flex items之间距离的一半

flex items相关属性

order

 order决定了flex items 的排布顺序

1. 可以设置任意整数(正整数, 负整数, 0) ,值越小就越排在前面
2. 默认值是0

align-self

flex items 可以通过align-self 覆盖flex container 设置的align-items

1. auto(默认值) :遵从flex container 的align-items 设置
2. stretch, flex-start. flex-end , center, baseline, 效果与align-items一致

flex-grow

flex-grow 决定了flex items 如何拓展

1. 可以设置任意非负数字(正小数, 正整数, 0) ,默认值是0
2. 当flex container 是main axis 方向上有剩余size时,flex-grow属性才会有效

• 如果所有flex items 的flex-grow 总和sum超过1, 每个flex item 拓展的size为

1. 1. flex container的剩余size * flex-grow / sum

• 如果所有flex items 的flex-grow 总和sum小于1, 每个flex item 拓展的size为

1. 1. flex container的剩余size * flex-grow

• flex items 扩展后的最终size不能超过max-width/ max-height

flex-shrink

flex-shrink决定了flex items 如何收缩

1. 可以设置任意非负数字(正小数, 正整数, 0) ,默认值是1
2. 当flex items是main axis 方向上超过了flex container 的size时,flex-grow属性才会有效

• 如果所有flex items 的flex-shrink总和sum超过1, 每个flex item 收缩的size为

1. flex items 超过 flex container的size * 收缩比例 / 所有flex items 的收缩比例之和

• 如果所有flex items 的flex-shrink总和sum小于1, 每个flex item 收缩的size为

1. flex items 超出flex container 的size*sum*收缩比例/所有flex items 的收缩比例之和
2. 收缩比例 =  flex-shrink * flex item的 base size 
3. base size 就是flex item放入flex container 之前的size

• flex items 收缩后的最终size不能小于min-width/ min-height

 flex-basis

 flex-basis 用来设置flex items 在main axis 方向上的base size

1. auto 默认值, 
2. 具体的宽度数值(100px)

决定flex items 最终base size 的因素, 从优先级高到低

1. max-width\ max-height\ min-widtth\min-height
2. flex-basis
3. width\height
4. 内容本身的size

flex

是flex-grow || flex-shrink || flex-basis 的简写, flex属性可以指定1个 ,2个或者3个值