Flex布局属性汇总

其他 2020-05-26 11:54:53 阅读次数: 0

文章目录

Flex布局

弹性布局(Flex布局)是CSS3提出的一个布局方式，和传统的布局方式不同，弹性布局不再指定一个元素具体的尺寸，而是描述这个元素应该如何填充空间。

Flex布局有两个比较重要的东西，一个是弹性容器，一个是弹性盒子。通过display: flex来指定一个盒子为弹性容器，该样式对容器本身没有影响，但是会影响内部元素的排布，里面的元素就变成了一个个弹性盒子。总得来讲，是弹性容器包含着一个个弹性盒子。

块级元素通过display: flex来指定为弹性容器，行内元素通过display: inline-flex来指定弹性容器。另外如果是Webkit内核的浏览器，需要加上-webkit前缀。

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

弹性布局具有以下特性：

  1. 弹性容器的默认宽度是100%，和块级元素一样；
  2. 横向布局的弹性盒子里的块级元素不再占用一整行，而是像float元素一样按一个方向排序；
  3. 弹性盒子可以延伸，也可以压缩，尺寸时可以随着容器大小而变化(弹性盒子设置的宽高不一定是真正展示的宽高)；
  4. 多个弹性盒子的排布顺序、对齐方式都是可以设置的。

弹性容器属性设置

弹性容器除了设置display: flex属性外，还可以设置以下6个属性：

  1. flex-direction ：用于设置主轴的方向(即内部弹性盒子的排列方向)，默认值为row
  2. flex-wrap ：默认情况下，盒子都排在一条线上，若一条线放不下，该属性就设置该怎么换行，默认值为nowrap(不换行)
  3. flex-flow ： 是flex-direction和flex-wrap的简写，默认值为row nowrap
  4. justify-content ： 设置了弹性盒子在主轴上的对齐方式，默认值为flex-start (左对齐)
  5. align-items ： 设置盒子在交叉轴上的对齐方式，默认值为 stretch (盒子占据容器整个高度)
  6. align-content ：设置多根轴线的对齐方式，若只有一根线，则没有作用，默认值为stretch

flex-direction属性

该属性用于设置主轴的方向(即内部弹性盒子的排列方向)，默认值为row

属性有4个值：

  1. row(默认值)：主轴为水平方向，从左向右依次排列；
  2. row-reverse：主轴为水平方向，从右向左依次排列；
  3. column：主轴为垂直方向，从上往下依次排列；
  4. column-reverse：主轴为垂直方向，从下往上依次排列

flex-wrap属性

默认情况下，弹性盒子都排在一条轴线上，，但是如果一条线上放不下，该属性就决定如何换行，该属性有3个值：

  1. nowrap（默认）：不换行；
  2. wrap：换行，第一行在上方；
  3. wrap-reverse：换行，第一行在下方

flex-flow属性

该属性是flex-direction和flex-wrap的简写形式，其值是flex-direction和flex-wrap的叠加。默认值是row nowrap

属性值是: flex-flow : ||

justify-content属性

该属性定义了弹性盒子在主轴上的对齐方式，对齐方式还与主轴的方向有关(flex-direction)，默认值是flex-start，

有5个属性值，假设flex-direction为默认值：

  1. flex-start：左对齐；
  2. flex-end：右对齐；
  3. center：居中；
  4. space-between：两端对齐，且每个弹性盒子之间间隔相等，容器边框与盒子之间没有间隔；
  5. space-around：每个盒子两侧的间隔相等。容器边框与盒子之间有间隔。

align-items属性

设置盒子在交叉轴上的对齐方式，默认值为 stretch(盒子占据容器整个高度)

该属性有5个值：

  1. flex-start：交叉轴的起点对齐；
  2. flex-end：交叉轴的终点对齐；
  3. center：交叉轴的中点对齐；
  4. baseline：盒子的第一行文字的基线对齐；
  5. stretch(默认值)：若盒子未设置高度或设置为auto，则盒子将占满整个容器的高度

align-content属性

设置多根轴线的对齐方式，若只有一根线，则没有作用，默认值为stretch

该属性有6个值：

  1. flex-start：与交叉轴的起点对齐；
  2. flex-end：与交叉轴的终点对齐；
  3. center：与交叉轴的中点对齐；
  4. space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；
  5. space-around：两侧的间隔相等；
  6. stretch：轴线占满整个交叉轴

弹性盒子属性设置

弹性盒子是弹性容器中的一个个需要排列的元素，对盒子样式设置有6个属性：

  1. flex-grow：用来指定弹性盒子的拉伸方式，默认值为0；
  2. flex-shrink：用来指定弹性盒子的收缩方式，默认值是1；
  3. flex-basis：用来指定弹性盒子的基准宽度，盒子设置的宽度值不起效果
  4. flex：是对flex-grow、flex-shrink、flex-basis的叠加；
  5. order：用来指定盒子的排列顺序，数值越小，排列越靠前，默认值为0；
  6. align-self：用来指定单个盒子与其他盒子不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，若父元素没有align-items属性，则等同于继承stretch值。

flex-grow属性

该属性用于指定弹性盒子的拉伸方式。当一行内的弹性盒子不能充满整行时，用该属性去分配空闲的空间。默认值为0，即不去占用空闲区域。而当值为非0时，弹性盒子就会被拉伸。而拉伸盒子是按照flex-grow值的比例分配空闲区域的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局</title>
    <style>
        .flex-box{
            display: flex;
        }
        .flex-box > .box{
            width: 50px;
            height: 100px;
        }
        .flex-box > .box1{
            flex-grow: 1;
            background: red;
        }
        .flex-box > .box2{
            background: green;
        }
        .flex-box > .box3{
            flex-grow: 2;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="flex-box">
    <span class="box box1">1</span>
    <span class="box box2">2</span>
    <span class="box box3">3</span>
</div>
</body>
</html>

flex-grow.png

三个盒子的原始宽度是50px，但是屏幕宽为300px，因此还有150px的空闲区域，分别给box1、box3设置flex-grow的值为1，2，box2未设置值，因此150px的空闲区域会被box1和box3按flex-grow的值进行比例分配，因此box1的宽为100px，box2的宽为150px

flex-shrink属性

该属性用来指定弹性盒子的收缩方式，默认值为1.当所有盒子的宽度超过容器的宽度时，就需要收缩了。默认值为1的情况下指的是所有盒子会均分超出的宽度，所有盒子的宽度都会变小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局</title>
    <style>
.flex-box{
    display: flex;
}
.flex-box > .box{
    width: 150px;
    height: 100px;
}
.flex-box > .box1{
    flex-shrink: 1;
    background: red;
}
.flex-box > .box2{
    flex-shrink: 0;
    background: green;
}
.flex-box > .box3{
    flex-shrink: 2;
    background: yellow;
}
    </style>
</head>
<body>
<div class="flex-box">
    <span class="box box1">1</span>
    <span class="box box2">2</span>
    <span class="box box3">3</span>
</div>
</body>
</html>

flex-shrink.png

当将三个盒子的宽度设置为150px时，总宽度就超过了容器的宽度，因此就需要收缩了。box1的flex-shrink设置为1，box2的flex-shrink设置为0，box3的flex-shrink设置为2，因此box2将不被收缩，而需要收缩的150px将从box1和box3中调整，根据1 : 2的比例，box1会消耗超出区域的1/3，也就是收缩50px，宽度变为100px；同理box3消耗超出部分的2/3，也就是收缩100px，宽度变为50px。

注意的问题是：若盒子中还包含一个固定宽度的元素，如box3中有一个60px的div，那box3的宽度就不会变成50px了，这时候弹性容器将会出现滚动条，box3将另起一行

flex-basis属性

用来指定弹性盒子基准宽度。弹性盒子设置的宽度(width)不一定起作用。同时flex-basis比width的优先级高，其值与width的值的定义方式一样，是一个长度单位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局</title>
    <style>
.flex-box{
    display: flex;
}
.flex-box > .box1{
    flex-basis: 80px;
    background: red;
}
.flex-box > .box2{
    flex-basis: 80px;
    background: green;
}
.flex-box > .box3{
    flex-basis: 120px;
    background: yellow;
}
.flex-box > .box{
    width: 50px;
    height: 100px;
}
    </style>
</head>
<body>
<div class="flex-box">
    <span class="box box1">1</span>
    <span class="box box2">2</span>
    <span class="box box3">3</span>
</div>
</body>
</html>

flex-basis.png

width属性设置的宽度并未生效，而是采用flex-basis属性定义的宽度。

flex属性

flex属性是对前面三个属性的叠加，按照flex-grow、flex-shrink、flex-basis的顺序进行赋值的。

flex: <flex-grow> <flex-shrink> <flex-basis>

也可以进一步缩写，组合成一个值来使用。

  1. 默认情况下，即不指定flex的值时，默认值是“flex: 0 1 auto;”，这和分开写的默认情况一样；
  2. flex: none;：表示flex: 0 0 auto;，即盒子即不延伸也不收缩；
  3. flex: auto;：表示flex: 1 1 auto;，即盒子既能延伸也能收缩；
  4. flex: 1：当值为1时(或者其他非0值)，表示flex: 1 1 0，即容器内的盒子会平分空间，不管是延伸还是收缩。

order属性

order属性定义了盒子的排列顺序，数值越小，排列越靠前，默认值为0，也可以为负数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局</title>
    <style>
        .flex-box{
            display: flex;
            height: 50px;
        }
        .flex-box > .box1{
            flex-basis: 80px;
            background: red;
            order: 1
        }
        .flex-box > .box2{
            flex-basis: 80px;
            background: green;
            order: 2
        }
        .flex-box > .box3{
            flex-basis: 120px;
            background: yellow;
            order: 0
        }
    </style>
</head>
<body>
<div class="flex-box">
    <span class="box box1">1</span>
    <span class="box box2">2</span>
    <span class="box box3">3</span>
</div>
</body>
</html>

order.png

也就是改变了盒子的排列顺序

align-self属性

该属性用来指定单个盒子与其他盒子不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，若父元素没有align-items属性，则等同于继承stretch值。

该属性可以取6个值：

auto | flex-start | flex-end | center | baseline | stretch

除了auto外，其值的含义与align-items属性完全一致，相当于是盒子的align-items属性

参考链接： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

常见flex布局方式： http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

猜你喜欢

转载自blog.csdn.net/qq_31947477/article/details/105769047
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022