flex弹性盒子布局

1.flexDirection

row | row-reverse | column | column-reverse

  该属性:规定了主轴的方向(父容器中的排列方向)

     row( 默认值 ):主轴为水平方向,起点在左端。

     row-reverse:主轴为水平方向,起点在右端。

    column:主轴为垂直方向,起点在上沿。

    column-reverse:主轴为垂直方向,起点在下沿。

    column-reverse:主轴为垂直方向,起点在下沿。


2.justifyContent

flex-start | flex-end | center | space-between | space-around

规定:子item在主轴方向的对齐方式

      flex-start(默认值):伸缩项目向一行的起始位置靠齐。

      flex-end:伸缩项目向一行的结束位置靠齐。

      center:伸缩项目向一行的中间位置靠齐。

      space-between:两端对齐,项目之间的间隔都相等。

      space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。


3.alignItems

flex-start | flex-end | center | baseline | stretch

规定:子item在侧轴方向的对齐方式

      flex-start:交叉轴的起点对齐。

      flex-end:交叉轴的终点对齐 。

      center:交叉轴的中点对齐。

      baseline:项目的第一行文字的基线对齐。

      stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。


4.*flexWrap

nowrap | wrap | wrap-reverse

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

nowrap(默认值):不换行。

wrap:换行,第一行在上方。

wrap-reverse:换行,第一行在下方。(和wrap相反)

align-content:flex-start; // 父标签添加这个属性,可以去除换行之间的空格

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已...
    丫3阅读 578评论 0 0
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,514评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,623评论 0 26
  • 给容器设置任何容器都设置 inline-flex 场景几乎没有 (行级)子元素 浮动display : ...
    小飞侠zzr阅读 1,174评论 0 1
  • 今天,第十次月考的成绩出来了。 这次,平行班的孩子们有了长足的进步,成绩大幅度提高。尤其是基础知识的分数提高了不少...
    风雨同舟_f997阅读 100评论 0 1