flex 详解+实例

flexBox 弹性盒子 by $css-stricks


1.flex的兼用性

lex布局是不支持ie8,9的,所以建议,如果要做兼容ie8的pc端项目,还是老老实实用浮动布局吧~!但是现在是移动互联网的时代,移动端我们还是放心大胆用吧,请抛弃恶心的清除浮动!

2.语法速记

作用的对象:

container父级 说明:(d) 表示 默认

  • 添加flex属性:
    display: flex/line-flex;
  • 确定主轴方向:
    flex-direction: row(d) | row-reverse | column | column-reverse
  • 换行方式:
    flex-wrap: nowrap(d) | wrap | wrap-reverse
  • 主轴和换行结合:
    flex-flow: <'flex-direction'> || <'flex-wrap'>。默认是 flex-flow: row nowrap
  • 沿主轴的对齐方式:
    justify-content: flex-start(d) | flex-end |center | space-between | space-around | space-evenly
  • 沿主轴项目的横向放置行为:
    align-items: flex-start | flex-end | center | stretch(d) | baseline
  • 当主轴横向有空余空间是,类似于横向的justify-content:对于只有一行的不起作用
    align-content: flex-start | flex-end | center | stretch(d) | space-between | space-around

item 子级 -------- 请注意float,clear并且vertical-align对Flex项目没有影响

  • order属性:(0是默认)order从小到大排列
    order:

  • flex-grow属性:(0是默认,负数无效)item的必要的增长能力,如果一个设为2,其余的设为1,则设置为2的占据的大小是1的2倍。
    flex-grow:

  • flex-shrinks属性:(1是默认,负数无效) 和 flex-grow相反。是一种收缩能力
    flex-shrinks:

  • 分配剩余空间之前定义元素的默认大小:如果设置为0,则不会考虑内容的额外空间。如果设置为auto,多余空间将根据其flex-grow值分配
    flex-basis: | auto(d)

  • flex属性:是flex-grow | flex-shrinks | flex-basis 的结合.第二个和第三个属性时可选的。默认是:0 1 auto
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

  • align-self属性:可以用单独的属性。覆盖默认对齐方式
    align-self: align-self: auto | flex-start | flex-end | center | baseline | stretch;

3.详解

by -- CSND

.box{
    /* flex布局第一步:找到你要布局元素的父元素 */
    display:flex;
    /* 第二步:判断方向:元素是横着排还是竖着排,默认为横着排,当项目空间不够时,是否换行 */
    flex-direction: row(横向) | column(纵向);
    flex-wrap:nowrap(默认不换行) | wrap (换行,新元素在下面一行) | wrap-reverse(换行,新元素在上面一行)
    /* 第三步:根据方向,进行布局操作,注意敲黑板啦
        当为横向时,水平布局的操作用justify-content属性,垂直方向的操作用align-items属性;
        当为纵向时,两属性的作用正好相反,水平布局的操作用align-items属性,垂直方向的操作用justify-content属性;
        以上两个属性是用的最多的属性了。
    */
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: flex-start | flex-end | center | baseline | stretch;
}

justify-content 和 align-items 属性(设置到父元素)

  • justify-content: flex-start 相当于左浮动
  • justify-content: flex-end 相当于右浮动,具体不赘述,同上
  • justify-content: center 让某个元素水平居中
  • justify-content: space-between 这个就非常好用的 ,两个子元素情况下,一个元素左对齐,一个元素右对齐。三个元素情况下就无敌了,能实现一个元素居中,一个元素左对齐,一个元素右对齐。放以前,中间居中的都不知道有多麻烦。
  • justify-content: space-around 每个子元素两侧的间距都相等,且为项目到边框距离的两倍。
  • align-items: flex-start 垂直方向的 上对齐。
  • align-items: flex-end 垂直方向的 下对齐。
  • align-items:center 最好用的竖直居中
  • align-items:stretch 如果元素没设置高的话,高度将与父元素相等(铺满整个元素)
  • align-items:baseline 与元素第一行文字的头对齐,我暂时没找到用此属性的地方

设置到子元素的常用属性:

  • order: 设置排序的,数值越小,元素越靠前(用的不多)
  • flex-grow: 设置项目的放大比例 有点栅格化布局的意思 比如三个子元素,全部设置 flex-grow: 1 则在父元素内 宽度都相等 (3等分)
  • flex-shrink:设置项目的缩小比例,当空间不足时,所有项目会默认等比例缩小。当设置flex-shrink:0 时,当空间不足时元素也不会缩小
  • 注意 :若设置了元素的宽度,还有设置 flex-shrink:0 ,否则项目空间不足时,元素会缩小,设置的宽度就不生效了
  • flex-basis:百分比或者像素,当项目空间充足时,给子元素设置一个默认的宽度,默认auto(项目的本来大小)
  • align-self:这个属性呢,就是单元素版的align-items(设置后,所有子元素都会生效),但如果只想让一个元素居中,就设置改元素align-self:center
  • flex: 这个属性是 flex-grow和fex-shrink和flex-basis的缩写,默认是0 1 auto;

4.flex布局常用demo

1.带有icon的标题,icon居中

.title{
      margin-top:20px;
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

2.左中右布局,左边右定宽,中间部分自适应。

    在父元素中设置 justify-content: space-between;在左右子元素中设置flex-shrink:0(防止空间不足时缩小);在中间元素下设置flex-grow:1(让它撑满中间区域);

3.input输入框跟不定长的label撑满一行

其实跟上面要使用的方法差不多,将父元素设置justify-content: space-between,将要固定的元素(label)设置flex-shrink:0,将要铺满的元素(input)设置flex-grow:1。

4.流式布局(一排放4个,放不下就换行)

  .flow{
      display: flex;
      flex-wrap:wrap;
      justify-content: flex-start;
      border:1px solid #e3e3e3;
    }
    .flow .item{
      flex:0 0 22%;
      /*
        等同于
        flex-grow: 0;
        flex-shrink:0 ;
        flex-basis:22%;
      */
      padding-bottom: 22%;/* 做到宽高相等 */
      margin: 1.5%;
      background: yellow;
    }

你可能感兴趣的:(flex 详解+实例)