css之flex实例学习

最新推荐文章于 2024-05-21 19:43:55 发布
最新推荐文章于 2024-05-21 19:43:55 发布
阅读量513 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010503427/article/details/83502255
版权

1、 一个圆点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.outer{
				display:flex;
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
		
		</style>
	</head>
	<body>
		
		<div class="outer">
			<div class="inner">1</div>
		</div>
	</body>
</html>

2、两个圆点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				justify-content: space-between;
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
		
		</style>
	</head>
	<body>
		
		<div class="outer">
			<div class="inner">1</div>
			<div class="inner">2</div>
			
			
		</div>
	</body>
</html>


<style type="text/css">
			.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				justify-content: space-between;
				flex-direction: column;
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
		
		</style>


<style type="text/css">
.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				/*justify-content: space-between;*/
				/*flex-direction: column;*/
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
			.inner:nth-child(2){
				align-self:center;
			}
		
		</style>


<style type="text/css">
.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				justify-content: space-between;
				/*flex-direction: column;*/
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
			.inner:nth-child(2){
				align-self:flex-end;
			}
		
		</style>


<style type="text/css">
			.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				/*justify-content: space-between;*/
				/*flex-direction: column;*/
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
			.inner:nth-child(2){
				align-self:flex-end;
			}
		
		</style>

3、flex属性使用

<style type="text/css">
			.outer{
				display:flex;
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color: burlywood;
				border-radius: 25px;
			}
			.inner:nth-child(1){
				flex:2;
				order:4;
			}
			.inner:nth-child(2){
				flex:1;
				order: 10;
				
			}
			.inner:nth-child(3){
				flex:1;
				order: 8;
			}
		
		</style>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

老王爱敲代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS之flex布局
dachaoxuexi的博客
02-13 1576
</div>.item1 {.item2 {.item3 {.item4 {
CSS（三）flex布局（flex弹性布局详解）
前端产品工程师
08-11 1万+
这是一个系列的文章，你也可以查看其他文章： 0、CSS-预热篇 1、CSS（一）详解position 2、CSS（二）transform 3、CSS（三）flex布局（flex弹性布局详解） 4、CSS（四）详解Grid布局 5、CSS（五）CSS动画-transition简介 6、CSS（六）CSS动画-animation简介 7、CSS(七)两栏布局详解 早期CSS三大难题包...
CSS中的Flex布局
最新发布
zheshiyangyang的博客
05-21 1985
Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。
CSS之Flex布局
qq_57907966的博客
02-18 1023
Flex布局
CSS 之 Flex布局
热门推荐
qq_33934427的博客
01-06 3万+
CSS 之 Flex布局 文章目录CSS 之 Flex布局1、Flex布局 vs 网格布局 （1D vs 2D）2、Flex属性1）flex-direction属性 & 排列方向2）flex控制横纵轴 & 排列顺序（单/双项目）a）理解justify-content & align-itemsb）理解justify-content ：space-betweenc）for循环排列卡片3、Flex响应式布局 1、Flex布局 vs 网格布局 （1D vs 2D） 个人理解：Flex是一维
CSS3 flex弹性布局
xiangxiongfly
07-21 1593
CSS3新增了一种新型的弹性盒子模型。通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。 此外记住一点：在使用弹性盒子模型之前，你必须为父元素定义display:flex;或display:inline-flex;，这样父元素才具有弹性盒子模型的特点。
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
div+css 不错的学习实例
10-22
本资料包提供了一系列丰富的学习实例，涵盖了企业网站和电子商务网站等多种场景，旨在帮助初学者和进阶者深入理解和掌握Div+CSS布局技术。 Div（Division）在HTML中是一个块级元素，常用于对网页内容进行分组，以...
CSS布局及实例文件
12-16
在网页设计领域，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页布局...通过学习和掌握各种布局技术，开发者可以灵活地构建任何复杂的网页结构，"LOL首页"案例就是一个很好的实践平台。
几个CSS3的flex弹性盒模型布局的简单例子演示
09-24
Flex布局，全称为Flexible Box，是CSS3引入的一种全新的布局模式，旨在解决传统布局（如块状布局、网格布局）在处理动态内容和响应式设计时的局限性。它允许开发者更加灵活地调整元素的大小、位置和顺序，特别是在...
css-flex布局
YogaMiller的博客
08-09 718
想写一个左边固定(根据内容撑开)右边自适应的布局(重构) 不知道啥影响的, 右边不会自适应, 没办法, 回来看看flex。
flex移动布局，极简公共样式包，附demo
04-12
flex移动布局，极简公共样式包，可极大程度节约前端切图时间，对于响应式切图极为实用，兼容性较好，尤其适用于APP混合开发，附简易demo
微信小程序 （flex布局 项目属性）
weixin_45343878的博客
08-21 1230
项目属性：设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。 项目元素属性集合：order、flex-grow、flex-shrink、flex-basis、flex、align-self 项目属性： ①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数> ②项目的收缩因子flex-shrink: 1（默认值） | ③项目的扩张...
CSS Flex布局示例
baidu_41388533的博客
02-27 436
CSS Flex布局示例 flex布局基本知识参考：CSS 布局专题2--flex布局 [转]_baidu_41388533的博客-CSDN博客 主轴与交叉轴 Flex容器与Flex子项 示例 实现： .main{ height:200px; background: skyblue; display: flex; align-items: center; } .main div{ width:50px; height:100px; ..
【CSS】当有flex:1时定义width:0的作用是什么？
a1071626267的博客
06-08 1553
【CSS】当有flex:1时定义width:0的作用是什么？
CSS 浅探flex布局中使用的overflow ，及width/height=0
japlus的博客
11-27 9130
w3school定义是： overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 对于overflow:auto的初级理解是，设置父元素height/width，若子元素溢出，则自动显示纵向/横向滚动条。 .........
css dispay设置flex后width属性无效
烽人的博客
04-13 787
css 当dispay设置flex后width属性无效的问题 解决办法之一： 用min-width代替
css中flex:1弹性布局例子
disadministrator的专栏
01-19 6674
#main { width: 220px; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items:
前端学习（1815）：前端调试之css flex 练习1
歌谣的博客
07-31 194
index.html <!DOCTYPE html> <html lang="en"> <head> <!--系统内置 start--> <script type="text/javascript"></script> <!--系统内置 end--> <meta charset="UTF-8" /> <meta name="viewport" content="
弹性盒子布局flex实例
05-31
好的，以下是一个简单的弹性盒子布局flex的实例代码： HTML: ``` <div class="item">1 <div class="item">2 <div class="item">3 ``` CSS: ``` .container { display: flex; flex-wrap: wrap; justify-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值