flex布局实战

最新推荐文章于 2024-05-23 11:26:37 发布
最新推荐文章于 2024-05-23 11:26:37 发布
阅读量299 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzbdkl/article/details/125768691
版权

效果图

弹性布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=di, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        font-family: 'Open Sans', sans-serif;
        background: linear-gradient(top, #222, #333);
    }

    /*[attribute$="value"]:匹配给定的属性是以某些值结尾的元素*/
    [class$="face"] {
        margin: 16px;
        padding: 4px;
        display: flex;
        background-color: #e7e7e7;
        width: 104px;
        height: 104px;
        object-fit: contain;

        box-shadow:
            /* 第二参代表竖直，正为上 */
            inset 0 5px white,
            /* 第二参代表竖直，正为下 */
            inset 0 -5px #bbb,
            /* 第一参代表横向，正为左 */
            inset 5px 0 #d7d7d7,
            /* 第一参代表横向，正为右 */
            inset -5px 0 #d7d7d7;

        border-radius: 10%;
    }

    [class$="item"] {
        display: flex;
    }

    .pip {
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 4px;
        background-color: #333;
        box-shadow: inset 0 3px #111, inset 0 -3px #555;
    }

    .item1-2face {
        justify-content: center;
    }

    .item1-3face {
        justify-content: flex-end;
    }

    .item1-4face {
        align-items: center;
    }

    .item1-5face {
        align-items: center;
        justify-content: center;
    }

    .item1-6face {
        align-items: flex-start;
        justify-content: flex-end;
    }

    .item1-7face {
        align-items: flex-end;
        justify-content: flex-start;
    }

    .item1-8face {
        align-items: flex-end;
        justify-content: center;
    }

    .item1-9face {
        align-items: flex-end;
        justify-content: flex-end;
    }

    /* 
    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。 */
    .item2-1face {
        justify-content: space-between;
    }

    .item2-2face {
        flex-direction: column;
        justify-content: space-between;
    }

    .item2-3face {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .item2-4face {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }

    .item2-5face .pip:nth-child(2) {
        align-self: center;
    }

    .item2-6face {
        justify-content: space-between;
    }

    /* 如果不指名，会默认排在左上角或右上角 */
    .item2-6face .pip:nth-child(2) {
        align-self: center;
    }

    .item3-1face {
        justify-content: space-between;
    }

    .item3-1face .pip:nth-child(2) {
        align-self: center;
    }

    .item3-1face .pip:nth-child(3) {
        align-self: flex-end;
    }

    .item4-1face {
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: space-between;
    }

    .item4-2face {
        flex-wrap: wrap;
        align-content: space-between;
    }

    .item4-2face .column {
        display: flex;
        /* column的长度 */
        flex-basis: 100%;
        justify-content: space-between;
    }

    .item5-1face {
        flex-wrap: wrap;
        align-content: space-between;
    }

    .item5-1face .column {
        display: flex;
        /* column的长度 */
        flex-basis: 100%;
        justify-content: space-between;
    }

    .item5-1face .column:nth-child(2) {
        justify-content: center;
    }

    .item6-1face {
        flex-wrap: wrap;
        /* justify-content: space-between; */
        align-content: space-between;
    }

    .item6-2face {
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .item6-3face {
        flex-wrap: wrap;
    }

    .item6-3face .row {
        display: flex;
        flex-basis: 100%;
    }

    .item9-1face {
        flex-wrap: wrap;
    }
</style>

<body>
    <div class="first-item">
        <div class="item1-1face">
            <span class="pip"></span>
        </div>
        <div class="item1-2face">
            <span class="pip"></span>
        </div>
        <div class="item1-3face">
            <span class="pip"></span>
        </div>
        <div class="item1-4face">
            <span class="pip"></span>
        </div>
        <div class="item1-5face">
            <span class="pip"></span>
        </div>
        <div class="item1-6face">
            <span class="pip"></span>
        </div>
        <div class="item1-7face">
            <span class="pip"></span>
        </div>
        <div class="item1-8face">
            <span class="pip"></span>
        </div>
        <div class="item1-9face">
            <span class="pip"></span>
        </div>
    </div>
    <h2>双项目</h2>
    <div class="second-item">
        <div class="item2-1face">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="item2-2face">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="item2-3face">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="item2-4face">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="item2-5face">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="item2-6face">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
    </div>

    <h2>三项目</h2>
    <div class="third-item">
        <div class="item3-1face">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
    </div>

    <h2>四项目</h2>
    <div class="forth-item">
        <div class="item4-1face">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="item4-2face">
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
        </div>
    </div>

    <h2>五项目</h2>
    <div class="fifth-item">
        <div class="item5-1face">
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
            <div class="column">
                <span class="pip"></span>
            </div>
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
        </div>
    </div>

    <h2>六项目</h2>
    <div class="six-item">
        <div class="item6-1face">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="item6-2face">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="item6-3face">
            <div class="row">
                <span class="pip"></span>
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
            <div class="row">
                <span class="pip"></span>
            </div>
            <div class="row">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
        </div>
    </div>

    <h2>九项目</h2>
    <div class="nine-item">
        <div class="item9-1face">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
    </div>


</body>

</html>
kumouya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹性布局（display:flex；）属性详解
m0_61044901的博客
12-30 1086
弹性布局（display:flex;）属性详解
flex布局教程
Jaden
01-11 481
flex 基本概念 flex布局是W3C在2009年提出了一种弹性的自适应布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 flex的核心概念是轴和容器。其中容器包裹在外层的是父容器，内层的是子容器。容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点是main start，结束位置是main ...
css display:flex 属性
weixin_30652271的博客
01-21 886
一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和ve...
Flex 布局教程+实战介绍
最新发布
艾利克斯冰的博客
05-23 1038
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于，依赖属性 +属性 +属性。它对于那些特殊布局非常不方便，比如，就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，给出常见布局的 Flex 写法。网友为本文的所有示例制作了，也可以参考。和。
CSS3 弹性布局display:flex详解
LJXLQXX的博客
01-11 2878
弹性盒子display:flex常用属性详解
前端比较实用的 display: flex; flex-direction: column; align-items: center;
Little_Pig_Bug的博客
09-03 9952
1.flex布局 { display: flex; flex-direction: column; align-items: center; justify-content: center { flex:1 //所有的子元素平均分配 } } 我写css必定会用到他，自此之后摒弃flaot,毕竟float要清楚浮动，在我看来他完全可以替代float,而且最大的好处就是对任何不确定...
flex布局
qq_53246692的博客
05-02 49
基本概念 容器的属性 设置在容器上 flex-direction 决定主轴的方向，即项目的排列方向 .box{ flex-direction: 1.row（默认值）:主轴为水平方向，起点在左端 2.row-reverse:主轴为水平方向，起点在右端 3.column:主轴为垂直方向，起点在上沿 4.column-reverse:主轴为垂直方向，起点在下沿 ; } flex-wrap 默认情况下，项目都排在一条线（即轴线）上。通过flex-wrap解决 如果一条轴线排不下如何换
flex布局实战搭建网页页面
01-03
在网页设计领域，Flex布局（Flexible Box Layout，也称为CSS3 Flexbox）是一种强大的工具，它使得构建响应式、动态调整的布局变得简单易行。本教程将带你深入理解Flex布局，并通过实例演示如何利用HTML和CSS搭建一个...
flex仿微博布局实战+代码
12-05
`：将元素设置为Flex容器，开启Flex布局。 - `flex-direction`: 决定子元素的排列方向，可选值有`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）和`column-reverse`（从下到上）。 - `...
Flex布局学习资料
11-10
Flex布局，全称为“Flexible Box”，也称作柔性盒布局，是CSS3中的一种布局模式，旨在提供一种更加有效和灵活的方式来控制Web页面元素的排列和对齐方式。这种布局方式特别适合处理需要动态调整的界面，比如响应式...
移动web开发实例flex布局案例源码
02-16
在现代Web开发中，Flex布局（Flexible Box Layout）已经成为创建响应式、动态和灵活的用户界面的首选方法，尤其在移动设备上。本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并...
前端学习之flex布局
qq_45839045的博客
01-04 873
Flex 是 Flexible Box 的缩写，意为"弹性布局" flex布局是浏览器提倡的布局模型，布局简单，灵活，可以避免浮动布局脱标的问题； Flex布局和传统布局的区别； 传统布局：兼容性好，布局繁琐，局限性在移动端不能很好布局；Flex布局：简单，操作方便，兼容性差（随着技术的发展可能会成为主流的布局）；Pc采用传统布局，移动端或者不考虑兼容的pc可采用flex布局； 给父级开启Flex布局 display: flex; 任何一个盒子都可以开启弹性布局，不管是块元素还是行内元素；只需要设置 dis
弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行
ranran0306的博客
03-23 3248
弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行、换行之后 align-content
flex布局设置justify-content不生效问题及解决
qq_45759975的博客
07-20 8657
flex布局设置justify-content不生效
Flex各种常用布局示例
mobingdetong的专栏
11-07 861
Flex各种常用布局示例
Flex布局实战详解
热门推荐
大爱仙尊
08-15 2万+
flex布局详解，弹性盒子布局，万能布局

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值