CSS Flex布局属性讲解

最新推荐文章于 2024-04-03 04:09:23 发布

大鸡腿123

最新推荐文章于 2024-04-03 04:09:23 发布

阅读量269

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yiersan__/article/details/107788636

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

flexbox弹性盒子是当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，即响应式设计。

Flex

弹性容器属性
弹性子元素属性

弹性容器属性

display

在弹性盒子中，弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            background-color: rebeccapurple;
            width: 500px;
            height: 500px;
        }
        .item{
            background-color: burlywood;
            width: 30%;
            height: 30%;
            margin: 10px;
        }
    </style>
</head>
<body>
    <script src="text.js"></script>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

得到的效果是：
在这里插入图片描述

可以发现，div的默认排列方式就是从上到下。那么我们如果想要他们在一行内显示怎么办？这时我们就可以用到display:flex

.container{
            background-color: rebeccapurple;
            width: 500px;
            height: 500px;
            display: flex;
        }

在这里插入图片描述
这时container就变成了一个弹性容器，三个div也变成了弹性子元素

flex-direction

flex-direction指定了弹性子元素在父容器中的位置。

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

我们给.container分别加上样式：
row:
在这里插入图片描述
row-reverse：

column：

column-reverse：

flex-direction属性只有加在加了display：flex属性的弹性容器上才有效，因为他是定义弹性子元素在父容器的位置。如果给.item加上，没有效果。

justify-content

justify-content也是需要应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐。

flex-start：弹性项目向行头紧挨着填充。
flex-end：弹性项目向行尾紧挨着填充。
center：弹性项目居中紧挨着填充。
space-between：弹性项目平均分布在该行上。
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

给.container加上样式：
把一些样式大小稍微改了改，看的更清楚。
flex-start：
在这里插入图片描述

flex-end：
在这里插入图片描述

center：
在这里插入图片描述

space-between：
在这里插入图片描述

space-around：
在这里插入图片描述

align-items

align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

stretch：默认值，如果没有设置弹性子元素的高度，则子元素的高度会尽可能接近所在行的尺寸。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：
我们把.item的高度去掉：
在这里插入图片描述
flex-start：

flex-end：
在这里插入图片描述

center：
在这里插入图片描述

baseline：
在这里插入图片描述

flex-wrap

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

nowrap ： 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap ：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse ：反转 wrap 排列。

我们再次修改样式：

        .container{
            background-color: rebeccapurple;
            width: 500px;
            height: 500px;
            display: flex;
        }
        .item{
            background-color: burlywood;
            width: 200px;
            height: 200px;
            margin: 5px;
            text-align: center;
            font-size: 20px;
        }

nowrap：
在这里插入图片描述

wrap：
在这里插入图片描述

wrap-reverse：
在这里插入图片描述

align-content

align-content属性用于修改 flex-wrap 属性的行为,设置各个行的对齐。

align-content也有justify-content的各个属性，其含义和用法都是一样的。
align-content还有一个默认属性stretch，他和align-items的stretch是一样的，但不过是宽度伸展。

这种情况下子元素需要纵向排列,并且需要flex-wrap属性：

        .container{
            background-color: rebeccapurple;
            width: 500px;
            height: 1000px;
            display: flex;
            align-content: stretch;
            flex-direction: column;
            flex-wrap:wrap;
        }

stretch：
在这里插入图片描述

flex-start:
在这里插入图片描述

flex-end:
在这里插入图片描述

center:
在这里插入图片描述

space-between:
在这里插入图片描述

space-around:
在这里插入图片描述
上面的属性都是在弹性容器内写的定义的弹性子元素的属性。
接下来我们说弹性子元素中写的属性。

弹性子元素属性

order

order:整数值
定义排列顺序，默认为0

.first{
     order: 0;
}
<div class="item first">2</div>

在这里插入图片描述

        .first{
            order: -1;
        }

在这里插入图片描述

        .first{
            order: 1;
        }

在这里插入图片描述
两个元素的order一样，按照html中的顺序来。

居中

我们之前写代码的时候，总是会遇到水平垂直居中问题。
在弹性子元素内写上margin：auto 会全部居中

        .item{
            background-color: burlywood;
            width: 20%;
            height: 20%;
            margin: 5px;
            text-align: center;
            font-size: 20px;
            margin: auto;
        }

在这里插入图片描述

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

我们把.item的宽度去掉：

        .container{
            background-color: rebeccapurple;
            width: 500px;
            height: 500px;
            display: flex;
        }
        .container div{
            background-color: burlywood;
            width: 20%;
            margin: 5px;
            text-align: center;
            font-size: 20px;
        }
        .item1{
            align-self: auto;
        }
        .item2{
            align-self: flex-start;
        }
        .item3{
            align-self: flex-end;
        }
        .item4{
            align-self: center;
        }
        .item5{
            align-self: baseline;
        }
        .item6{
            align-self: stretch;
        }

    <div class="container">
        <div class="item1">auto</div>
        <div class="item2">flex-start</div>
        <div class="item3">flex-end</div>
        <div class="item4">center</div>
        <div class="item5">baseline</div>
        <div class="item6">stretch</div>
    </div>

在这里插入图片描述
我们给container加上align-items: center;

弹性子元素align-self设置为auto，此时父元素的align-items设置为center，则子元素跟父元素相同。

flex

flex 属性用于指定弹性子元素如何分配空间。

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

大鸡腿123

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS Flex布局属性讲解

flexbox弹性盒子是当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，即响应式设计。Flex弹性容器属性displayflex-directionjustify-contentalign-itemsflex-wrapalign-content弹性子元素属性order居中align-selfflex弹性容器属性display在弹性盒子中，弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值
复制链接

扫一扫