Flex布局

最新推荐文章于 2024-05-05 09:59:46 发布
Merlin~
最新推荐文章于 2024-05-05 09:59:46 发布
阅读量675
点赞数
分类专栏： css 文章标签： flex 布局
本文链接：https://blog.youkuaiyun.com/qq_25804071/article/details/70789276
版权
css 专栏收录该内容
2 篇文章
订阅专栏
Flex布局

先写个教程。
flex布局教程；
demo地址；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        div {
            background-color: #dddddd;
            border-radius: 5px;
            border: 1px solid #000;
            margin: 10px;
        }

        .bgc1 {
            background-color: #aaaaaa;
        }

        .bgc2 {
            background-color: #888;
        }

        .block {
            width: 100px;
            height: 100px;
        }
        .block2 {
            width: 80px;
            height: 80px;
        }
        .block3 {
            width: 60px;
            height: 60px;
        }
        .flex {
            /*声明flex*/
            display: flex;
            display: -webkit-flex;
        }

        .flex-inline {
            /*声明inline-flex*/
            display: inline-flex;
            display: -webkit-inline-flex;
        }

        .flex-direction-row {
            /*声明flex排列方向为横排起点在左*/
            flex-direction: row;
        }

        .flex-direction-row-reverse {
            /*声明flex排列方向为横排起点在右*/
            flex-direction: row-reverse;
        }

        .flex-direction-column {
            /*声明flex排列方向为竖排起点在上*/
            flex-direction: column;
        }

        .flex-direction-column-reverse {
            /*声明flex排列方向竖排起点在下*/
            flex-direction: column-reverse;
        }

        .flex-wrap-nowrap {
            /*声明flex装不开时不换行换行*/
            /*当装不开时会挤压内部元素，知道实在装不开，就被挤压出来*/
            flex-wrap: nowrap;
        }

        .flex-wrap-wrap {
            /*声明flex装不开时进行换行换的行比第一行靠后*/
            /*很像  float 但是完全不一样，这个会随着felx的其他属性表现的和float差很多*/
            flex-wrap: wrap;

        }

        .flex-wrap-wrap-reverse {
            /*声明flex装不开时进行换行换的行比第一行靠前*/
            flex-wrap: wrap-reverse;
        }

        .flex-flow {
            /*声明flex的direction和wrap的简写属性*/
            flex-flow: nowrap row-reverse;
        }

        .justify-content-flex-start {
            /*声明flex的ontent-flex-start 按照主轴由向起点靠拢*/
            justify-content: flex-start;
        }

        .justify-content-flex-end {
            /*声明flex的ontent-flex-start 按照主轴向终点靠拢*/
            justify-content: flex-end;
        }

        .justify-content-center {
            /*声明flex的ontent-flex-start 按照主轴向中心靠拢*/
            justify-content:center;
        }

        .justify-content-space-between {
            /*声明flex的ontent-flex-start 按照主轴每个元素平分后相距最远相当于只有和所有子元素之间有margin*/
            justify-content: space-between;
        }
        .justify-content-space-around {
            /*声明flex的ontent-flex-start 按照主轴每个元素平分空间类似左右都有对等的margin*/
            justify-content: space-around;
        }

        .text {
            font-size: 2em;
            line-height: 100px;
            text-align: center;
            margin:0;
        }
        .text2 {
            font-size: 2em;
            line-height: 80px;
            text-align: center;
            margin:0;
        }
        .text3 {
            font-size: 2em;
            line-height: 60px;
            text-align: center;
            margin:0;
        }
    </style>
</head>
<body>
<h1>flex基础状况</h1>
<div class="flex">
    <div class="block bgc1 ">
    </div>
    <div class="block bgc2">

    </div>
</div>
<h1>inline-flex状况</h1>
<div class="flex-inline">
    <div class="block bgc1 ">
    </div>
    <div class="block bgc2">

    </div>
</div>
<h1>
    flex横排正序
</h1>
<div class="flex flex-direction-row">
    <div class="block bgc1 ">
    </div>
    <div class="block bgc2">

    </div>
</div>
<h1>
    flex横排倒序
</h1>
<div class="flex flex-direction-row-reverse">
    <div class="block bgc1 ">
    </div>
    <div class="block bgc2">

    </div>
</div>
<h1>
    flex竖排正序
</h1>
<div class="flex flex-direction-column">
    <div class="block bgc1 ">
    </div>
    <div class="block bgc2">

    </div>
</div>
<h1>
    flex竖排倒序
</h1>
<div class="flex flex-direction-column-reverse">
    <div class="block bgc1 ">
    </div>
    <div class="block bgc2">

    </div>
</div>

<h1>
    flex竖排倒序
</h1>
<div class="flex flex-direction-column-reverse">
    <div class="block bgc1 ">
    </div>
    <div class="block bgc2">

    </div>
</div>
<h1>
    flex竖排倒序
</h1>
<div class="flex flex-direction-column-reverse">
    <div class="block bgc1 ">
    </div>
    <div class="block bgc2">

    </div>
</div>
<h1>
    flex横排正序，单行
</h1>
<div class="flex flex-direction-row flex-wrap-nowrap">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
</div>
<h1>
    flex横排正序，多行正排
</h1>
<div class="flex flex-direction-row flex-wrap-wrap">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
</div>
<h1>
    flex横排正序，多行反排
</h1>
<div class="flex flex-direction-row flex-wrap-wrap-reverse">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
</div>
<h1>
    flex横排正序，向起点集中
</h1>
<div class="flex flex-direction-row justify-content-flex-start">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>

</div>
<h1>
    flex横排正序，向终点集中
</h1>
<div class="flex flex-direction-row justify-content-flex-end">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>

</div>
<h1>
    flex横排正序，向中间集中
</h1>
<div class="flex flex-direction-row justify-content-center">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>

</div>
<h1>
    flex横排正序，向平分距离
</h1>
<div class="flex flex-direction-row justify-content-space-between">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>

</div>
<h1>
    flex横排正序，平分空间
</h1>
<div class="flex flex-direction-row justify-content-space-around">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>

</div>

<h1>
    flex横排正序，平分空间
</h1>
<div class="flex flex-direction-row justify-content-space-around">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>

</div>
<h1>
    flex横排正序，交叉轴上上对其
</h1>
<div class="flex flex-direction-row " style="align-items:flex-start;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block2 bgc2">
        <p class="text2">2</p>
    </div>
    <div class="block3 bgc1 ">
        <p class="text3">3</p>
    </div>
</div>
<h1>
    flex横排正序，交叉轴上下对其
</h1>
<div class="flex flex-direction-row " style="align-items:flex-end;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block2 bgc2">
        <p class="text2">2</p>
    </div>
    <div class="block3 bgc1 ">
        <p class="text3">3</p>
    </div>
</div>
<h1>
    flex横排正序，交叉轴上中对齐
</h1>
<div class="flex flex-direction-row " style="align-items:center;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block2 bgc2">
        <p class="text2">2</p>
    </div>
    <div class="block3 bgc1 ">
        <p class="text3">3</p>
    </div>
</div>

<h1>
    flex横排正序，交叉轴上没有控制大小时平铺拉伸
</h1>
<div class="flex flex-direction-row " style="align-items:stretch;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block2 bgc2">
        <p class="text2">2</p>
    </div>
    <div class="block3 bgc1 ">
        <p class="text3">3</p>
    </div>
</div>
<h1>
    flex横排正序，交叉轴上文字对齐
</h1>
<div class="flex flex-direction-row " style="align-items:baseline;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block2 bgc2">
        <p class="text2">2</p>
    </div>
    <div class="block3 bgc1 ">
        <p class="text3">3</p>
    </div>
</div>
<h1>
    flex横排正序，多排交叉轴向对齐
</h1>
<div class="flex flex-direction-row flex-wrap-wrap" style="align-content:flex-start; height:380px;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
    <div class="block bgc1 "><p class="text">12</p>
    </div>
    <div class="block bgc2"><p class="text">13</p>

    </div>
    <div class="block bgc1 "><p class="text">14</p>
    </div>
    <div class="block bgc2"><p class="text">15</p>

    </div>
    <div class="block bgc1 "><p class="text">16</p>
    </div>
</div>
<h1>
    flex横排正序，多排交叉轴向结束端对齐
</h1>
<div class="flex flex-direction-row flex-wrap-wrap" style="align-content:flex-end; height:380px;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
    <div class="block bgc1 "><p class="text">12</p>
    </div>
    <div class="block bgc2"><p class="text">13</p>

    </div>
    <div class="block bgc1 "><p class="text">14</p>
    </div>
    <div class="block bgc2"><p class="text">15</p>

    </div>
    <div class="block bgc1 "><p class="text">16</p>
    </div>
</div>
<h1>
    flex横排正序，多排交叉轴向中心对齐
</h1>
<div class="flex flex-direction-row flex-wrap-wrap" style="align-content:center; height:380px;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
    <div class="block bgc1 "><p class="text">12</p>
    </div>
    <div class="block bgc2"><p class="text">13</p>

    </div>
    <div class="block bgc1 "><p class="text">14</p>
    </div>
    <div class="block bgc2"><p class="text">15</p>

    </div>
    <div class="block bgc1 "><p class="text">16</p>
    </div>
</div>
<h1>
    flex横排正序，多排交叉轴向两端对齐
</h1>
<div class="flex flex-direction-row flex-wrap-wrap" style="align-content:space-between; height:380px;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
    <div class="block bgc1 "><p class="text">12</p>
    </div>
    <div class="block bgc2"><p class="text">13</p>

    </div>
    <div class="block bgc1 "><p class="text">14</p>
    </div>
    <div class="block bgc2"><p class="text">15</p>

    </div>
    <div class="block bgc1 "><p class="text">16</p>
    </div>
</div>
<h1>
    flex横排正序，多排交叉轴向平分空间
</h1>
<div class="flex flex-direction-row flex-wrap-wrap" style="align-content:space-around; height:380px;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
    <div class="block bgc1 "><p class="text">12</p>
    </div>
    <div class="block bgc2"><p class="text">13</p>

    </div>
    <div class="block bgc1 "><p class="text">14</p>
    </div>
    <div class="block bgc2"><p class="text">15</p>

    </div>
    <div class="block bgc1 "><p class="text">16</p>
    </div>
</div>
<h1>
    flex横排正序，多排交叉轴向无具体大小时平分平铺
</h1>
<div class="flex flex-direction-row flex-wrap-wrap" style="align-content:stretch; height:380px;">
    <div class="block bgc1 ">
        <p class="text">1</p>
    </div>
    <div class="block bgc2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 ">
        <p class="text">3</p>
    </div>
    <div class="block bgc2">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 "><p class="text">5</p>
    </div>
    <div class="block bgc2"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
    <div class="block bgc1 "><p class="text">12</p>
    </div>
    <div class="block bgc2"><p class="text">13</p>

    </div>
    <div class="block bgc1 "><p class="text">14</p>
    </div>
    <div class="block bgc2"><p class="text">15</p>

    </div>
    <div class="block bgc1 "><p class="text">16</p>
    </div>
</div>
<h1>
    flex横排正序，项目属性order排序默认是0
</h1>
<div class="flex flex-direction-row " >
    <div class="block bgc1 " style="order: 1">
        <p class="text">1</p>
    </div>
    <div class="block bgc2" style="order: 2">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 " style="order: 6">
        <p class="text">3</p>
    </div>
    <div class="block bgc2" style="order: 4">
        <p class="text">4</p>
    </div>
    <div class="block bgc1 " style="order: 7"><p class="text">5</p>
    </div>
    <div class="block bgc2" style="order: 5"><p class="text">6</p>

    </div>
    <div class="block bgc1 "><p class="text">7</p>
    </div>
    <div class="block bgc2"><p class="text">8</p>

    </div>
    <div class="block bgc1 "><p class="text">9</p>
    </div>
    <div class="block bgc2"><p class="text">10</p>

    </div>
    <div class="block bgc1 "><p class="text">11</p>
    </div>
    <div class="block bgc1 "><p class="text">12</p>
    </div>
    <div class="block bgc2"><p class="text">13</p>

    </div>
    <div class="block bgc1 "><p class="text">14</p>
    </div>
    <div class="block bgc2"><p class="text">15</p>

    </div>
    <div class="block bgc1 "><p class="text">16</p>
    </div>
</div>
<h1>
    flex横排正序，flex-grow控制放大属性，有空余空间是会放大根据0不会有任何变化默认为0
</h1>
<div class="flex flex-direction-row flex-wrap-wrap" >
    <div class="block bgc1 " style="flex-grow: 0">
        <p class="text">1</p>
    </div>
    <div class="block bgc2" style="flex-grow: 1">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 " style="flex-grow: 2">
        <p class="text">3</p>
    </div>
    <div class="block bgc2" style="flex-grow: 3">
        <p class="text">4</p>
    </div>

</div>
<h1>
    flex横排正序，flex-shrink控制缩小属性，有空间不足是会缩小根据0不会有任何变化默认为1越大缩小的越多
</h1>
<div class="flex flex-direction-row " >
    <div class="block bgc1 " style="flex-shrink: 0">
        <p class="text">1</p>
    </div>
    <div class="block bgc2" style="flex-shrink: 1">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 " style="flex-shrink: 2">
        <p class="text">3</p>
    </div>
    <div class="block bgc2" style="flex-shrink: 3">
        <p class="text">4</p>
    </div>

</div>
<h1>
    flex横排正序，flex-basic控制项目所占空间，距离值
</h1>
<div class="flex flex-direction-row " >
    <div class="block bgc1 " style="flex-basis: 0">
        <p class="text">1</p>
    </div>
    <div class="block bgc2" style="flex-basis: 30px">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 " style="flex-basis: 50px">
        <p class="text">3</p>
    </div>
    <div class="block bgc2" style="flex-basis: 100px">
        <p class="text">4</p>
    </div>

</div>
<h1>
    flex横排正序，align-self控制项目单个的对齐方式
</h1>
<div class="flex flex-direction-row " style="height: 200px;">
    <div class="block bgc1 " style="align-self: flex-start">
        <p class="text">1</p>
    </div>
    <div class="block bgc2" style="align-self: flex-end">
        <p class="text">2</p>
    </div>
    <div class="block bgc1 " style="align-self: center">
        <p class="text">3</p>
    </div>
    <div class="block bgc2" style="align-self: flex-start">
        <p class="text">4</p>
    </div>

</div>
</body>
</html>