【笔记】Flex布局

一、简介

Flex布局意为弹性布局。任何容器可以指定为Flex布局,则其子元素自动成为容器成员,称为Flex Item(Flex项目),且子元素的float clear vertical-align属性失效。

        .box{ 
          display: flex;
        }

        /*行内元素*/
        .box{ 
          display: inline-flex;
        }

        /* Webkit */ 
        .box{ 
          display: -webkit-flex;/* Safari */
          display: flex; 
        }

二、概念

采用Flex布局的元素:flex container(flex容器)

子元素:flex item(flex项目)

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

三、容器属性

容器属性主要有六个:

  1. flex-direction:主轴方向,row(水平向右) | row-reverse(水平向左) | column(垂直向下) | column-reverse(垂直向上)
  2. flex-wrap:换行方式,nowrap(不换行) | wrap(向下换行) | wrap-reverse(向上换行)
  3. flex-flow:flex-direction 与 flex-wrap的简写,默认值为row nowrap
  4. justify-content:主轴上对齐方式,flex-start(左对齐) | flex-end(右对齐) | center(居中对齐) | space-between(两端对齐,间隔相等) | space-around(子元素与容器间隔x,两个子元素间隔2x)
  5. align-items:交叉轴上对齐方式,flex-start(交叉轴起点) | flex-end(交叉轴终点) | center(交叉轴中点) | baseline(第一行文字的基线) | stretch(默认,如果项目未设置高度或设为auto,将占满整个容器的高度)
  6. align-content:多跟轴线对齐方式,一根轴线时不起作用。flex-start(交叉轴起点) | flex-end(交叉轴终点) | center(交叉轴中点) | space-between(两端对齐,间隔相等) | space-around(子元素与容器间隔x,两个子元素间隔2x) | stretch(默认,轴线占满整个交叉轴)

四、项目属性

项目属性主要有6个:

  1. order:项目排列顺序。越小越靠前,默认0
  2. flex-grow:项目放大比例,默认0,即不放大,多个元素根据此属性百分百占据剩余空间
  3. flex-shrink:项目缩小比例,默认为1,即空间不足时缩小,0为不缩小
  4. flex-basis:初始情况占据主轴空间的多少,之后会计算剩余空间并缩放,默认auto
  5. flex:flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,后两个可选
  6. align-self:覆盖align-items属性。默认值为auto,表示继承父元素align-items,无父元素,等同stretch。auto | flex-start | flex-end | center | baseline | stretch

上一篇
【读书】白垩纪往事 【读书】白垩纪往事
阅读完成时间:2016年11月27日阅读方式:Kindle Android App作者: 刘慈欣 简介:《白垩纪往事》,又名《当恐龙遇上蚂蚁》,如果就这么正常发展下去,恐龙和蚂蚁的社会大概都不可能继续进化了。这两个物种刚刚燃起的智慧之火
2016-11-28
下一篇
【读书】癌症·真相:医生也在读 【读书】癌症·真相:医生也在读
时间:2016年11月14日早书籍简介:荣获中宣部、中国图书评论学会和央视“2015中国好书”奖荣获第十一届文津图书奖荣获第八届吴大猷科学普及著作奖这是一本讲癌症的书,但和你以往见过的该题材的书完全不同。这不是一本“养生秘籍”,不会推荐什么
2016-11-14