欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS中的flex布局

程序员文章站 2022-04-29 19:49:11
...

flex布局

转自阮一峰老师:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

基本概念

使用flex布局的元素称为“容器”(flex container),子元素称为”项目“(flex item)

语法

.box {
    display: flex;
}

特殊的,Webkit 内核的浏览器,必须加上-webkit前缀。

.box {
    display: -webkit-flex;
    display: flex;
}

用一张图来展示一个使用flex布局的元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BD06GS8t-1583728198671)(C:\Users\杜广楠\Desktop\bg2015071004.png)]

容器中有两根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis)

主轴开始的位置为 main start ,结束的位置为 main end

交叉轴开始的位置为cross start ,结束的位置为 cross end

项目中水平的称为main size,垂直的称为cross size

容器的属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  1. flex-direction

    决定了主轴的方向,项目按此方向排列

    有4个值

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

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

    • column:主轴为垂直方向,起点在顶部

    • column:主轴为垂直方向,起点在底部

    • initial: 该属性为默认值

    • inherit: 继承父元素

  2. flex-wrap

    • nowrap(默认值):不换行

    • wrap:换行

    • wrap-reverse:换行,需要换行的项目出现在上方

  3. flex-flow

    flex-direction和flex-wrap的缩写

    例:

    .box {
        flex-flow: row wrap;
    }
    
  4. justify-content

    项目在主轴上的对齐方式

    • flex-start:左对齐

    • flex-end: 右对齐

    • center:居中

    • space-between:两端对齐,项目间隔相等

    • space-around:项目两侧间隔相等,项目到边框距离为项目间的一半

  5. align-items

    项目在交叉轴上的对齐方式

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

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

    • center:交叉轴的中点对齐

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

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

  6. align-content

    定义多根轴线的对齐方式,如果只有一根轴线,则不起作用。就是该属性适用于有多行项目的felx容器,。

    • flex-start:与交叉轴的起点对齐
    • flex-end:与交叉轴终点对齐
    • content:与交叉轴中点对齐
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
    • space-around:每根轴线两侧的间隔都相等,所以轴线之间的间隔比轴线与边框的间隔大一倍
    • stretch(默认值):轴线占满整个交叉轴

项目的属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  1. order
    项目的排列顺序,数值越小,排列越靠前,默认值为0

  2. flex-grow

    项目的放大比例,默认为0

  3. flex-shrink

    项目的缩小比例,默认值为1

  4. flex-basis

    分配多余空间前,项目占据的主轴空间,默认值auto

  5. flex

    是flex-grow,flex-shrink,flex-basis的缩写,默认值为0 1 auto

    有两个快捷值,auto(0 1 auto)和none(0 0 auto)

  6. align-slef

    允许项目和其他项目对齐方式不一样,默认值auto