前端flex布局属性及使用

最新推荐文章于 2024-07-31 12:16:44 发布
最新推荐文章于 2024-07-31 12:16:44 发布
阅读量306 收藏
点赞数
分类专栏： 学习笔记 文章标签： html flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47354578/article/details/105765012
版权

flex布局

容器的6个属性

属性名说明
flex-direction: row || row-reverse || column || column-reverse主轴方向
justify-content: flex-start || flex-end || center || space-around || space-between内容在主轴上的对齐方式
flex-wrap: nowrap || wrap是否换行
flex-flow: <flex-direction> || <justify-content>flex-direction和justify-content属性的缩写
align-items: stretch || flex-start || flex-end || center || baseline内容在交叉轴上的对齐方式（单行有效）
align-content: stretch || flex-start || flex-end || space-around|| space-between内容在交叉轴上的对齐方式（多行有效）

项目的3个属性

属性名说明
flex: 1 || 2 || 3 || …项目在剩余空间上所占空间的比例
order: … || -1 || 0 || 1 || …项目在主轴上的排列顺序（值越小越靠前）
align-self: auto || flex-start || flex-end || center || baseline || stretch单个项目在交叉轴上的对齐方式

使用flex布局绘制骰子

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用flex布局绘制骰子</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .box {
            display: flex;
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 20px;
        }

        .point {
            width: 25%;
            height: 25%;
            background-color: black;
            border-radius: 50%;
        }

        .box1 {
            justify-content: center;
            align-items: center;
        }

        .box2 {
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

        .box3 {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .box3 div:nth-child(1) {
            align-self: flex-start;
        }

        .box3 div:nth-child(3) {
            align-self: flex-end;
        }

        .box4 {
            flex-direction: column;
        }

        .box44 {
            flex: 1;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .point4 {
            width: 75px;
            height: 75px;
            background-color: black;
            border-radius: 50%;
        }

        .box5 {
            flex-direction: column;
        }

        .box55 {
            flex: 1;
            display: flex;
        }

        .box55:nth-child(2n-1) {
            justify-content: space-around;
            align-items: center;
        }

        .box55:nth-child(2) {
            justify-content: center;
            align-items: center;
        }

        .point5 {
            width: 75px;
            height: 75px;
            background-color: black;
            border-radius: 50%;
        }

        .box6 {
            flex-direction: column;
        }

        .box66 {
            flex: 1;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .point6 {
            width: 75px;
            height: 75px;
            background-color: black;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1 box">
            <div class="point"></div>
        </div>

        <div class="box box2">
            <div class="point"></div>
            <div class="point"></div>
        </div>

        <div class="box box3">
            <div class="point"></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>

        <div class="box box4">
            <div class="box44">
                <div class="point4"></div>
                <div class="point4"></div>
            </div>
            <div class="box44">
                <div class="point4"></div>
                <div class="point4"></div>
            </div>
        </div>

        <div class="box box5">
            <div class="box55">
                <div class="point5"></div>
                <div class="point5"></div>
            </div>
            <div class="box55">
                <div class="point5"></div>
            </div>
            <div class="box55">
                <div class="point5"></div>
                <div class="point5"></div>
            </div>
        </div>

        <div class="box box6">
            <div class="box66">
                <div class="point6"></div>
                <div class="point6"></div>
            </div>
            <div class="box66">
                <div class="point6"></div>
                <div class="point6"></div>
            </div>
            <div class="box66">
                <div class="point6"></div>
                <div class="point6"></div>
            </div>
        </div>
    </div>
</body>

</html>
整点薯条8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试笔记3：Flex布局及常用属性
qq_52287721的博客
12-26 694
Flex 布局及常用属性 文章目录Flex 布局及常用属性声明 flex 布局的方式常用属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentalign-selfflex-growflex-shrinkflex-basisflexorder 声明 flex 布局的方式 对要进行 flex 布局的元素设置以下属性即可： display: flex; 常用属性 flex-direction 这个 flex 属性是用来改
flex布局及常见属性
qq_45033897的博客
07-20 1597
flex布局中常见属性
【前端】Flex布局使用
qq_45888932的博客
07-29 1077
个人为前端小白，对于前端的学习为使用层面；对于flex这里只记录了用到的属性，没有更加深入。可以访问参考链接等等。
少小白学前端——css篇(flex布局)
最新发布
Another_World_Naraku的博客
07-31 1601
其中，采用该样式的元素被称为容器（container），而它的子元素则称为item。容器上默认有两根轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis），子元素item则根据轴线排列。
前端flex属性详解
bianenhui91的专栏
11-29 141
flex属性结构脑图
前端开发笔记--flex布局
小母牛倒立的博客
12-16 1669
flex布局： 个人觉得flex布局比起传统布局要优先得多（主要是容易使用），缺点是IE10及以上版本才能使用，甚至某些属性只有在IE11才能使用（而且我发现凡是不兼容主要IE的坑来的多，不是说其他浏览器没有） 不过微信小程序开发时完美适配。 回到主题： 使用flex布局的容器，内部元素自动成为flex项目...
前端Flex布局
weixin_42549473的博客
02-06 1682
为什么要使用Flex布局呢？可以说是它十分灵活，简简单单的几号代码就可以实现各种页面的布局工作。如我们以前的学习的页面布局position、float、display这些属性的局限性，给你带来的困扰。然而Flex，你只需要学习一些CSS属性，就可以写出简洁、优雅、复杂的页面布局。建立在主轴为水平方向时测试，即：flex-direction:row默认值：flex-start 左对齐flex-end: 右对齐center：居中。
前端-flex布局案例
03-20
在前端开发中，Flex布局（Flexible Box Layout）是一种强大的盒模型布局方式，旨在提供更为灵活的版面控制，尤其在响应式设计中扮演着至关重要的角色。本案例将深入探讨Flex布局的核心概念、属性以及如何在实际项目...
Flex:通过按钮Flex布局属性来查看效果
03-25
在本文中，我们将深入探讨如何使用Flex布局属性，特别是针对HTML中的`flex-container`，来创建灵活且响应式的用户界面。Flex布局是现代Web开发中一个强大的工具，它允许我们轻松地调整元素的大小和位置，以适应不同...
html5 前端 flex布局 案例 携程网
03-19
- **推荐景点或酒店列表**：使用Flex布局可以方便地创建网格系统，使列表在不同屏幕尺寸下自动调整列数，保持内容清晰易读。 - **页脚**：实现页脚元素如链接、版权信息等在一行内自动换行，保持页面底部的整洁。 ...
Web-前端教程05 Flex 布局大法.zip
05-24
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是现代Web开发中的一个核心...在Web-前端教程05 Flex 布局大法.mp4中，你将深入学习到Flex布局的原理、使用方法及实践技巧，为构建现代响应式网站打下坚实基础。
前端布局 flex布局
susud的博客
03-04 2677
一、什么是flex flex是flecible Box的缩写，意思是“弹性布局”，任何一个容易的可以用flex布局。 当给父盒子设为flex布局之后，子元素的float，clear，和vertical-align属性将会失效 flex操作性方便，布局简单，广泛应用于移动端的开发，pc端页面则仍主要采用传统布局。 二、flex的布局原理 flex的原理就是通过给父盒子添加flex属性，来控制子盒子的位子和排列方式 三、常见的六个父项属性 ...
深入理解前端 flex属性
Beth__hui的博客
06-11 502
1、flex-grow属性 该属性定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大； .item { flex-grow: <number>; /* default 0 */ } 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 2、flex-...
前端：Flex布局
qq_64131064的博客
08-01 716
​Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。、
【前端布局技术】Flex布局
cannotbecounted的博客
06-28 558
对Flex弹性布局的简要介绍。
前端布局 Flex（弹性）布局
热门推荐
qq_63512287的博客
10-15 1万+
前端布局中的Flex布局
前端布局之Flex语法
KelvinFlying的专栏
07-20 964
前端布局一直是CSS的一个重点应用，然而基于盒子模型的传统布局方案，依赖display + position + float 属性，对于某些特殊的布局非常不方便，比如：垂直居中就不容易实现。针对这一情况，在2009年，W3C提出了一种新的方案：Flex布局，可以简便、完整、响应式地实现前端的各种布局，并且已经得到几乎所有浏览器的支持。
前端基础知识（flex布局）
Fcat的博客
03-15 347
页面布局 flex布局 Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为Flex布局 .box{ display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/ display: flex; //将对象作为弹性伸缩盒显示 } /*行内元素flex布局*/ .box {...
前端常用 flex布局
etemal_bright的博客
08-19 408
flex上下布局 一般像流式布局 比如在app的我的页面 会有很多条列表一样的选项 个数不固定 最下面有个按钮 固定距离底部多少距离之类的 如图所示：不同像素的手机上显示的样式具体自适应 html &lt;div class='container'&gt; &lt;div class='my-wrapper'&gt;//列表块 &lt;ul&gt;&lt;/ul&gt; &lt;/...
前端flex布局一行放三个盒子
07-27
可以使用flex布局的`flex-wrap`属性和`flex-basis`属性来实现一行放三个盒子的效果。具体的代码如下： ```html .container { display: flex; flex-wrap: wrap; } .box { flex-basis: 33.33%; background-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值