响应式布局-flex弹性盒子

最新推荐文章于 2024-05-14 10:07:52 发布

YANGGEOL

最新推荐文章于 2024-05-14 10:07:52 发布

阅读量877

点赞数

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

本文链接：https://blog.csdn.net/qq_46253184/article/details/119253736

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

Flex

相关参数

display: flex; 决定flex布局

flex-direction：子元素在父盒子中的排列方式
1. row：默认值。按从左到右的顺序显示   2. row-reverse：与row相同，但是顺序相反
3. column：锤子显示，从上到下        4. column-reverse: 与column相同，但是顺序相反

flex-wrap：子元素在父元素盒子中是否换行(列)
1. nowrap：默认值。不换行或不换列        2. wrap：换行或换列
3. wrap-reverse：换行或换列，但以相反的顺序

flex-flow：flex-direction和flex-wrap简写的形式
语法：flex-flow: <flex-direction> || <flex-wrap>

justify-content：用来在存在剩余空间时，设置为间距的方式
1. flex-start：默认值。从左到右，挨着行的开头               2. flex-end：从右到坐，挨着行的结尾
3. center：居中显示                                     4. space-between：平均分布在该行上，两边不留隔空间
5. space-around：平均分布在该行上，两边留有一半的间隔空间

align-items：控制每个flex元素在交叉轴上的默认对齐方式
1. flex-start：默认值。位于容器的的开头               2. flex-end：位于容器的结尾
3. center：居中显示   

align-content: 设置每个flex元素在交叉轴上的默认对齐方式
1. flex-start：位于容器的的开头                    2. flex-end：位于容器的结尾
3. center：位于容器的中心                          4. space-between：平之间留有空白
5. space-around：两端留有空白

flex-basis：设置弹性盒伸缩基准值
flex-grow：设置弹性盒子的扩展比率
flex-shrink：设置弹性盒子的缩小比率
flex：felx-grow，flex-shrink，flex-basis的缩小

简写
flex: auto;    =    flex: 1 1 auto
flex: none;    =    flex: 0 0 auto
flex: 0%;      =    flex: 1 1 0%
flex: 100px;   =    flex: 1 1 100px
flex: 1;       =    flex: 1 1 0%

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="./zig.css">
    <style>
        #s{
            width: 500px;
            height: 400px;
            background-color: cornflowerblue;
            display: flex;
            /* flex-direction: row-reverse;
            flex-wrap: wrap; */
            flex-flow: row-reverse wrap;
            justify-content: space-between;
            align-items: center;
        }

        #s div {
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        #s div:nth-child(1) {
            background-color: crimson;
        }

        #s div:nth-child(2) {
            background-color: salmon;
        }

        #s div:nth-child(3) {
            background-color: slateblue;
        }

        #s div:nth-child(4) {
            background-color: springgreen;
        }

    </style>
</head>
<body>
    <div id="s">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

YANGGEOL

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
响应式布局-flex弹性盒子

Flex相关参数display: flex; 决定flex布局flex-direction：子元素在父盒子中的排列方式1. row：默认值。按从左到右的顺序显示 2. row-reverse：与row相同，但是顺序相反3. column：锤子显示，从上到下 4. column-reverse: 与column相同，但是顺序相反flex-wrap：子元素在父元素盒子中是否换行(列)1. nowrap：默认值。不换行或不换列 2. wrap：换行或换列3. w
复制链接

扫一扫

专栏目录