如何使用flex布局（弹性盒子）

最新推荐文章于 2024-01-23 12:48:53 发布

月吟霜

最新推荐文章于 2024-01-23 12:48:53 发布

阅读量630

点赞数 1

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_46511756/article/details/125266442

版权

给父元素添加display：flex，开启弹性容器。

flex区分主轴与侧轴-----------

可以选择x轴或者y轴作为主轴（默认x为主轴）

更改主轴：flex-direction

flex-direction
row （x）	默认值从左到右依次排列
row-reverse	右到左依次排列 reverse：翻转元素
column（y）	从上到下依次排列
column-reverse	从下到上依次排列

主轴对齐方式：justify-content

justify-content
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
`center`	沿主轴居中排列
space-around	沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	沿主轴均匀排列, 空白间距均分在相邻盒子之间
`space-evenly`	沿主轴均匀排列, 弹性盒子与容器之间间距相等

space-between

space-evenly

space-around

侧轴对齐方式：align-items（单行使用）

align-content（多行使用，单行无效）

单个子项：align-self（单独给某个子盒子在侧轴上的排列）

align-items
flex-start	起点开始依次排列
flex-end	终点开始依次排列
`center`	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

flex伸缩比

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

flex:1; 一定给子盒子加！！！

分配父级剩余的空间

弹性盒子换行：flex-wrap

flex-wrap
Nowrap	默认值不换行
wrap	换行

拓展：圣杯布局

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

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

核心思路：

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

<!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>
        .box {
            width: 100%;
            height: 100px;
            background-color: pink;
            display: flex;
            /* 设置最小缩放宽度 */
            min-width: 800px;
        }
        
        .left,
        .right {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        
        .center {
            text-align: center;
            line-height: 100px;
            flex: 1;
            background-color: blanchedalmond;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="center">1</div>
        <div class="right"></div>
    </div>
</body>

</html>

效果如下