弹性盒子布局

最新推荐文章于 2024-06-12 09:52:12 发布

Ltang.

最新推荐文章于 2024-06-12 09:52:12 发布

阅读量552

点赞数 1

文章标签： css css3 html Powered by 金山文档

本文链接：https://blog.csdn.net/m0_75021294/article/details/129486766

版权

文章详细介绍了Flex布局的使用，包括如何设置display:flex，主轴对齐方式如justify-content:space-between、center等，侧轴对齐方式如align-items:center，以及伸缩比的概念和应用。此外，还讲解了圣杯布局的实现方法和flex-direction、flex-wrap属性的作用，强调了Flex布局的优势和在某些场景下的兼容性问题。

摘要由CSDN通过智能技术生成

flex布局

flex布局极大的提高了我们布局的效率，更简单、灵活

语法：display:flex;一定要给父元素添加。

主轴对齐方式

重点记住标红的。常用的是

justify-content: space-between;

显示效果：两侧没缝隙

justify-content: space-around;

显示效果：按1：2进行排列

justify-content: space-evenly;

显示效果：缝隙与两侧空隙按1：1进行排列

justify-content: center;

显示效果：经常用于让一个盒子水平居中

记忆：

两侧缝隙是between

缝隙一样大是evenly

2倍缝隙是around

小技巧：

见到这个效果，做简单的做法就是：给大盒子左右的padding，然后再加

justify-content: space-between

侧轴对齐方式

重点记住center，可以让元素垂直居中。

align-items: center;

我们可以通过flex让一个盒子水平和垂直居中。

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加
分配父级剩余的空间

语法：

flex: 1;

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1；此时每个子盒子各占三分之一。

.father {
    display: flex;
    height: 300px;
    background-color: pink;
}

.father div {
    /* 每个孩子各占1份 */
    flex: 1;
    /* 默认子盒子和父亲一样高 */
    background: purple;
}

html 结构

<div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

显示效果：

1.一定要给子盒子添加。
2.子盒子默认高度会和父盒子一样高。（前提是不给高度）

圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

核心思路：

两侧盒子写固定大小

中间盒子 flex: 1; 占满剩余空间

.top {
    display: flex;
    justify-content: c;
}

.top div:first-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:last-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:nth-child(2) {
    flex: 1;
    height: 50px;
    background-color: pink;
}

注意点：中间flex: 1; 和 width 有冲突。优先执行 flex：1；