flex布局(完结)


flex布局

一·认识flex布局

1·开启flex布局的元素叫做flex container
2·flex container里的直接子元素叫做flex.item
3·开启display属性设置为flex以块级元素的形式存在
开启display属性为inline-flex以行内元素的形式存在

二·flex布局模型

flex布局(完结)_第1张图片

三:felx的相关属性

(一)·应用在flex container上的CSS属性

flex-items默认是沿着main axis(主轴)从main-start开始往main-end方向排布的

1· flex-direction[主轴方向]

  • 决定主轴(main axis)的方向

    属性值有:

    -row(默认值):---->主轴的方向就是从左到右

    -row-reverse:---->主轴的方向就是从右到左

    -column:---->主轴的方向从上往下

    -column-reverse:---->主轴的方向就是从下到上

2· justify-content[主轴上排序]

决定flex-item在主轴方向上的对齐方式

属性值有:

  • flex-items之间没有距离

    -flex-start(默认值):---->与main start方向进行对齐

    -flex-end:---->与main end方向进行对齐

    -center:---->居中对齐

  • flex-items之间有距离

    -space-between:---->flex-item之间的距离相等并且与main start和main end两端进行齐;

    -space-evenly:---->flex-item之间的距离相等并且flex-item与main start和main end之间 的距离等于flex-items之间的距离

    -space-around:---->flex-item之间的距离相等并且flex-item与main start和main end之间 的距离是flex-items之间的距离的一半

flex布局(完结)_第2张图片

3· align-items[交叉轴排序]

决定flex-item在交叉轴(cross axis)上的对齐方式

属性值有:

-normal:---->在弹性布局中效果和stretch一样

-stretch:---->当flex-items在cross axis方向的size为auto的时候,会自动拉伸至填充flex-container(前提是没有设置高度)

-flex-start:---->与cross start对齐

-flex-end:----> 与cross end对齐

-center:---->居中对齐

-baseline:---->与基准线对齐(对齐九永远都是第一行文本作为基线的)

flex布局(完结)_第3张图片

4· flex-wrap[单行还是多行]

决定了flex-container是单行还是多行,默认情况下,所有的flex-item都会在同一行显示
属性值有:
-nowrap(默认值):---->单行

-wrap:---->多行

-wrap-reverse:---->多行(对比wrap,cross start与cross end方向相反)
flex布局(完结)_第4张图片

5· flex-flow:

是flex-direction和flex-wrap的简写,可以省略,顺序任意

6· align-content[多行在交叉轴排序]

决定了多行flex items在across axis上的对齐方式,用法类似于justify-content

属性值有:

  • flex-items之间没有距离

    -stretch(默认值):---->与align-items的stretch类似

    -flex-start---->与across start方向进行对齐

    -flex-end:---->与across end方向进行对齐

    -center:---->居中对齐

  • flex-items之间有距离

    -space-between:---->flex-item之间的距离相等并且与across start和across end两端进行齐;

    -space-evenly:---->flex-item之间的距离相等并且flex-item与across start和across end之间 的距离等于flex-items之间的距离

    -space-around:---->flex-item之间的距离相等并且flex-item与across start和across end之间 的距离是flex-items之间的距离的一半
    flex布局(完结)_第5张图片

(二)·应用在flex item上的CSS属性

1·order[排步顺序]

  • 决定了flex items的排步顺序,可以设置任意的整数,值越小就越排在前面,默认值就是0

2·align-self[类似align-items属性]

  • 可以通过align-self覆盖flex container的align-items属性

  • auto(默认值)-------->遵从flex container的align-items设置

  • strech,flex-start,flex-end,center,baseline效果类似于align-items

3·flex-grow[flex-item如何扩展]

  • 可以设置任意的非负数字(正小数,正整数,0)默认值就是0

  • 当flex container在main axis方向上还有剩余的size的时候,flex-grow才会有效果

  • 如果所有的flex items在flex-grow总和sum超过1, 每一个flex-item扩展的size为flex-container的剩余siza*flex-grow/sum;

  • 如果所有的flex items在flex-grow总和sum不超过1, 每一个flex-item扩展的size为flex-container的剩余siza*flex-grow;

  • flex-items扩展后的size不能超过max-width/max-height

4·flex-shrink[flex-item如何收缩]

  • 可以设置任意的非负数字(正小数,正整数,0)默认值就是1

  • 当flex container在main axis方向上超过flex container的size的时候,flex-shrink属性才会有效果

  • 如果所有的flex items在flex-shrink总和sum超过1, 每一个flex item收缩的size

    为flex-items超出flex-container的siza*收缩比例/所有的flex-items收缩的比例之和;

  • 如果所有的flex items在flex-grow总和sum不超过1, 每一个flex item收缩的size

    为flex-items超出flex-container的sizasum收缩比例/所有的flex items收缩的比例之和;

    收缩比例=flex-shrink*flex item的base size【base size就是flex item放入flex container之前的size】

  • flex-shrink收缩后的size不能超过min-width/min-height

5·flex-basis[主轴上items的大小]

  • 用来设置flex-item在main axis方向上的base size

​ auto(默认值),具体的宽度数值(100px)

  • 决定flex-items最终在base size的因素,优先级从高到低
    1. max-width/max-height/min-width/min-height
    2. flex-basis
    3. width/height
    4. 内容本身的size

6·flex[缩写属性]

​ flex-grow,flex-shrinnk,flex-basis的简写属性,可以指定1个,2个或者3个值

单值语法:值必须为以下其中之一:

  • 一个无单位数(number),他会被当做的值
  • 一个有效的宽度值(width),他会被当做的值
  • 关键字none,auto,或者initial

双值语法:

  • 第一个值必须是无单位数,他会被当做的值

  • 第二个值必须是以下其中之一:

​ a:一个无单位数(number),他会被当做的值

​ b:一个有效的宽度值(width),他会被当做的值

你可能感兴趣的:(html与css,css,css3,html5)