flex弹性布局

已于 2022-07-10 22:24:23 修改
阅读量1k 收藏 1
点赞数
分类专栏： 网页设计基础 文章标签： css css3 html
于 2022-07-08 00:34:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45010894/article/details/125654796
版权

文章目录

主轴与交叉轴

在这里插入图片描述
默认按主轴对齐（flex-direction: row）

<style>
        .main{
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

结果展示
在这里插入图片描述

flex容器与子项

在这里插入图片描述

轴对齐

在这里插入图片描述

flex-direction: row-reverse;

   <style>
        .main{
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-direction: row-reverse;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

结果展示
在这里插入图片描述

flex-direction: column;

在这里插入图片描述

flex-direction: column-reverse;

在这里插入图片描述

换行与缩写

在这里插入图片描述

flex-wrap: wrap;

默认在会在同一行展示，即便7个div的宽度超过父级div也扔在第一行显示，wrap进行换行

 <style>
        .main{
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-wrap: wrap;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
    <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

结果展示
在这里插入图片描述

flex-wrap: wrap-reverse

在这里插入图片描述
尽量不要用弹性布局做多行多列

flex-flow: column wrap;

在这里插入图片描述
flex-flow将对齐方式与换行写在一起

内容对齐

在这里插入图片描述

justify-content: space-around;

    <style>
        .main{
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            justify-content: space-around;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

在这里插入图片描述

justify-content: space-between

在这里插入图片描述

justify-content: space-evenly

在这里插入图片描述

交叉轴对齐

在这里插入图片描述

align-content: space-evenly

flex-wrap: wrap;
align-content: space-evenly;
要一起使用， 不折行不生效

    <style>
        .main{
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-wrap: wrap;
            align-content: space-evenly;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>

在这里插入图片描述

align-items: center;

用来处理单行

在这里插入图片描述

内联与块的上下左右居中对齐

单行文字居中对齐

3种方式


    <style>
        /*.box{*/
            /*width: 300px;*/
            /*height: 200px;*/
            /*background: skyblue;*/
            /*display: flex;*/
            /*align-items: center;*/
        /*}*/

        /*.box{*/
            /*width: 300px;*/
            /*height: 200px;*/
            /*background: skyblue;*/
            /*display: flex;*/
            /*flex-wrap: wrap;*/
            /*align-content: center;*/
        /*}*/


        .box{
            width: 300px;
            height: 200px;
            background: skyblue;
            line-height: 200px;
        }

    </style>

<div class="box">
    测试文字
</div>

在这里插入图片描述
多行文字使用前两个弹性布局

块级居中

 <style>
        .box{
            width: 300px;
            height: 200px;
            background: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .box div{
            width: 100px;
            height: 100px;
            background: pink;

        }

    </style>
   或者另一种方法
    <style>

        .box{
            width: 300px;
            height: 200px;
            background: skyblue;
            position: relative;
        }

        .box div{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);

        }

    </style>
<div class="box">
  <div></div>
</div>

在这里插入图片描述

不定项居中

在这里插入图片描述

   <style>

       .box{
           width: 300px;
           height: 150px;
           background: skyblue;
           display: flex;
           justify-content: center;
           align-items: end;
       }

       .box div{
           width: 30px;
           height: 30px;
           background: pink;
           border-radius: 50%;
           margin: 10px;

       }

   </style>

均分列居中

在这里插入图片描述

<style>
    .main{
        height: 200px;
        background: skyblue;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 20px;
    }
    .main div{
        width: 30px;
        height: 30px;
        background: pink;
        border-radius: 50%;
    }
</style>


<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

子项分组布局

在这里插入图片描述

  <style>
        .main {
            height: 200px;
            background: skyblue;
            display: flex;
            align-items: center;
        }


        .main div {
            width: 50px;
            height: 100px;
            background: pink;
            margin-right: 10px;
        }
        .main div:nth-of-type(1){
            margin-right: auto; /*从哪里开始分组*/
        }

    </style>

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

</div>

flex子项

在这里插入图片描述

flex-grow

flex-grow: 1；比例值为1占满剩余的所有空间

<style>
        .main {
            width: 500px;
            height: 300px;
            background: skyblue;
            display: flex;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
            flex-grow: 0.5;
        }


    </style>
<div class="main">
    <div >1</div>
</div>

在这里插入图片描述
在这里插入图片描述

flex-shrink收缩比例

在这里插入图片描述

当子容器超出父容器默认收缩到父容器大小
在这里插入图片描述

 <style>
        .main {
            width: 500px;
            height: 300px;
            background: skyblue;
            display: flex;
        }

        .main div{
            width: 600px;
            height: 100px;
            background: pink;
        }



    </style>

<div class="main">
    <div >1</div>
</div>

在这里插入图片描述

    <style>
        .main {
            width: 500px;
            height: 300px;
            background: skyblue;
            display: flex;
        }
        .main div{
            width: 600px;
            height: 100px;
            background: pink;
            flex-shrink: 0.5;
        }


    </style>


<div class="main">
    <div >1</div>
</div>

flex-basis

在这里插入图片描述

代码

    <style>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-direction: column;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
            flex-basis: 200px;
        }


    </style>
<div class="main">
    <div >1</div>
</div>

结果展示
在这里插入图片描述
flex-basis: auto;/可选值 0% auto 200px 100%/

  <style>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            align-items: flex-start;
        }
        .main div{
            background: pink;
            flex-basis: auto;/*可选值 0% auto 200px  100%*/
        }


    </style>
<div class="main">
    <div >测试文字</div>
</div>

结果展示

在这里插入图片描述

flex缩写

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

order

在这里插入图片描述

代码

 <style>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            align-items: flex-start;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .main div:nth-of-type(1){
            order: 1;
        }
        .main div:nth-of-type(4){
            order: -1;
        }

    </style>
<div class="main">
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
</div>

结果展示
在这里插入图片描述

align-self

在这里插入图片描述

代码

<style>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            align-items: flex-start;
        }
        .main div{
            width: 100px;
            height: 100px;
            background: pink;
        }

        .main div:nth-of-type(4){
            height: 50px;
            align-self: flex-end;
        }

    </style>
<div class="main">
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
</div>

结果展示
在这里插入图片描述

等高布局

在这里插入图片描述

   <style>
        .main {
            width: 500px;
            background: skyblue;
            display: flex;
            justify-content: space-between;
        }


        .main div{
            width: 100px;
            background: pink;
        }

    </style>

<div class="main">
    <div >
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
    </div>
    <div >
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
    </div>
</div>

二列或三列布局

在这里插入图片描述

二列布局

代码

 <style>
        body{
            margin: 0;
        }
        .main {
            height: 100vh;
            background: skyblue;
            display: flex;
        }


        .col1{
            width: 100px;
            background: pink;
        }
        .col2{
            flex-grow: 1;
            background: greenyellow;
        }
    </style>
    <div class="main">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

在这里插入图片描述
三列
代码

    <style>
        body{
            margin: 0;
        }
        .main {
            height: 100vh;
            background: skyblue;
            display: flex;
        }


        .col1{
            width: 100px;
            background: pink;
        }
        .col2{
            flex-grow: 1;
            background: greenyellow;
        }
        .col3{
            width: 100px;
            background: darkseagreen;
        }
    </style>
<div class="main">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
</div>

结果展示
在这里插入图片描述

sticky footer布局

在这里插入图片描述
代码

<style>
        body{
            margin: 0;
        }
        .main {
            min-height: 100vh;
            display: flex;
            background: skyblue;
            flex-direction: column;
        }
        .header{
            height: 100px;
            background: pink;
        }

        .content{
            background: greenyellow;
            flex-grow: 1;
        }
        .footer{
            height: 100px;
            background: orangered;
        }


    </style>


<div class="main">
    <div class="header"></div>
    <div class="content">
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>
        <p>测试文字</p>




    </div>
    <div class="footer"></div>
</div>

结果展示
在这里插入图片描述

溢出项布局

在这里插入图片描述

代码

<style>
    body{
        margin: 0;
    }
    .main{
        height: 100px;
        background: skyblue;
        display: flex;
        align-items: center;
    }
    .main div{
        width:100px;
        height: 80px;
        background: pink;
        margin-right: 10px;
        flex-shrink: 0;
    }
</style>
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

代码展示

在这里插入图片描述

菜蜗牛很菜
关注
专栏目录
flex 弹性布局
thothsun 的博客
12-12 1009
flex 弹性布局 上一节介绍了小程序中常用的组件，在使用它们的时候，如何控制它们的位置呢？就需要用到布局了。传统的布局实现方式比较麻烦，要用多个属性配合实现。后来 flex 弹性布局出现后，用其他方式实现的布局，用 flex 布局都能更简洁地实现。本节通过几个简单的例子介绍 flex 布局的基本用法。 首先新建一个空白页面，在一个 view 里面放三个 text。在 view 的样式中添加 display:flex 将 view 设置为弹性布局，组件默认是按照从上到下、从左到右的顺序排列。 <!-
CSS中如何实现弹性盒子布局（Flexbox）的换行和排序功能
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-05 1465
在Flexbox中，换行和排序是非常实用的功能，可以用来控制容器内元素的排列方式。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过上述示例和技术要点，您应该能够熟练地使用Flexbox来实现各种复杂的布局，并在实际项目中灵活应用这些知识。Flexbox可以用来创建复杂的网格布局，其中包含多个行和列，以及不同大小的单元格。在实际项目中，可能会遇到更复杂的布局需求，例如嵌套的Flex容器、多列布局等。属性，可以控制Flex项目在容器中的排序顺序。
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
flex弹性布局基本语法（修改版）.pdf
12-01
Flex 弹性布局基本语法 Flex 弹性布局是一种基于盒模型的传统解决方案，依赖于 display 属性 + position 属性 + float 属性。它可以简便、完整、响应式地实现各种页面布局。 开启 Flex 弹性盒子布局可以通过将元素...
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
Flex 弹性布局
imByte的博客
04-08 1002
目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，因此这里来介绍一下何为 Flex 弹性布局。 Flex 布局可以为盒状模型提供最大的灵活性，自动弹性伸缩，合适适配不同大小的屏幕。 说明 当父盒子设置为 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。 任何一种元素都可以指定为 flex 布局。 .wrap { display: flex } /* 行
弹性布局 flex
青蛙king的博客
09-11 1743
目录 一、Flex布局是什么？ 二、基本概念 三、容器的属性 1、flex-direction 2、flex-wrap 3、flex-flow 4、justify-content 5、align-items 6、align-content 四、项目的属性 1、order ​2、flex-grow ​3、flex-shrink 4、flex-basis 5、fle...
弹性布局flex
weixin_43627177的博客
02-25 116
1）初识 初次知道这个布局方式其实是在vx小程序里面，但是当时没有仔细了解，于是乎拖到今天打算好好了解一下这个布局。以下是我的学习成果，在以后也可以方便我查看喔~ 2）介绍 CSS3最喜欢的属性之一便是flex布局属性，用六个字概括便是 简单 ，方便， 快速。 Flex（flexible box： 弹性布局盒模型），W3C提出了一种新的方案——flex布局，以简便，完整，响应式地实现了各种...
Flex布局（弹性布局）
ORANGE_3iING的博客
08-10 5967
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式对父容器设置的属性作用属性值设置主轴的方向row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右flex-end：从尾部开始排列center：在主轴居中对齐(如果主轴是x轴则水平居中)space-around：平分剩余空间。
弹性（flex）布局
qq_43679416的博客
07-09 2685
什么是Flexbox ？ Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。它可以： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将元素装入容器 在 Flexbox 模型中，有三个核心概念： ..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值