前端小白刚学习的flex布局分享给大家

最新推荐文章于 2024-06-07 09:03:10 发布

YJ_YJ_YJ_

最新推荐文章于 2024-06-07 09:03:10 发布

阅读量349

点赞数 3

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/YJ_YJ_YJ_/article/details/127199786

版权

flex布局:

flex布局也叫做弹性布局(操作父亲管理儿子),好处在于能快速的进行盒子布局,减少编写的代码量,让内容看起来更整洁

flex布局的组成部分:

1.父元素弹性容器

2.子盒子弹性盒子

3.主轴(默认是x轴)

4.侧轴/交叉轴(默认是y轴)

flex布局的display:flex是添加给需要变成弹性容器的父元素的,此时的子盒子会变成弹性盒子,哪怕是行内元素也可以设置宽高

<!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: 1200px;
            height: 300px;
            border: 1px solid #000;
            /* 弹性容器 */
            display: flex;
            /* 主轴对齐方式   */
            justify-content: space-around;
        }
        .box div{
            /* 弹性盒子   默认在一行排列 */
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        /* flex布局:弹性布局(操作父亲管理儿子)
        组成部分: 
        1.父元素  弹性容器
        2.子盒子  弹性盒子
        3.主轴(默认是x轴)
        4.侧轴/交叉轴(默认是y轴)*/
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

flex布局的主轴排列方式(默认x轴):justify-content 快捷键 jc

有以下六种排列方式:

1.从左到右,起点开始排列盒子:justify-content: flex-start;

2.从右到左终点开始排列盒子:justify-content: flex-end;

3.盒子水平居中(重点):justify-content: center;

4.盒子自适应,按照1:2的比例分布:justify-content: space-around;

5.两边靠边,中间自适应(重点): justify-content: space-between;

6.盒子自适应盒子中间的距离1:1平均分:justify-content: space-evenly;

<!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: 1200px;
            height: 300px;
            border: 1px solid #000;
            /* 弹性容器 */
            display: flex;
            /* 主轴对齐方式  快捷键jc */
            /* 从左到右,起点开始排列盒子 */
            justify-content: flex-start;
            /* 从右到左  终点开始排列盒子 */
            justify-content: flex-end;
            /* 盒子水平居中  重点 */
            justify-content: center;
            /* 盒子自适应,按照1:2的比例分布 */
            justify-content: space-around;
            /* 两边靠边,中间自适应   重点 */
            justify-content: space-between;
            /* 盒子自适应  盒子中间的距离1:1平均分 */
                
        }
        .box div{
            /* 弹性盒子   默认没有元素之分 */
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

flex布局侧轴排列方式(默认y轴):align-items 快捷键ai

有以下四种排列方式:

1.从上往下排列盒子:align-items: flex-start;

2.从下往上排列盒子 :align-items: flex-end;

3.盒子垂直居中(重点):align-items: center;

4.默认值拉伸:align-items: stretch;

<!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: 1200px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
            /* 弹性容器 */
            display: flex;
            /* 侧轴对齐方式  快捷键ai */

            /* 从上往下排列盒子 */
            align-items: flex-start;
            /* 从下往上排列盒子 */
            align-items: flex-end;
            /* 盒子垂直居中   重点 */
            align-items: center;
            /* 默认值   拉伸 */
            align-items: stretch;
        }
        /* 弹性盒子 */
        .box div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .box div:nth-child(2){
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

讲一个小案例:圣杯布局

圣杯布局就是给两边盒子固定住,中间的盒子添加flex:数值;使中间盒子平分父元素剩余的宽度

两边盒子固定,中间盒子自适应

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1000px;
            height: 50px;
            background-color: pink;
            display: flex;
        }
        .left,
        .right{
            width: 50px;
            height: 50px;
            background-color: aqua;
        }
        .center{
            /* 平分父盒子多余宽度 */
            flex: 1;
            height: 50px;
            background-color: red;
        }
        /* 注意点:两边盒子要固定,中间自适应 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

还有改变主轴方向的flex-direction属性和弹性盒子换行的flex-wrap属性咱们明天学了再讲

flex-direction属性可以改变元素排列方向

flex-wrap属性可以实现弹性盒子多行排列效果