练习 | flex布局------目标100个

已于 2022-06-05 16:21:04 修改
阅读量413 收藏 3
点赞数 1
分类专栏： 练习 文章标签： css css3 html
于 2021-08-20 09:45:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A123ppleQueen/article/details/119815826
版权

昨天本来以为自己什么都懂了，结果一做题就显出原形。

1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
			width: 200px;
			height: 200px;
			background-color: #000000;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.c{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="c"></div>
		</div>
	</body>
</html>

2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
			width: 200px;
			height: 200px;
			background-color: #000000;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;
			align-items: center; 
		}
		.c{
			width: 60px;
			height: 50px;
			background-color: yellow;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="c"></div>
			<div class="c"></div>
			<div class="c"></div>
			<div class="c"></div>
			<div class="c"></div>
			<div class="c"></div>
		</div>
	</body>
</html>

3-------*

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
			width: 200px;
			height: 200px;
			background-color: #000000;
			display: flex;
			justify-content:space-between;
		/* 	align-items: flex-start; */
		}
		.c{
			width: 50px;
			height: 50px;
			background-color: yellow;
		}
		.d{
			width: 50px;
			height: 50px;
			background-color: greenyellow;
		 	align-self: flex-end; 
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="c"></div>
			<div class="d"></div>
		</div>
	</body>
</html>

4

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
			width: 200px;
			height: 200px;
			background-color: #000000;
			display: flex;
			justify-content:space-between;
		}
		.c{
			width: 50px;
			height: 50px;
			background-color: yellow;
		}
		.d{
			width: 50px;
			height: 50px;
			background-color: greenyellow;
		 	align-self: center; 
		}
		.f{
			width: 50px;
			height: 50px;
			background-color: coral;
		 	align-self: flex-end; 
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="c"></div>
			<div class="d"></div>
			<div class="f"></div>
		</div>
	</body>
</html>

5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
			width: 280px;
			height: 300px;
			background-color: #000000;
			display: flex;
			flex-wrap: wrap;
			justify-content:space-between;
		}
		.c{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		.d{
			width: 100px;
			height: 100px;
			background-color: greenyellow;
		}
		.f{
			width: 100px;
			height: 100px;
			background-color: coral;
		 	align-self: flex-end; 
		}
		.g{
			width: 100px;
			height: 100px;
			background-color: gold;
		 	align-self: flex-end; 
			
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="c"></div>
			<div class="d"></div>
			<div class="f"></div>
			<div class="g"></div>
		</div>
	</body>
</html>

6

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
			width: 400px;
			height: 400px;
			/* 绿色 */
			background-color: #008000;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.father{
			width: 200px;
			height: 200px;
			/* 色 */
			background-color:dodgerblue;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}
	    .son{
			width: 50px;
			height: 50px;
			/* 咖啡色 */
			background-color: chocolate;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
	</body>
</html>

7.-----*

如果父元素不设置宽高，那么设置display:flex就无用-------这段话不确定，因为8是有效的

不懂这个

图一

图二 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
			width: 400px;
			height: 400px;
			/* 绿色 */
			background-color: #008000;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.father{
			width: 200px;
			height: 200px;
			/* 色 */
			background-color:dodgerblue;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}
	    .son{
			/* 这段代码的不同造成了两种效果 */
			/* width: 100px;
			height: 100px; */
			 /* 咖啡色 */
			background-color: chocolate;
			display: flex;
			justify-content: flex-end;
		}
		.fg{
			width: 50px;
			height: 50px;
			background-color: #00FFFF;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="father">
				<div class="son">
					<div class="fg"></div>
				</div>
			</div>
		</div>
	</body>
</html>

 8-----*

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
			width: 300px;
			height: 300px;
			background-color: #000000;
			display: flex;
			justify-content:space-between;
		}
		.item{
			width: 80px;
			height: 80px;
			background-color: #1E90FF;
			border: 1px solid green;
		}
		.first,.three{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.second{
			align-self: center;
		}
		</style>
	</head>
	<body>
		<div class="container">
		  <div class="first">
		    <div class="item"> </div>
		    <div class="item"> </div>
		  </div>
		   <div class="second">
		    <div class="item"> </div>
		  </div>
		    <div class="three">
		    <div class="item"> </div>
		    <div class="item"> </div>
		  </div>
		</div>
	</body>
</html>

9------*

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
		  width: 300px;
		  height: 300px;
		  background-color: skyblue;
		  display: flex;
		  justify-content: space-between;
		}
		.item{
		  width: 80px;
		  height: 80px;
		  background-color: blue;
		  border: 1px solid green;
		}
		.first,.three{
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		}
		</style>
	</head>
	<body>
		<div class="container">
		  <div class="first">
		    <div class="item"> </div>
		    <div class="item"> </div>
			<div class="item"> </div>
		  </div>
		    <div class="three">
		    <div class="item"> </div>
		    <div class="item"> </div>
			<div class="item"> </div>
		  </div>
		</div>
	</body>
</html>

前面这几道都是参考下面这篇文章仿写的

不知道文章链接在哪，我收藏里有，作者是北极光之夜。

10 两栏布局 左边宽度固定，右边自适应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
		  width: 1000px;
		  height: 300px;
		  background-color: skyblue;
		  display: flex;
		}
       .container div{
		   width: 300px;
		   height: 300px;
	   }
	   .one{
		   background-color: #008000;  
	   }
	   .two{
		   background-color: #1E90FF;
		   flex: auto;
	   }
		</style>
	</head>
	<body>
		<div class="container">
		 <div class="one"></div>
		 <div class="two"></div>
		</div>
	</body>
</html>

11.三栏布局 两边宽度固定，中间自适应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
		  width: 1000px;
		  height: 300px;
		  background-color: skyblue;
		  display: flex;
		}
       .container div{
		   width: 200px;
		   height: 300px;
	   }
	   .one{
		   background-color: #008000;  
	   }
	   .two{
		   background-color: #1E90FF;
		    flex:auto;
	   }
	   .three{
		   background-color: yellowgreen;  
	   }
		</style>
	</head>
	<body>
		<div class="container">
		 <div class="one"></div>
		 <div class="two"></div>
		 <div class="three"></div>
		</div>
	</body>
</html>

12.三栏等分布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
		  width: 1000px;
		  height: 300px;
		  background-color: skyblue;
		  display: flex;
		  justify-content: space-between;
		}
       .container div{
		   width: 400px;
		   height: 300px;
	   }
	   .one{
		   background-color: #008000;  
	   }
	   .two{
		   background-color: #1E90FF;
	   }
	   .three{
		   background-color: yellowgreen;  
	   }
		</style>
	</head>
	<body>
		<div class="container">
		 <div class="one"></div>
		 <div class="two"></div>
		 <div class="three"></div>
		</div>
	</body>
</html>

13.元素水平垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
		  width: 1000px;
		  height: 300px;
		  background-color: skyblue;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
      .one {
		   width: 300px;
		   height: 300px;
		   text-align: center; 
		   line-height: 300px;
	   } 
	   .two{
		   flex:auto;
	   }
		</style>
	</head>
	<body>
		<div class="container">
		 <h3 class="one">学习</h3>
		 <p class="two">
			 哈哈哈哈哈哈哈哈哈哈哈哈哈<br/>
			 或或或或或或或或或或或或或<br/>
			 啦啦啦啦啦啦啦啦啦啦啦啦啦<br/>
			 啦啦啦啦啦啦啦啦啦啦啦啦啦<br/>
			 哟哟哟哟哟哟哟哟哟哟哟哟哟<br/>
		 </p>
		</div>
	</body>
</html>

14圣杯布局----*

好像明白了如何嵌套flex 之后请看6 7 8和这和练习联合起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{
		  width: 1000px;
		  height: 400px;
		  background-color: skyblue;
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		}
      .one{
		  background-color: #008000;
		  width: 1000px;
		  height: 100px;
	  }
	 .two{
		 background-color: cadetblue;
		 width: 1000px;
		 display: flex;
		 flex-direction: row;
		 justify-content: space-between;
	 }
	 .a,.c{
		 width: 200px;
		 background-color: #1E90FF;
		 height: 200px;
	 }
	 .b{
		 flex:auto;
		 background-color: pink;
	 }
	  .five{
		  background-color: greenyellow;
		  width: 1000px;
		  height: 100px;
	  }
	 
		</style>
	</head>
	<body>
		<div class="container">
		<div class="one"></div>
		<div class="two">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
		</div>
		<div class="five"></div>
		</div>
	</body>
</html>

这几个仿写的是 努力飞翔的小菜鸟   flex布局实现各种布局效果

15.一个提问题

从提问题那拿过来的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		html,body{
			width: 970px;
			height: 570px;
		}
		/* 第一部分 */
		/* 第一部分布局代码 */
		.header{
			display: flex;
			justify-content: space-around;
			margin-bottom: 10px;
		}
		.footer{
			background-color: pink;
		}
		.logo{
			width: 270px;
			height: 80px;
			background-color: red;
		}
		.language{
			width: 137px;
			height: 30px;
			background-color: greenyellow;
			margin-bottom: 10px;
		}
		.nav{
			width: 680px;
			height: 42px;
			background-color: greenyellow;
		}
		/* 第一部分布局代码 */
		.greenYellow{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}
		/* 第二部分 */
		 .ad{
			width: 310px;
			height: 435px;
			background-color: #4169E1;
			margin-right: 10px;
		}
		.news{
			width: 450px;
			height:240px;
			background-color: gold;
			margin-bottom: 10px;
		}
		.info{
			width: 450px;
			height: 110px;
			background-color: gold;
			margin-bottom: 10px;
		}
		.hot{
			width: 450px;
			height: 30px;
			background-color: gold;
			margin-bottom: 10px;
		}
		.gallary{
			width: 190px;
			height: 400px;
			background-color: pink;
		}
		.link{
			width:650px;
			height:25px;
			background-color: #008000;
		}
		.content{
			display: flex;
			justify-content: space-around;
			margin-bottom: 10px;
		}
		.orangePinkGreen{
			display: flex;
			justify-content: space-between;
		}
		.orange{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.orangePink{
			display: flex;
			justify-content: space-between;
		}
		/* 第三部分 */
		.footer{
			width: 970px;
			height: 35px;
			background-color: skyblue;
		}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="logo"></div>
			<div class="greenYellow">
				<div class="language"></div>
				<div class="nav"></div>
			</div>
		</div>
		<div class="content">
			<div class="ad"></div>
			<div class="orangePinkGreen">
				<div class="orangePinkGreen2">
				<div class="orangePink">
				<div class="orange">
					<div class="news"></div>
					<div class="info"></div>
					<div class="hot"></div>
				</div>
				<div class="gallary"></div>
				</div>
				<div class="link"></div>
			</div>
			</div>
		</div>
		<div class="footer"></div>
	</body>
</html>

快乐的高兴的学习代码中
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端Flex布局练习之3D骰子
pretty6cool的博客
12-04 737
flex布局练习,会动的3d骰子,少年不来看看嘛?
FlexLayoutTableta：IT学院-Mòdul3 Flex布局-Exercici 2-Aprendre Flexbox，每个脚本均可响应
02-10
`声明的CSS样式，定义了一个Flex布局的容器。容器将决定子元素如何在一行或多行中排列。 2. **Flex项（Flex Items）**：容器内的子元素成为Flex项，它们可以沿着主轴（flex-direction定义的方向）自由伸缩。 3. **...
flex布局青蛙游戏答案（前端CSS弹性布局练习）
Yongqiang Chen的博客
02-20 852
#青蛙游戏# flex布局青蛙游戏答案（前端CSS弹性布局练习）
css布局 flex布局 grid网格布局 布局练习
好好学习天天向上
06-04 1851
flex是CSS3中新增的布局手段，它主要用来代替浮动来完成页面的布局。主轴：弹性元素的排列方式为主轴 侧轴：与主轴垂直方向为侧轴justify开头表示与主轴相关 align开头表示侧轴相关指定容器中弹性元素的排列方式，设置主轴方向 row 默认值，弹性元素在容器中水平排列 从左向右 row-reverse 默认值，弹性元素在容器中水平排列 从右向左 column 弹性元素纵向排列 自上向下 column-reverse 弹性元素纵向排列 自下向上 设置弹性元素是否在弹性容器中自动换行 nowrap:默认值
flex的骰子练习，如何系统全面性学习Web前端语言
最新发布
m0_61330875的博客
04-17 581
先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大
flex布局练习题，面试必备，持续更新建议收藏~
你好呀，很高兴你在看这里~
06-15 5243
现在网页布局大多都是flex布局，像浮动这些用得比较少，在面试中flex也是被经常问到的。而有些同学学完flex后，又不懂怎么练习巩固，所以，所以，所以，我汇聚了一些常见的flex的练习题案例，写完再次加强掌握flex~
flex布局和float布局练习
2301_77698736的博客
09-24 127
【代码】flex布局和float布局练习。
练习flex布局
_小郑有点困了的博客
04-05 790
联系flex布局 头部样式，使用flex，两边有宽，中间flex：1，占满剩余 1，效果 2，html 3，css 宫格样式，有两种实现方式： 效果： 1，使用table，table-cell，外层盒子display：table;里层元素，display：table-cell，宽度百分比，左浮动 1.1html 1.2css 2，使用flex布局，外层盒子display: flex; ...
Flex使用指南，面试题附答案
2401_84098033的博客
04-03 2255
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
exercice-legoFlex:100％FlexBox
05-07
标题 "exercice-legoFlex:100％FlexBox" 指向的是一个练习项目，该项目完全基于Flexbox布局模型，旨在帮助开发者掌握和应用Flexbox特性来构建网页布局。Flexbox，全称为“Flexible Box”，是CSS3中的一种布局模式，...
interface-instagram:运用html和css进行练习
03-16
3. **布局技术**: 使用`display`属性实现流式布局（如`block`和`inline-block`）、网格布局（`grid`）或Flex布局（`flexbox`）。 4. **颜色**: 可以使用颜色名称、十六进制值（如`#ffffff`）、RGB（如`rgb(255, 255,...
flex官方视频教程和练习源代码
08-24
本来是有天的东西,可是第三的代码就超过30M,上传不上来,只有1，2，4.从简到难,非常详细.
初学FLEX做的小练习
05-08
练习涉及到FLEX常用控件，与后台交互的数据服务（RemoteObject,WebService）,FLEX的几种导航，FLEX事件。 详见作者博客 http://blog.csdn.net/iamyzs/article/details/7540962； http://blog.csdn.net/iamyzs/article/details/7541582； http://blog.csdn.net/iamyzs/article/details/7541256；
exercicios-flexbox：Exercicios Flexbox
02-18
在“exercicios-flexbox：Exercicios Flexbox”项目中，我们可以推测这是一个关于Flexbox布局的实践练习集，旨在帮助学习者通过实际操作来掌握Flexbox的各种特性。 在HTML中，我们通常结合CSS来实现Flexbox布局。...
goit-markup-hw-05
03-28
- `display`属性可以改变元素的显示方式，如设置为`inline-block`或`flex`。 【实战练习】 "goit-markup-hw-05-main"可能是项目主文件夹，包含完成这个HTML练习所需的所有文件。学生可能需要创建一个HTML文档，...
Flex布局案例练习（二）- 自适应布局
JHY97的博客
01-25 1561
Flex布局简单案例练习 一、自适应布局 不同的设备用不同的页面或局部伸缩 设计思路：判断设备的类型或控制局部的变化
Day04-Flex布局补充+实战演练
weixin_45831040的博客
09-07 453
orders.html base.css orders.css 二、Flex布局补充 1.1 主轴方向 目标：使用flex-direction改变元素排列方向主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 目标：使用flex-wrap实现弹性盒子多行排列效果弹性盒子换行显示 : flex-wrap: wrap;调整行对齐方式 ：align-content，取值与justify-content基本相同 center.html base.css center.css
Flex布局案例练习（一）
JHY97的博客
01-24 494
练习flex布局，以输入框为例 1.代码
保姆级flex弹性布局教程
Dpxuaobao的博客
07-19 678
当flex项目的总宽度超过容器的宽度，将自然换行、换列。如果需要 两端对齐，中间的距离是两端和容器距离的2倍则需将其更改为 justify-content: space-around;如果需要两端对齐，中间距和容器两端的距离相等则将其改为 justify-content: space-evenly;上面的是flex默认的左对齐，如果需要右对齐就需要再新增一个样式 justify-content: flex-end;当flex项目的总宽度超过容器的宽度，flex项目将按照原有比例强行等分，且不换行。
css flex 等比布局 flex-grow
01-18
以下是一个使用flex-grow属性实现等比布局的示例： ```html <div class="item item1">Item 1 <div class="item item2">Item 2 <div class="item item3">Item 3 ``` ```css .container { display: flex; } ....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值