css(2)flex弹性布局总结

最新推荐文章于 2023-05-15 21:38:47 发布

Elinkers

最新推荐文章于 2023-05-15 21:38:47 发布

阅读量252

点赞数

分类专栏： css 文章标签： css css3 flex html

本文链接：https://blog.csdn.net/Echianer/article/details/112463590

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言
一、display:flex
二、弹性盒子模型
总结

前言

布局这块，一直有点不是很熟，还是得做一个详细的总结
参考文档MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

一、display:flex

在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>
        .flex{
            padding: 25px 25px;
            width: 500px;
            height: 250px;
            background-color: black;
            display: flex;
        }

        .red{
            height: 50%;
            width: 50%;
            background-color: red;
        }

        .blue{
            height: 50%;
            width: 50%;
            background-color: blue;
        }

        .yellow{
            height: 50%;
            width: 50%;
            background-color: yellow;
        }

    </style>
</head>


<body>
    <div class="flex">
        <div class="red"></div>
        <div class="blue"></div>
        <div class="yellow"></div>
    </div>
</body>
</html>

这里贴一段html可以参考，我们的都是在父元素(也就是flex)，添加css属性

二、弹性盒子模型

在弹性盒子模型的布局中，我们通常运用弹性属性合理规定子元素的形状，并且能有效避免子元素溢出。除此之外我们还运用对齐属性影响布局。

一、css弹性属性

1.flex-flow(在父元素设置)

flex-flow: <'flex-direction'> || <'flex-wrap'>

由flex-direction和flex-wrap组合成的参数，以下分别介绍

1.flex-direction

flex-direction: row | row-reverse | column | column-reverse

修改flex的布局方向，默认为row

row：从左往右按照子元素横排列
row-reverse：从右往左按照子元素横排列
column：从上到下按子元素排列
column-reverse：从下到上按子元素排列

2.flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse

修改flex的排列，默认为nowrap

nowrap：一列排列
wrap：如果一列超过所有子元素宽度/高度和，则转到下一列
wrap-reverse：从下到上/从右到左排列

2.flex(在子元素设置)

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

由flex-grow和flex-shrink和flex-basis组合成的参数，以下分别介绍

1.flex-grow

flex-grow: <number>

仅在各子元素宽度/高度之和小于盒子生效，根据各自的flex-grow值百分比占比伸展满盒子布局，默认0

2.flex-shrink

flex-shrink: <number>

仅在各子元素宽度/高度之和大于盒子生效，根据各自的flex-shrink值百分比占比收缩进盒子布局，默认1

3.flex-basis

flex-basis: content | <'width'>

指定了 flex 元素在主轴方向上的初始大小

会根据flex-direction，如果与width和height同时存在会进行覆盖

二、alignment对齐属性(在父元素设置)

1.justify-content

justify-content: center|start|end|baseline|space-evenly|space-between

属性定义了浏览器之间，如何分配顺着弹性容器主轴的元素之间及其周围的空间

center：居中排列
start：从起始位置开始排列
end：从末尾位置开始排列
baseline：沿着主轴排列
space-evenly：均匀排列每个元素，每个元素之间的间隔相等
space-between：均匀分布项目第一项与起始点齐平，最后一项与终止点齐平
更多的属性值参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content

2.align-content

align-content: center|start|end|baseline|space-evenly|space-between

属性定义了浏览器之间，如何分配顺着弹性容器交叉轴的元素之间及其周围的空间
center：居中排列
start：从起始位置开始排列
end：从末尾位置开始排列
baseline：沿着主轴排列
space-evenly：均匀排列每个元素，每个元素之间的间隔相等
space-between：均匀分布项目第一项与起始点齐平，最后一项与终止点齐平
更多的属性值参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content

总结

常用flex属性总结，个人学习记录，每天进步多一点

Elinkers

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css(2)flex弹性布局总结

文章目录前言一、display:flex二、弹性盒子模型一、css弹性属性1.引入库二、alignment对齐属性2.读入数据总结前言布局这块，一直有点不是很熟，还是得做一个详细的总结一、display:flex在flex布局下，元素活动类似于块元素，其布局参考弹性盒子模型二、弹性盒子模型在弹性盒子模型的布局中，我们通常运用弹性属性合理规定子元素的形状，并且能有效避免子元素溢出。除此之外我们还运用对齐属性影响布局。一、css弹性属性1.引入库二、alignment对齐属性代码如下（.
复制链接

扫一扫