CSS3 の flex弹性布局

阮小航

于 2024-06-01 22:13:58 发布

阅读量1.5k

点赞数 24

文章标签： css3 css 前端 html

本文链接：https://blog.csdn.net/2301_80293400/article/details/139380588

版权

弹性(flex)布局

布局原理

弹性布局也就是使用弹性盒子(display=flex)的布局

任何一个盒子都可以是弹性盒子

当父盒子设置为弹性盒后，子元素的float、clear、vertical-align属性会失效

弹性盒子称为flex容器，它的子元素称为flex项目，子元素可以横向或者纵向排列

总结一下大概就是通过设置父盒子为弹性盒，来控制子盒子的位置与排列方式

父盒子常见属性

flex-direction

设置主轴的方向

取值：
row(行)
row-reverse(行反向)
column(列)
column-reverse(列反向)

子元素是按照主轴的方向进行排列的

justify-content

设置子元素在主轴上的排列方式

取值：
flex-strat 默认从头部开始
flex-end 从尾部开始
center 在主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边，再平分中间

flex-wrap

设置子元素是否换行

取值：
nowrap 默认，不换行（不换行时，如果一行放不下了，子盒子会被压缩，强行挤到一行）
wrap 换行

align-content

设置子元素在侧轴上的排列方式

在子元素多行时使用，单行下没有作用

取值：
flex-strat 默认从头部开始
flex-end 从尾部开始
center 在侧轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边，再平分中间

align-items

设置子元素在侧轴上的排列方式

在子元素为单行时使用

取值：
flex-strat 默认从头部开始
flex-end 从尾部开始
center 在主轴居中对齐
stretch 拉伸，将子盒子拉伸到与父盒子一样高（子盒子不要设置高度）

flex-flow

是flex-direction & flex-wrap 的复合属性

先写 flex-direction 的值再写 flex-wrap 的值

子盒子常见属性

flex

定义子盒子分配多少剩余空间，用flex表示多少份数

三栏布局（圣杯布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 100%;
            height: 300px;
            background-color: #ccc;
            margin: 0 auto;
        }
        span:nth-last-child(1){
            width: 150px;
            background-color: #6cf;
        }
        span:nth-child(1)
        {
            width: 150px;
            background-color: #008c8c;
        }
        span:nth-child(2)
        {
            flex: 1;
        }
        /* 左右两边的盒子都定宽，然后中间的盒子flex设置为1，分配剩余空间也就是全部（总共一份，得到一份），所以中间盒子的宽度就是剩下的宽度，所以可以随意放缩 */
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

中间的盒子为左右两边的两倍的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 100%;
            height: 300px;
            background-color: #ccc;
            margin: 0 auto;
        }
        span:nth-last-child(1){
            flex: 1;
            background-color: #6cf;
        }
        span:nth-child(1)
        {
            flex: 1;
            background-color: #008c8c;
        }
        span:nth-child(2)
        {
            flex: 2;
        }
        /* 这样中间的盒子宽度是左右的两倍，因为没有盒子定宽，所以剩余空间就是全部，flex的总数是4，左右各为1，中间为2，所以左右为1/4，中间为2/4 */
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>