初识Flexbox 布局

最新推荐文章于 2017-09-22 11:20:56 发布
最新推荐文章于 2017-09-22 11:20:56 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： 前端之webPageMaking
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuew1987/article/details/16975087
版权

一、首先创建一个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>


 


 

BJ_benjamin
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flexbox弹性布局初识
sinat_33940108的博客
03-12 76
弹性布局非常常用，必须掌握。 flex父容器属性 flex-direction属性：子项目排列方向 flex-warp： 子项目多行 flex-flow子项目多行一起指定 justify-content: 水平对齐 align-items ： 垂直对⻬ align-content : 多行对齐。只在多行有多行元素时起作用，单行元素不起作用 flex子项目 order flex-grow 子项目延申比率 3. 其他属性 测试代码 html <!DOCTYPE html>
flexbox实例
05-08
flexbox实例、
flexbox常用布局上下固定，中间滚动
weixin_30632883的博客
08-03 80
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> html...
使用flexbox简单实现垂直居中布局
CC_leather的博客
09-22 637
垂直居中一直是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 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容
CSS3 Flexbox布局
iteye_15118的博客
07-12 87
初识Flexbox Flexbox布局俗称伸缩布局，它可以简单快速的创建一个具有弹性功能的布局。一个Flexbox布局是由一个伸缩容器（flex containers）和在这个容器里的伸缩项目（flex items）组成。伸缩容器（flex containers）是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩 项目（f...
FlexBox布局初识 - 主轴和侧轴
08-09 8498
CSS布局有“盒子模型”，依赖 display属性 ， position属性， float属性。但对于那些特殊布局非常不方便，比如，垂直居中。一种全新的针对web和移动开发布局应运而生：Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。FlexBox布局大部分情况下是处理图中FlexItem在FlexContainer
CSS3 Flexbox布局那些事
weixin_30655569的博客
11-28 186
相信研究过CSS3的同学对Flexbox布局一定不会陌生（作为一个未来主流的布局方式，至少有所耳闻）。最近完成了两个项目：一个是移动端H5项目，一个是嵌入HTML页面的mac客户端项目。为了庆祝这两个项目不用再兼容万恶的IE，同时要体现出现代浏览器的优势，决定在项目中尝试使用Flexbox布局。项目第一个版本完成后回过头来看，还是有不少需要注意的地方。现将项目中的一些经验总结一下，希望能够对想尝试...
精通CSS.DIV网页样式与布局 第1课 初识CSS.rar
07-14
在本课程“精通CSS.DIV网页样式与布局 第1课 初识CSS”中，我们将深入探讨CSS（层叠样式表）的基础知识及其在网页设计中的核心作用。CSS是网页设计的重要组成部分，它允许我们控制网页的外观和布局，使网页更加美观...
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. **...
文字“中间划线”的几种CSS实现
热门推荐
Benjamin——前端攻城师
09-21 2万+
写在前面的话，今天中秋假期最后一天，明天又得开始苦逼的生活了，在地铁上看到一篇文本“中间划线” 的微博，有点时间测试下，增长点小知识。 1)首先来看看text-decoration这个属性 可能的属性值： 浏览器支持如下图： 所有主流浏览器都支持 text-decoration 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "i
IE6/7下移除button、input 默认边框和去掉焦点线
Benjamin——前端攻城师
08-15 5906
一、去掉边框： 看看基本的HTML： 通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签，然后将样式写在这个标签上，并且把button和input的默认样式都去除掉。 实现方式一：设置CSS： input{margin:0;padding:0;} .wrap{background-color:#0f0;} .input_
兼容所有浏览器的页面黑白代码
Benjamin——前端攻城师
04-26 4104
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grays
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、付费专栏及课程。

余额充值