CSS知识点整理--flex布局

记录一下flex布局的知识点
flex布局的属性设置分成两个部分,一个是针对容器进行设置的,一个是针对容器里的项目进行设置的。

容器的属性有如下6个:

  1. flex-direction(设置主轴方向)
    有4个常用的设置值:
    row(默认) | row-reverse | column | column-reverse
    row(默认) | row-reverse -> 设置主轴为水平方向,前者起点为左端,后者起点为右端
    column | column-reverse -> 设置主轴为垂直方向,前者起点为左端,后者起点为右端

  2. flex-wrap(设置换行)
    有3个常用的设置值:
    nowrap(默认) | wrap | wrap-reverse
    nowrap ->不换行
    wrap -> 换行,第一行在上
    wrap-reverse -> 换行,第一行在下

  3. flex-flow(是上面两个属性的组合属性)
    flex-flow: flex-direction,flex-wrap

  4. justify-content(设置主轴对齐方式)
    有6个常用的设置值:
    flex-start | flex-end | center | space-around | space-between
    flex-start 根据主轴方向起点对齐
    flex-end 根据主轴方向终点对齐
    center 居中对齐
    space-around 项目与项目之间间隔是项目与边界间隔的2倍
    space-between 两端对齐,两端之间项目间隔相等
    space-evenly 项目之间和项目与边界的间隔都相等

  5. align-items(设置交叉轴对齐方式)
    有5个常用的设置值
    flex-start | flex-end | center | baseline | stretch
    baseline 项目的第一行文字的基线对齐
    stretch 如果项目未设置高度或设为auto,将占满整个容器的高度。

  6. align-content(设置多根轴线对齐方式,只有一根轴线时该属性无效)
    有6个常用的设置值
    flex-start | flex-end | center | space-around | space-between | baseline

容器项目的属性有如下6个:

  • order(设置项目排列顺序,默认为0,越小越靠前排列)
  • flex-grow(根据可用空间放大项目,默认为0,不放大)
  • flex-shrink(根据可用空间缩小项目,默认为0,不缩小)
  • flex-basis(没有设置宽高时设置与width和height一样的值,默认auto)
  • flex: flex-grow,flex-shrink,flex-basis(组合属性)
  • align-self(设置单个项目与其它项目不一样的对齐方式,可覆盖align-items属性,默认auto)
    常用的设置值如下:
    auto | flex-start | flex-end | center | baseline | stretch

注意:Webkit 内核的浏览器,必须加上-webkit前缀。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值