flex布局

flex

flex是flexible box的缩写,也叫弹性盒子布局。

1.为什么要flex布局?

​ 在我们常规布局方式(IFC BFC)已经不能满足我们所需要的方式了,因此flex布局也就应运而生。下面来深入学习一下flex布局的相关知识。

2.flex布局

在flex布局中,有水平的主轴(main axis)和垂直的交叉轴(cross axis)。

主轴起点叫main start 终点叫做main end.

交叉轴起点叫做 cross start 终点叫做 cross end.

图一

flex布局_第1张图片

3.flex-direction

flex-direction改变主轴和交叉轴的指向。也是改变项目的指向。

​ 默认值:row 即:主轴从左到右

还有以下属性

row-reverse 主轴从右指向左

column 主轴从上到下

column-reverse 主轴从下到上

侧轴则与主轴交换位置

4.flex的自动宽度

在说明自动宽度之前,我们先来说明一下width的几个属性:

max-content

min-content

max-content是不管父盒子的宽度,一直像→延申。

min-content表示容器为最小元素的宽度就行


当使用flex布局时,子元素总宽度不超过容器宽度的时候,默认子元素宽度就是max-content

如果总宽度大于容器宽度的时候,默认子元素宽度就是min-content的宽度。

5.flex指定宽度

在flex布局中,如果子元素需要指定宽度的时候,可以使用flex-basis这个属性。当盒子中还有空余宽度的时候,可以使用flex-grow来分配盒子中的剩余宽度。

6.flex自动缩小

当我们子元素宽度大于容器宽度的时候,容器不会被撑开。而是子元素会缩水,可以通过flex-shrink来指定缩水的大小。默认值为1

7.flex简写

flex:grow shrink basis如果不写的话,默认值就是1。

例子:等分:flex:1 0px

8.对齐方式

主轴-justify-content

  • center
    space-around
  • space-evenly
  • space-between
  • flex-start
  • flex-end

交叉轴-align-items:

  • center
  • flex-start
  • flex-end
  • stretch
  • baseline

多轴–align-content:

只有设置了flex:warp才会生效

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

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

    center:与交叉轴的中点对齐。

    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

    stretch(默认值):轴线占满整个交叉轴。

9.换行

flex-warp:warp

默认nowarp

10.order

优先级显示顺序

与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。

9.换行

flex-warp:warp

默认nowarp

10.order

优先级显示顺序

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