Flex Box页面布局实战课程-九宫格布局-六个项目的布局

最新推荐文章于 2023-10-24 16:59:49 发布
最新推荐文章于 2023-10-24 16:59:49 发布
阅读量511 收藏
点赞数
文章标签： Flex Box页面布局实战课程-九宫格布局-六个项目的布局 flex box实战iaocheng
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013818205/article/details/86621648
版权

效果图
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua
在这里插入图片描述
代码

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>九宫格布局-六个项目的布局:黄菊华老师</title>
</head>
<body>

<style>
.jiugongge{ width:250px; height:250px; background-color:#CCC; display:flex;flex-wrap:wrap;}
.xiangmu{ width:70px; height:70px; background-color:#0CF; margin:5px;}
</style>

<div class="jiugongge" style="align-content: flex-start;">
	<div class="xiangmu">01</div>
    <div class="xiangmu">02</div>
    <div class="xiangmu">03</div>
    <div class="xiangmu">04</div>
    <div class="xiangmu">05</div>
    <div class="xiangmu" style="align-self:flex-end;">06</div>
</div><hr>

<style>
.jiugongge2{ width:250px; height:250px; background-color:#CCC; display:flex;flex-wrap:wrap;}
.jiugongge2-b{ display:flex;}
.xiangmu2{ width:70px; height:70px; background-color:#0CF; margin:5px;}
</style>
<div class="jiugongge2">
  <div class="jiugongge2-b" style="flex:1;">
	<div class="xiangmu2" style="margin-right:auto;">01</div>
    <div class="xiangmu2">03</div>
  </div>	
    
  <div class="jiugongge2-b">    
    <div class="xiangmu2">04</div>
    <div class="xiangmu2">06</div>
  </div>
  
  <div class="jiugongge2-b">
    <div class="xiangmu2">07</div>
    <div class="xiangmu2">09</div>
  </div>   
</div><hr>

<div class="jiugongge" style="align-content: flex-start;">
	<div class="xiangmu">01</div>
    <div class="xiangmu">02</div>
    <div class="xiangmu">03</div>
    <div class="xiangmu">04</div>
    <div class="xiangmu">05</div>
    <div class="xiangmu">06</div>
</div><hr>

<div class="jiugongge">
	<div class="xiangmu">01</div>
    <div class="xiangmu">02</div>
    <div class="xiangmu">03</div>
    <div class="xiangmu">04</div>
    <div class="xiangmu">05</div>
    <div class="xiangmu">06</div>
    <div class="xiangmu">07</div>
    <div class="xiangmu">08</div>
    <div class="xiangmu">09</div>
</div><hr>

</body>
</html>

欢迎大家学习我的视频课程：Flex Box页面布局实战课程(网页移动端微信等)

Flex Box页面布局实战课程-九宫格布局-六个项目的布局

黄菊华老师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序页面布局方式flexbox -温故而知新
03-29
任何一个元素都可以指定为flexbox布局，其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目，伸缩项目使用伸缩布局模型来排版。伸缩布局模型与传统的布局不一样，它按照...
Flex 弹性盒子布局
weixin_43694083的博客
04-01 467
Hi，这是我的第一篇博客。最近或是以前经常会使用到盒子弹性布局flex，于是就想写一篇总结，虽然网上已经有很多这方面的文章。
flex布局详细示例：
m0_72189003的博客
09-09 712
flex布局详细示例（有图实例）
flex布局
qq_51882068的博客
01-16 86
学习了JS其中有一个布局flex布局是极其好用的，废话不多说，上正餐 它是用于有一个大盒子和许多小盒子，小盒子可以通过这个布局在大盒子中灵活移动 啥也不知道也得先在父盒子上写 display:flex; 咱们先看父盒子常见的属性 设定主轴 1.flex-direction: row（主轴是x轴，小盒子从左到右排列） row-reverse（主轴是x轴，小盒子从右到左排列） column（主轴是y轴，小盒子从上到下排列） column-reverse（主轴是y轴，小盒子从下到上排列） 设置主轴上子元素排列方
flex 弹性布局
yiweiIt的博客
12-02 282
使用flex 弹性布局 排有三个的情况下换行排列 且要 两端对齐的话 则在末尾加一个空盒子标签 <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> &l...
flex 布局：一行固定个数，超出换行（流式布局）
最新发布
weixin_42017221的博客
10-24 3293
设置在父容器上的属性：display：flex，align-items(交叉轴对齐方式)，justify-content(主轴对齐方式)，flex-wrap(换行)。设置在子容器上的属性，通过 flex: 1，简写了 flex-grow、flex-shrink、flex-basis 三个属性。
实例讲解CSS3中的box-flex弹性盒属性布局
12-30
box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-...
详解flex布局中flex-grow与flex-shrink的计算方式
11-21
　flex-basis 决定了项目占据主轴的空间，除非使用 box-sizing 进行设置，否则它将设置内容框的大小，因此当你指定一个flex项的大小时需要额外小心，因为它很肯能包含内边距与边框。 　你可以为其指定一个具体的CSS...
vue-layout-diy:基于vue和flex的自定义布局
05-16
基于vue和flex的自定义布局，。 S前缀为Sunflower简写，我们团队的命名空间。 项目步骤 使用[email protected]初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装； 完成基于flex...
详解微信小程序之scroll-view的flex布局问题
10-17
主要介绍了详解微信小程序之scroll-view的flex布局问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Flex布局详解
热门推荐
半亩方糖
03-31 11万+
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束
Flex布局
这个昵称没有被占用吧的博客
09-29 339
一、Flex布局是什么？Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，指定方式如：.box { display:flex; }行内元素也可以使用Flex布局：.box { display:inline-flex; }webkit内核的浏览器，必须加上-webkit前缀：.box { displ
用flex布局实现九宫格
weixin_53141315的博客
08-25 772
扩展：若想让每个格子的内容呈现以下效果，则在每个格子里实现flex布局。
Flex实现九宫格布局
琳小的博客
09-15 8194
在小程序开发中，对于九宫格布局或者类似九宫格布局算是挺常见，之前写过一个淘宝的小程序，挺多人私信问到关于布局，其实，用flex实现起来挺简单的。下面就来展示下，用Flex布局实现九宫格布局； ...
css：九宫格布局的五种方法（grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性）
YangLu888
04-20 6031
css实现九宫格的五种方法：grid网格布局、flex布局、inline-block+letter-spacing属性、float浮动定位、table表格布局
【Flex】利用flex布局一个九宫格
羊羊羊羊羊羊羊的博客
02-20 575
【代码】【Flex】利用flex布局一个九宫格。
九宫格布局小程序-模仿微信钱包界面设计-基础入门
m0_46965984的博客
03-16 6706
使用flex布局模型和wx:for属性仿微信“钱包”页面实现九宫格 项目创建完毕之后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面； 将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号 删除utils文件夹及其内部所有内容。 删除pages文件夹下的logs目录及其内部所有内容 删除index.wxml和index.wxss中的全部代码 删除index.js中的代码 并输入pa
flex 九宫格布局实现
ZTao-z的博客
11-18 1421
flex 九宫格实现
【微信小程序】之自定义四宫格（不用mp-grids扩展组件实现，这个组件太难用了）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-25 7875
【代码】【微信小程序】之自定义四宫格（不用mp-grids扩展组件实现，这个组件太难用了）
flex布局九宫格布局
09-08
要使用flex布局实现九宫格布局，可以按照以下步骤进行操作: 1. 创建一个父容器，可以是一个div元素，作为九宫格的容器。 2. 将父容器的`display`属性设置为`flex`，这样它的子元素可以使用flex布局。 3. 设置父容器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄菊华老师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值