flex布局

最新推荐文章于 2023-10-13 17:16:41 发布

她还会来吗

最新推荐文章于 2023-10-13 17:16:41 发布

阅读量166

点赞数 1

分类专栏： # CSS3

本文链接：https://blog.csdn.net/m0_53895172/article/details/115474979

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

flex布局

传统布局与flex布局

传统布局:

兼容性好
布局繁琐
局限性,不能在移动端很好的布局

flex弹性布局:

操作方便，布局极为简单,移动端应用广泛
PC端浏览器支持情况较差
IE11或更低版本,不支持或仅部分支持

flex布局原理

当我们为父盒子设为flex布局以后,子元素的float，clear和vertical-align属性将失效。

总结:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

常见属性

常见父属性

flex-direction:设置主轴的方向
默认的主轴方向为x轴,那么其余的为侧轴

/* 设置主轴we为y轴 */
flex-direcction:column;

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

/*使用该属性前必须要先确定主轴*/
/* 从尾部排列 */
justify-content:flex-end;

/*子元素居中对齐*/
justify-content:center;

/*平分剩余空间*/
justify-content:space-around;

/*先两边贴边,后分配剩余空间*/
justify-content:space-between;

flex-wrap:设置子元素是否换行

/* flex布局时,默认的子元素是不换行的,如果要装不开,会所缩小子元素的宽度,放到父元素里面 */

/* 不换行 */
flex-wrap:nowarp;
/* 换行 */
flex-wrap:warp;

flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
align-content:设置侧轴上的子元素的排列方式(多行)

/* 设置子项在侧轴的上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果 */

align-items:设置侧轴上的子元素排列方式(单行)

align-content和align-items的区别

align-items适用于单行的情况下,只有上对齐，下对齐，居中和拉伸
align-content适应于换行(多行)的情况下,可以设置上对齐,下对齐,居中，拉伸以及平均分配剩余空间等属性值
总结就是单行找align-items多行找align-content

flex子项属性

flex 在剩余空间中子项目占的份数

flex:<number>;

align-self 控制子项在自己侧轴的排列方式

/* align-self属性允许单个项目有与其他项目不一样的对齐方式,
可覆盖align-items属性，默认值为auto,表示继承父元素的align-items属性,
如果没有父元素,则等同于stretch */

order属性定义子项的排列顺序(前后顺序)

/*数值越小,排列越靠前,默认为零 */
order: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>Document</title>
    <style>
        div{
            /*弹性布局*/
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /*主轴子元素居中排列*/
            justify-content: center;
            /*侧轴子元素居中排列*/
            align-items: center;
        }
        div span{
            width: 100px;
            height: 100px;
            background-color: purple;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果展示:
在这里插入图片描述

她还会来吗

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
flex布局

flex布局传统布局与flex布局传统布局:兼容性好布局繁琐局限性,不能在移动端很好的布局flex弹性布局:操作方便，布局极为简单,移动端应用广泛PC端浏览器支持情况较差IE11或更低版本,不支持或仅部分支持flex布局原理当我们为父盒子设为flex布局以后,子元素的float，clear和vertical-align属性将失效。总结:就是通过父盒子tianjiaflex属性,来控制子盒子的位置和排列方式常见属性常见父属性flex-direction:设置主轴的方向
复制链接

扫一扫