兵兵有你

人品好,气质差.丢了工作就回家...

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

理解定义
flex container:对要处理的div开启flex布局 display:flex|inline-flex(指定DIV后面的行内元素也会在同一行内)成为flex container
flex items:指container里的多个子项目
主(横)轴: main axis-->起点main start 终点main end,最大宽度main size
交叉(竖)轴:corss axis-->起点corss start 终点 corss end,最大高度 corss size

应用在flex container上的CSS属性

flex-direction:定义flex items方向:(row|row-reverse|column|column-reverse)
  row:主轴从左对齐开始排
  row-reverse:主轴从右对齐开始排
justify-content:决定flex items在横轴上的对齐方式
  flex-start 左对齐
  flex-end 右对齐
  center 居中对齐
  space-between 之间等距且两边对齐
  space-evenly 之间等距两边也等距
  space-around 之间等距两边减半
flex-wrap:决定了多个items被挤压时是否要换行(unwrap|wrap换|wrap-reverse)
flex-flow:是flex-direction和flex-wrap的缩写,如:row-reverse wrap
align-items:决定了flex items在纵轴上的对齐方式
  normal,stretch(未设置高度时自动拉伸),flex-start,flex-end,center,baseline
align-content:决定了多行flex items在纵轴上的对齐方式。同justify-content类似

-----------------------------------------------------------------------------------------------------------

应用在flex items上的CSS属性
flex:是flex-grow|flex-shrink|flex-basis的缩写,可以是1-3个值
  如1,2,30px(flx-grow,flex-shrink,flex-basis)
  1个值代表flex-grow
flex-grow:决定flex items如何扩展,默认0,要求>=0
flex-basis:设置flex items 在横向上的base size值如 100px
flex-shrink:决定flex items如何收缩,数字值
order:数字值排序,值越小越前面,默认0
align-self:覆盖父元素align-item的属性,用的少

posted on 2021-09-15 14:46  greatbing  阅读(35)  评论(0编辑  收藏  举报