css弹性布局的总结与分享

最新推荐文章于 2024-06-24 09:50:33 发布

JustinST

最新推荐文章于 2024-06-24 09:50:33 发布

阅读量184

点赞数 2

文章标签： flex html css

本文链接：https://blog.csdn.net/JustinST/article/details/119718442

版权

1、display:flex; 伸缩盒布局：容器、元素

弹性伸缩比例、自动留白间隙、手机端

1、flex容器(父元素)：display:flex（默认x为主轴）

排列方式（flex-direction: row （列布局） //x轴：主轴 y:交叉轴）

（flex-direction: column （行布局 //y轴：主轴 x:交叉轴）

换行： flex-wrap: nowrap; (默认不换行)

flex-wrap: wrap; （自动换行）

flex容器的属性：

html代码：

<!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>flex布局</title>
<link rel="stylesheet" href="flex.css">
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>
</html>

css代码：没有设置display: flex;时

/*无布局*/
.parent{
    height: 300px;
    border: 2px solid red;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
}

图：

.parent{
    height: 300px;
    border: 2px solid red;
    /*布局设置*/
    display: flex;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
}

默认主轴X轴的对齐方式如下：

.parent{
    height: 300px;
    border: 2px solid red;
    /*布局设置*/
    display: flex;
    /*左对齐*/
    justify-content: flex-start;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

.parent{
    height: 300px;
    border: 2px solid red;
    /*布局设置*/
    display: flex;
    /*右对齐*/
    justify-content: flex-end;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

.parent{
    height: 300px;
    border: 2px solid red;
    /*布局设置*/
    display: flex;
    /*居中对齐*/
    justify-content: center;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

.parent{
    height: 600px;
    border: 2px solid red;
    display: flex;
/*两端对齐，项目之间的间隔都相等*/
    justify-content: space-between;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

.parent{
    height: 600px;
    border: 2px solid red;
    display: flex;
    /*每个项目两侧的间隔相等,项目中间的间距 = 2 * 左右边缘的间距*/
    justify-content: space-around;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

默认交叉轴y轴的对齐方式如下：

.parent{
    height: 600px;
    border: 2px solid red;
    display: flex;
    /*交叉轴下对齐*/
    align-items: flex-end；
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

.parent{
    height: 300px;
    border: 2px solid red;
    /*布局设置*/
    display: flex;
    /*交叉轴y上对齐*/
    align-items: flex-start;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

.parent{
    height: 600px;
    border: 2px solid red;
    display: flex;
    /*交叉轴居中对齐*/
    align-items: center；
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

.parent{
    height: 600px;
    border: 2px solid red;
    display: flex;
/*与第一行文字的基线对齐*/
    align-items: baseline;
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    
}

.child:nth-child(1){
    padding-top: 30px;
}

flex元素的属性：

flex-grow：默认为0，即如果存在剩余空间，也不放大。

.parent{
    height: 600px;
    border: 2px solid red;
    display: flex;
    
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    flex-grow: 1;
}

.parent{
    height: 600px;
    border: 2px solid red;
    display: flex;
    
}
.child{
    height: 200px;
    width: 200px;
    background-color: salmon;
    flex-grow: 1;
}
.child:nth-child(1){
    flex-grow: 2;
/*1占二份*/
}

flex-shrink的参数指定弹性收缩，默认为1，即如果空间不足，该项目将缩小

flex-shrink:0; 不缩小

flex-basis 属性级别高于width

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性

总结：结合项目进行应用才能有更好的掌握和熟悉，初学多练才更有成效。

JustinST

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css弹性布局的总结与分享

1、display:flex; 伸缩盒布局：容器、元素弹性伸缩比例、自动留白间隙、手机端使用条件：1、父元素不能overflow:hidden或者overflow:auto属性。2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位3、父元素的高度不能低于sticky元素的高度4、sticky元素仅在其父元素内生效Flex ： flex-grow，flex-shrink，flex-basis。flex:1 2 200px;...
复制链接

扫一扫