css —— Flex布局详解

最新推荐文章于 2023-06-03 16:10:18 发布

huzhenv5

最新推荐文章于 2023-06-03 16:10:18 发布

阅读量446

点赞数 1

分类专栏： CSS 文章标签： css flex 弹性盒布局详解

本文链接：https://blog.csdn.net/huzhenv5/article/details/105045589

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

简介
取值
容器各属性详解
子元素各属性详解

简介

Flex 是个非常好用的属性，特别是对多个子元素的排列来说十分的方便，就是它对应的属性非常多，理解起来不是十分的容易，本篇文章将详细介绍Flex的用法；目前各主流浏览器对Flex的支持还算是不错的，它的各大浏览器兼容性情况见下表（来自：https://caniuse.com/#search=display%3Aflex）：
在这里插入图片描述

注意：

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
Flex布局的子元素之间的margin不会合并取最大值，而是会相加

取值

display属性

.box{
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

/*行内flex*/
.box{
    display: -webkit-inline-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: inline-flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

容器样式属性列举

.box{
    flex-direction: row | row-reverse | column | column-reverse;
    /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/

    flex-wrap: nowrap | wrap | wrap-reverse;
    /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/

    flex-flow: <flex-direction> || <flex-wrap>;
    /*主轴方向和换行简写*/

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主轴对齐方式：靠近主轴起始方向（默认） | 靠近主轴尾部方向 | 居中对齐 | 两端对齐 | 平均分布*/

    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式：靠近交叉轴起始方向 | 靠近交叉轴尾部方向  | 居中对齐 | 子元素的第一行文字的基线对齐 | 如果子元素未设置高度或设为auto，将占满整个容器的高度；当交叉轴为水平时，则是宽度（默认）*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   /*多主轴对齐方式：靠近交叉轴起始方向 | 靠近交叉轴尾部方向 | 居中对齐 | 两端对齐，轴线之间的间隔平均分布 | 每根轴线两侧的间隔都相等 | 轴线占满整个交叉轴（默认）*/
}

子元素属性列举

.item{
    order: <integer>;
    /*排序：数值越小，越排前，默认为0*/

    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默认为auto，可以设置px值，也可以设置百分比大小*/

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

容器各属性详解

主轴方向

主轴方向通过flex-direction属性定义。所谓主轴，就是容器内子元素的排列的方向，可取的值有四个：

值	含义
row	左到右（默认）
row-reverse	右到左
column	上到下
column-reverse	下到上

在这里插入图片描述

主轴对齐方式

justify-content属性定义了子元素在主轴上的对齐方式

值	含义
flex-start	靠近主轴起始方向（默认）
flex-end	靠近主轴尾部方向
center	居中对齐
space-between	两端对齐，靠近边缘；子元素之间的距离相等
space-around	每个子元素两侧的间隔相等。所以，子元素之间的间隔是子元素到盒子边缘距离的两倍

在这里插入图片描述

交叉轴对齐方式

align-items属性定义交叉轴的对齐方式。我们上面说了什么是主轴，那么什么是交叉轴呢？交叉轴的就是和主轴相交90度的轴，如果主轴是水平的，则交叉轴是从上到下的一个轴；如果主轴是垂直的，则交叉轴是从左到右的一个轴。如下图所示：
在这里插入图片描述
交叉轴对齐方式：

值	含义
flex-start	靠近交叉轴起始方向
flex-end	靠近交叉轴尾部方向
center	居中对齐
baseline	子元素的第一行文字的基线对齐
stretch	如果子元素未设置高度或设为auto，将占满整个容器的高度；当交叉轴为水平时，则是宽度（默认）

在这里插入图片描述

换行方式

默认情况下，所有的子元素都排在一行轴线上，如果排列不了的话，会通过压缩子元素的宽或高使其排下（不会使得子元素里的文本超出子元素）。flex-wrap属性定义了如果一条轴线排不下，如何换行

值	含义
nowrap	不换行（默认）
wrap	第一行靠近交叉轴起始方向
wrap-reverse	第一行靠近交叉轴末尾方向

在这里插入图片描述

多主轴对齐方式

align-content属性定义了多根主轴的对齐方式。如果项目只有一根主轴，该属性不起作用。

值	含义
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	居中对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch	轴线占满整个交叉轴（默认）

在这里插入图片描述

子元素各属性详解

子元素排序属性

order属性定义子元素的排列顺序。数值越小，排列越靠前，默认为0。即子元素不再按照html文档的顺序排列，而是根据这个值的大小重新排列

order: <integer>; /*默认为0*/

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
        body {
            margin: 0;
        }
        .border {
            margin: 60px;
            height: 220px;
            width: 450px;
            border: 2px solid blue; 
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .item {
            height: 40px;
            background-color: red;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div class="border">
        <div class=item style="order:2">1（order：2）</div>
        <div class=item style="order:6">2（order：6）</div>
        <div class=item style="order:6">3（order：6）</div>
        <div class=item style="order:3">4（order：3）</div>
        <div class=item style="order:9">5（order：9）</div>
        <div class=item style="order:0">6（order：0）</div>
        <div class=item style="order:2">7（order：2）</div>
        <div class=item style="order:1">8（order：1）</div>
        <div class=item style="order:7">9（order：7）</div>
        <div class=item style="order:8">10（order：8）</div>
    </div>
    
</body>
</html>

运行：
在这里插入图片描述

子元素放大属性

flex-grow定义子元素的放大属性，默认为0。这个值是什么意思呢，就是当子元素都排列到主轴后，如果主轴上还有剩余的空间，则这个值的大小就关系到主轴剩余空间的分配问题。如果为0，表示该子元素对剩余空间没兴趣，不参与分配；如果大于0，表示有兴趣，需要参与分配，那么第n个子元素最后分配的剩余空间比例就是：flex-grow(n) / (flex-grow(1)+flex-grow(2)+.....flex-grow(n))

注意：

这个放大指的是沿主轴方向变大。比如当主轴为水平时，则放大的是子元素的宽

 flex-grow: <number>; /* default 0 */

在这里插入图片描述

子元素缩小属性

flex-shrink属性定义了子元素的缩小比例，默认为1，即如果空间不足，该子元素将缩小。如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

注意：

这个放大指的是沿主轴方向缩小。比如当主轴为水平时，则缩小的是子元素的宽
如果子元素里面有内容，则不会一直将子元素的宽缩小到0；子元素能够缩小的最小宽度和子元素里面的内容有关
元素的margin不会缩小，就算子元素的宽变为0，margin仍然存在

在这里插入图片描述

子元素固定大小属性

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。它的默认值为auto，即子元素的本来大小。

注意：

浏览器根据这个属性，计算主轴是否有多余空间
它只是一个建议值，并不是绝对的，当主轴的空间不够时，会挤压其它子元素的空间
它可以设为固定的值（比如350px），也可以通过百分比设置值

在这里插入图片描述

子元素单独交叉轴对齐方式

align-self属性允许单个子元素有与其他子元素不一样的交叉轴对齐方式，可覆盖容器的align-items属性。默认值为auto，表示继承容器的align-items属性

值	含义
auto	继承容器的align-items属性（默认）
flex-start	靠近交叉轴起始方向
flex-end	靠近交叉轴尾部方向
center	居中对齐
baseline	子元素的第一行文字的基线对齐
stretch	如果子元素未设置高度或设为auto，将占满整个容器的高度；当交叉轴为水平时，则是宽度

跟容器设置的交叉轴对齐方式一样，这里就不赘述了，举个简单的例子吧：
在这里插入图片描述

huzhenv5

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css —— Flex布局详解

文章目录简介取值display属性容器样式属性列举子元素属性列举容器各属性详解主轴方向主轴对齐方式交叉轴对齐方式交叉轴对齐方式多主轴对齐方式子元素各属性详解子元素排序属性子元素放大属性子元素缩小属性简介Flex 是个非常好用的属性，特别是对多个子元素的排列来说十分的方便，就是它对应的属性非常多，理解起来不是十分的容易，本篇文章将详细介绍Flex的用法；目前各主流浏览器对Flex的支持还算是不错...
复制链接

扫一扫