初识Flexbox 布局

最新推荐文章于 2017-09-22 11:20:56 发布
最新推荐文章于 2017-09-22 11:20:56 发布
阅读量164 收藏
点赞数

一、首先创建一个flexbox容器

	.flexboxcontainer{
		display: -webkit-flex;
		display: flex;

	}

二、flex项按行排列

flex项目默认按行排列，也可设置为column，按列排列，默认设置为row

	.flexboxcontainer{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
                  flex-direction: row;
	}
	.flexboxcontainer>div{
		width:100px;
		height:100px;
		background-color:#e46119;
		border:1px solid #ccc;
		margin:5px;
	}


三、flex项按列排列

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

四、flex项左(flex-start)对齐和右(flex-end)对齐（如果是row，设置justify-content;如果是column，设置align-items）

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}



五、flex项行居中(center)对齐，列居中同理

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		height:300px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}


六、自定义比例分配

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		height:300px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}
	.bigitem{
		-webkit-flex:3 0 0;
		flex:3 0 0;
	}
	.smallitem{
		-webkit-flex:1 0 0;
		flex:1 0 0;
	}
	.flexboxcontainer>div{
		height:100px;
		background-color:#e46119;
		border:1px solid #ccc;
		margin:5px;
	}
</style>
</head>
<body>
<div class="flexboxcontainer">
	<div class="bigitem"></div>
	<div class="smallitem"></div>
</div>

</body>
</html>


七、多行居中布局（webkit内核浏览器、IE11支持，Firefox不支持）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		height:300px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-flow: column wrap;
		flex-flow: column wrap;
		-webkit-align-content: stretch;
		align-content: stretch;
	}
	.flexboxcontainer>div{
		width:100px;
		height:100px;
		background-color:#e46119;
		border:1px solid #ccc;
		margin:5px;
	}
</style>
</head>
<body>
<div class="flexboxcontainer">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

</body>
</html>



iteye_10018
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flexbox实例
05-08
flexbox实例、
精通CSS.DIV网页样式与布局 第1课 初识CSS.rar
07-14
在本课程“精通CSS.DIV网页样式与布局 第1课 初识CSS”中，我们将深入探讨CSS（层叠样式表）的基础知识及其在网页设计中的核心作用。CSS是网页设计的重要组成部分，它允许我们控制网页的外观和布局，使网页更加美观...
flexbox常用布局上下固定，中间滚动
weixin_33937913的博客
08-03 589
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;title&gt;JS Bin&lt;/title&amp
使用flexbox简单实现垂直居中布局
CC_leather的博客
09-22 639
垂直居中一直是css布局中绕不去的一个坎，今天我来介绍一种可以更简单来实现的方法--CSS3弹性盒子(Flexible Box 或 Flexbox)。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 首先，设置容器为flex布局 .vertical-container { height: 300px; displa
CSS学习（二十一）-flexbox模型之二
bwshqh的博客
03-29 1259
一、理论： 1.flex-flow a.flex-direction 设置伸缩容器的伸缩流方向 b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时，伸缩项目在伸缩容器中是否换行排列 2.flex-pack a.具有与box-pack属性相同的参数 b.distribute 伸缩项目会平均分布在同一行里 c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容
web前端零基础html5 +css3+前端项目视频教程笔记、源码第一章初识HTML
11-12
5. 布局技术：学习流体布局、响应式设计，以及Flexbox和Grid布局系统，以适应不同屏幕尺寸。 6. CSS3新特性：如阴影效果、渐变、动画、多列布局、媒体查询等，这些特性可以增强网页的视觉效果和交互性。 通过本章的...
首发
03-04
- **Flexbox布局**：现代CSS布局方式，用于创建灵活的、响应式的布局，可以轻松处理元素的对齐、顺序和大小调整。 - **Grid布局**：网格布局提供二维布局，适用于复杂的布局设计，如杂志布局或卡片式布局。 3. **...
css1.rar_css水调歌头
09-24
7. **Flexbox**: 弹性盒布局模型提供了一种更灵活的布局方式，可以轻松调整元素的大小和排列方向，尤其适用于未知尺寸的容器和动态内容。 8. **Grid布局**: CSS Grid布局是二维布局系统，适用于创建复杂的网格结构...
CSS样式参考.rar
08-08
3. **Flexbox**：弹性盒布局模型简化了复杂的一维布局，如网格和对齐。通过`display: flex`开启容器的flex布局，`flex-direction`定义主轴方向，`justify-content`和`align-items`处理元素的水平和垂直对齐。 4. **...
【python期末/课程设计】电话本管理系统(pycharm项目/Tkinter界面)
07-25
电话本管理系统
基于python的slaee管理系统 (10).zip
07-25
基于python的slaee管理系统 (10).zip
毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip
07-25
毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！ 毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip毕设新项目-基于Java开发的智慧养老院信息管理系统源码+数据库（含vue前端源码）.zip
个人单页简历素材-稳重单页02.docx
最新发布
07-25
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
Matlab实现能量谷优化算法EVO-TCN-Multihead-Attention多输入单输出回归预测算法研究.rar
07-25
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
r语言数据分析案例- 因子分析包括案例和对应的R语言代码，代码中地址需要自行修改后使用
07-25
文件列表: 因子分析代码.docx (13689, 2019-11-14) 因子分析.R (814, 2019-06-29) 因子分析案例.docx (13090, 2019-11-14)
计算机和计算机网络基础
07-25
计算机和计算机网络基础
b164综合小区管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
综合小区管理系统管理系统按照操作主体分为管理员和用户。管理员的功能包括报修管理、车位管理、车位分配管理、出入管理、字典管理、房屋管理、物业费缴纳管理、公告管理、物业人员投诉管理、我的私信管理、物业人员管理、用户管理、管理员管理。用户的功能包括管理部门以及部门岗位信息，管理招聘信息，培训信息，薪资信息等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。 综合小区管理系统管理系统可以提高综合小区管理系统信息管理问题的解决效率，优化综合小区管理系统信息处理流程，保证综合小区管理系统信息数据的安全，它是一个非常可靠，非常安全的应用程序。 管理员权限操作的功能包括管理公告，管理综合小区管理系统信息，包括出入管理，报修管理，报修管理，物业费缴纳等，可以管理操作员。 出入管理界面，管理员在出入管理界面中可以对界面中显示，可以对招聘信息的招聘状态进行查看，可以添加新的招聘信息等。报修管理界面，管理员在报修管理界面中查看奖罚种类信息，奖罚描述信息，新增奖惩信息等。车位管理界面，管理员在车位管理界面中新增。公告管理界面，管理员在公告管理界面查看公告的工作状态，可以对公告的数据进行导出，可以添加新公告的信息，可以编辑公告信息，删除公告信息。
flexbox布局实现效果
07-20
Flexbox（弹性盒子布局）是一种用于在容器中进行灵活布局的CSS布局模型。它提供了一种简单而强大的方式来对元素进行对齐、排列和分配空间。 下面是一些常见的Flexbox布局效果： 1. 垂直居中： ```css .container { display: flex; align-items: center; justify-content: center; } ``` 2. 水平居中： ```css .container { display: flex; justify-content: center; } ``` 3. 等分宽度： ```css .container { display: flex; } .item { flex-grow: 1; } ``` 4. 换行排列： ```css .container { display: flex; flex-wrap: wrap; } ``` 5. 侧边栏布局： ```css .container { display: flex; } .sidebar { flex-basis: 25%; } .content { flex-grow: 1; } ``` 以上只是一些常见的Flexbox布局示例，实际上Flexbox提供了更多的属性和功能，可以根据具体需求进行灵活的布局设计。要使用Flexbox布局，只需将元素的`display`属性设置为`flex`或`inline-flex`，然后使用相应的属性来控制布局效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值