flex布局的属性及其应用

最新推荐文章于 2024-03-01 15:52:05 发布

秃头桑

最新推荐文章于 2024-03-01 15:52:05 发布

阅读量454

点赞数

文章标签： html5 css3 css Flex

本文链接：https://blog.csdn.net/qq_45052409/article/details/107192245

版权

flex布局也叫弹性布局 作为前端开发中最常用布局之一，它都有那些属性，有哪些特点，让我们来了解一下。

flex布局的优缺点

1.操作方便，布局简单，移动端使用比较广泛
2.PC端支持情况较差
3.IE低版本不支持flex

以前要想把li标签在一行显示时，要给li加浮动，添加浮动后可能会对下面的内容产生影响(很麻烦)。当我们学习了flex布局以后就会发现，原来要想让li在一行显示，并不影响其他元素是这样的simpleness

flex属性

在flex布局中也有X和Y轴
在这里插入图片描述

flex-direction 设置主轴方向

row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

当我们要是用flex布局时，要现在元素的父级添加display:flex属性才可可以使用

justify-content设置主轴上子元素的排列方式

在使用这个属性之前一定要先确认好主轴方向

属性：

flex-start	默认值从头部开始如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间

案例：

让li在一行显示从左到右显示

<style>
        ul {
            display: flex;
            margin: 0;
            padding: 0;
            width: 800px;
            height: 200px;
            list-style: none;
            background-color: blue;
            /* 默认X轴 */
            flex-direction: row;
        }

        li {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

其他的元素同理秩序更改父级元素的代码即可。

flex-wrap设置是否换行

默认情况下，项目都排在一条线上，添加flex-wrap后可以产生换行效果，当我们要做类似表格一样的样式时可以选择添加flex-wrap

nowrap 不换行
wrap 换行

<style>
        ul {
            display: flex;
            margin: 0;
            padding: 0;
            width: 400px;
            height: 200px;
            list-style: none;
            background-color: blue;
            /* 不换行 */
            /* flex-wrap: nowrap; */
            /* 换行 */
            flex-wrap: wrap;
        }

        li {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

align-items设置侧轴上的子元素排列方式

这个属性控制的是侧轴(Y轴)上的排序方式，在这个元素中只增加了一个属性就是拉伸

flex-start	从头部开始
flex-end	从尾部开始
center	居中显示
stretch	拉伸

拉伸案例

<style>
        ul {
            display: flex;
            margin: 0;
            padding: 0;
            width: 600px;
            height: 200px;
            list-style: none;
            background-color: blue;
            justify-content: center;
            /* 拉伸 子盒子不能给高度 拉伸的高度是负极盒子的高度 */
            align-items: stretch;
        }

        li {
            width: 100px;
            /* height: 100px; */
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

align-content设置侧轴上的子元素排列方式

这个和之前的主轴上的子元素排列方式是一样的

flex-start	默认值从侧轴头部开始
flex-end	从侧轴尾部开始排列
center	在侧轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间
stretch	子级元素高度平分父级元素高度

在侧轴居中显示

<style>
        ul {
            display: flex;
            margin: 0;
            padding: 0;
            width: 600px;
            height: 200px;
            list-style: none;
            background-color: blue;
            /* 换行 */
            flex-wrap: wrap;
            /* 子级居中显示 */
            align-content: space-around;

        }

        li {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

秃头桑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
flex布局的属性及其应用

flex布局也叫弹性布局作为前端开发中最常用布局之一，它都有那些属性，有哪些特点，让我们来了解一下。flex布局的优缺点1.操作方便，布局简单，移动端使用比较广泛2.PC端支持情况较差3.IE低版本不支持flex以前要想把li标签在一行显示时，要给li加浮动，添加浮动后可能会对下面的内容产生影响(很麻烦)。当我们学习了flex布局以后就会发现，原来要想让li在一行显示，并不影响其他元素是这样的simplenessflex属性在flex布局中也有X和Y轴flex-direction 设置
复制链接

扫一扫