flex 使用说明

介绍了 flex 的各种属性和值,如果觉得看文字不过瘾,这里有动画演示

容器盒子

使用了 display: flex 后会形成一个容器盒子,里面的子元素为 item
对容器盒子进行设置

属性 — 值
  • justify-content:items 在主轴上的对齐方式
    • center:居中对齐
    • flex-start:对齐主轴起始端
    • flex-end:与 flex-start 相反
    • space-between:两端对齐,items中间间隔相等
    • space-around:和 space-between 类似,但是每个 item 两侧间隔相等
  • align-items:items 在交叉轴(即与主轴垂直的方向)上的对齐方式
    • center:居中对齐
    • flex-start:对齐交叉轴起始端
    • flex-end:与 flex-start 相反
    • baseline:以每个 item 的第一行文字的基线对齐
    • stretch:默认,若 items 没有设置 height 或设置为auto,则撑满容器
  • flex-direction:设置主轴,items 在主轴上的排列方向
    • row:默认,水平方向,从左开始
    • row-reverse:水平方向,从右开始
    • column:垂直方向,从上开始
    • column-reverse:垂直方向,从下开始
  • flex-wrap:换行,items 在主轴方向上是否换行
    • nowrap:默认,不换行
    • wrap:换行
    • wrap-reverse:换行(反向)
  • flex-flow:
    • flex-direction 和 flex-wrap 的合写,默认值 flex-flow: row nowrap;
  • align-content:
    当使用了 flex-wrap 后,如果 items 换行了,此时会产生多个轴线,此时这个属性才会生效;
    将每一行当成一个 item ,设置其在交叉轴上的对齐方式,效果类比 justify-content
    • flex-start:对齐交叉轴起始端
    • flex-end:与 flex-start 相反
    • center:居中对齐
    • space-between:同理 justify-content
    • space-around:同理 justify-content
    • stretch:默认值,撑满容器

items

对容器内的 item 进行设置

属性 — 值
  • order:定义当前 item 在整个items 里的顺序位置,值越小排在越前,可接受负数
  • flex-grow:放大比例,默认为0
  • flex-shrink:缩小比例,默认为1,设为0表示不缩小
  • flex-basis:在分配剩余空间之前,设置 item 占据的主轴空间,默认为auto,表示 item 原始大小
  • flex:
    • 按flex-grow flex-shrink flex-basis 的顺序合写
    • flex-grow必选参数,flex-shrink 和 flex-basis 可选
    • 默认值为 flex: 0 1 auto
    • 快捷值:flex: auto(1 1 auto);flex: none(0 0 auto)
  • align-self:单独设置 item 在交叉轴上的对齐方式,覆盖 align-items 的值
    • auto:默认值,表示继承父元素的 align-items 的属性值
    • flex-start,flex-end,center,stretch,baseline 表现与 align-items 一致

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 1,712评论 0 24
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,403评论 0 5
  • 传统的网页布局基于盒装模型,使用display,position,float属性来达成各种布局。对于一些特殊的布局...
    exialym阅读 1,938评论 0 11
  • 作者: 阮一峰日期: 2015年7月10日原文链接:http://www.ruanyifeng.com/blog/...
    Mike_Gu阅读 287评论 0 6
  • 网页布局(layout)是CSS的一个重点应用。 一、Flex布局是什么? Flex是Flexible Box的缩...
    抱着熊喵啃什么阅读 301评论 0 4