flex语法及练习

最新推荐文章于 2023-09-13 16:21:52 发布
最新推荐文章于 2023-09-13 16:21:52 发布
阅读量675 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrzzhou/article/details/74936587
版权
FLEX布局
1.在外层容器设置display：flex; 内部的节点称为项目。
2.flex有两条轴，水平的主轴，和垂直的交叉轴
3.容器的6个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content
flex-direction 表示主轴的方向:row（水平向右(默认)）/row-reverse（水平向左）/column（竖直向下）/column-reverse（竖直向上）;
flex-wrap 表示轴线排满的换行方式:wrap（自动换行）/nowrap（禁止换行（默认））/wrap-reverse（向上换行）
flex-flow前两个的合集：比如row wrap;
justify-content 水平方向的排列方式:flex-start（左对齐(默认)）/flex-end（右对齐）/center（居中）/space-between（两端对齐）/space-around（等间隔排列，两端项目距离边界为项目间距离的一半）;
align-items 垂直方向的对齐方式：flex-start（向上对齐）/flex-end（乡向下对齐）/center（垂直居中）/stretch（没有设置高度的情况下，垂直方向上拉伸铺满（默认））/baseline（以项目的第一行文字的基线对齐）
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用：flex-start/flex-end/center/stretch/space-between/space-around

4.项目的属性：order/flex-grow/flex-shrink/flex-basic/flex/align-self
order:属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow:属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis。。。。。。。。。。。。。， :属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex:属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。auto | flex-start | flex-end | center | baseline | stretch;
5.使用flex实现元素的水平垂直居中
在默认也就是flex-direction: row;下比较正常，justify-content就是水平居中，而align-items就是垂直居中，但是 在flex-direction 为column下实现水平垂直居中情况就反过来了，设置align-items:center;结果是水平居中，而设置justify-content:center；则为垂直居中 

<!DOCTYPE html>
<html>
<head>
	<title>flex布局练习</title>
	<style type="text/css">
		html,body{
			background: #8E8E8E;
		}
		.wraper{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.container{
			display: flex;
			width: 200px;
			height: 200px;
			padding: 20px;
			margin-bottom: 80px;
			box-sizing: border-box;
			border-radius: 5px;
			background: #E4E4E4;
			box-shadow: 1px 1px  2px 2px #BFBFBF;
		}
		.container > .container{
			margin-left: 80px;
		}
		.dot{
			width: 40px;
			height: 40px;
			background: #242424;
			border-radius: 20px;
		}
		/*一点*/
		.box1{
			justify-content: center;
		}
		.item11{
			align-self: center;
		}
		/*二点*/
		/*.box2{
			align-content: space-between;
			flex-wrap: wrap;
		}
		.test{
			display: flex;
			flex-basis: 100%;
		}*/
		.box2{
			justify-content: space-between;
		}
		.item22{
			align-self: flex-end;
		}
		/*三点*/
		.box3{
			justify-content: space-between;
		}
		.item32{
			align-self: center;
		}
		.item33{
			align-self: flex-end;
		}
		/*四点*/
		.box4{
			align-content: space-between;
			flex-wrap: wrap;
		}
		.box4 .group{
			flex-basis: 100%;
			display: flex;
			justify-content: space-between;
		}
		/*五点*/
		.box5{
			align-content: space-between;
			flex-wrap: wrap;
		}
		.box5 .group{
			display: flex;
			flex-basis: 100%;
			justify-content: space-between;
		}
		.box5 .group:nth-child(2){
			justify-content: center;
		}
		/*六点*/
		.box6{
			justify-content: space-between;
		}
		.box6 .group{
			display: flex;
			flex-wrap: wrap;
			flex-basis: 40px;
		}
		.box6 .group .dot:nth-child(2){
			align-self: center;
		}
		.box6 .group .dot:nth-child(3){
			align-self: flex-end;
		}
	</style>
</head>
<body>
	<div class="wraper">
		<div class="box1 container">
			<span class="item11 dot"></span>
		</div>
		<div class="box2 container">
			<span class="dot"></span>
			<span class="dot item22"></span>
		</div>
		<div class="box3 container">
			<span class="dot"></span>
			<span class="dot item32"></span>
			<span class="dot item33"></span>
		</div>
		<div class="box4 container">
			<div class="group">
				<span class="dot"></span>
				<span class="dot"></span>
			</div>
			<div class="group">
				<span class="dot"></span>
				<span class="dot"></span>
			</div>
		</div>
		<div class="box5 container">
			<div class="group">
				<span class="dot"></span>
				<span class="dot"></span>
			</div>
			<div class="group">
				<span class="item53 dot"></span>
			</div>
			<div class="group">
				<span class="dot"></span>
				<span class="dot"></span>
			</div>
		</div>
		<div class="box6 container">
			<div class="group">
				<span class="dot"></span>
				<span class="dot"></span>
				<span class="dot"></span>
			</div>
			<div class="group">
				<span class="dot"></span>	
				<span class="dot"></span>
				<span class="dot"></span>
			</div>
		</div>
	</div>
</body>
</html>



Aman920_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
aa.rar_flex_语法分析flex
09-14
编译程序。实现编译语法的分析，用flex自动生成编程，需要flex编译器，跟vc运行环境
【CSS3】flex-basis属性演示
iuukai
08-26 698
【传送门：阮一峰 - Flex 布局教程：语法篇】 相关文章： 1.【flex-grow】属性演示 2.【flex-shrink】属性演示 3.【flex-basis】属性演示 4.【flex】属性演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> bod
flex: 0 0 100%；
pig_ning的博客
06-25 1059
【代码】flex: 0 0 100%;
深入了解 Flex 属性
粉丝们务必加入微信粉丝群
09-22 1128
作者：Ahmad shaded 译者：前端小智 来源：sitepoint 移动端阅读：https://mp.weixin.qq.com/s/Tw7gezAn-ld97u8hkyD3kA 点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 你有没有想过 CSS 中的 flex属性如何工作？ 它是 flex-grow.
阮一峰flex 布局
qq_42263396的博客
07-01 1万+
loading..基本布局 display: flex 设置弹性布局，在九宫格中默认为靠左对其（第一行第一个）justify-centent：centent； 设置水平线上的元素居中 justify-centent: flex-end; 设置水平线上的元素靠右 align-items: center; 元素垂直移动，垂直居中，靠左对其 justify-centent：center；align-items：center；
flex布局-间隔均匀，最后一排左对齐排列
limmt2020的博客
04-19 3799
flex布局-间隔均匀，最后一排左对齐排列 在使用flex布局时，发现要使其间隔相同，当处于最后一行时排列将会有误 更改了样式之后，在要改的布局外加div，我定义为cardList，每块的card class名为card增加伪元素： .cardList{ display: flex; width: auto; justify-content: space-between; flex-wrap:wrap } .cardList:after{ content: ""; width: 3
flex4之语法入门.doc
04-12
flex4之语法入门.doc
Flex 布局教程：语法篇.doc
05-31
Flex 布局教程：语法篇 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称...
Flex布局基本语法.xmind
07-28
Flex布局基本语法,各属性及其取值树状图整理
flex 间距_聊一聊Flex布局
weixin_39844901的博客
11-26 1万+
Flex布局目前对于前端来说已经是一个非常熟悉且常用的布局方案了。有了它，我们很大程度上就可以避免原来让人头秃的正常流布局带来的很多IFC（inline-formatting-context）问题。随着浏览器的支持性不断增强，基本上我们日常的业务开发中95%以上的布局都可以通过Flex轻松解决。但是最近团队面试过程中，我却发现大部分同学对于Flex的理解并没有想象中的那么清晰深入，大部分都只是停留...
弹性布局（display:flex；）属性详解
qq_45689637的博客
11-02 4505
参考：https://www.cnblogs.com/hellocd/p/10443237.html Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：
flex布局之作用在子元素上的属性
weixin_43465508的博客
03-29 849
flex-growflex-shrinkflex-basis默认值是，表示不占用剩余的空白间隙扩展自己的宽度扩展来分配左边的空隙子元素宽度 = 子元素宽度+（父元素宽度-子元素宽度）*（小数） 1.2多个元素的时候，0-1之间的数，每个子元素分配与单个的情况不变，大于一的时候按占比来分配 2、flex-shrink -- 收缩比列 默认值 自动收缩 跟容器的大小相同 flex-shrink: 1; 如果是 0 那就不收缩 flex-shrink: 0; 超出父元素的宽度与这个系数做乘法运算
Flex 布局教程：实例篇
weixin_30409849的博客
09-03 3233
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节...
前端Flex布局练习之3D骰子
pretty6cool的博客
12-04 725
flex布局练习,会动的3d骰子,少年不来看看嘛?
flex布局语法以及实操，一文带你吃透flex布局的基础
心态的博客
09-13 1543
Flex弹性布局已是目前最为流行的布局方式之一，它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。以上就是今天要讲的内容，本文仅仅简单介绍了Flex布局的使用，而Flex的功能还不止于此，如果大家还想了解更多的前端知识和flex布局的相关内容，可以到MDN上面去了解更多的知识，学无止尽。
练习 | flex布局------目标100个
A123ppleQueen的博客
08-20 407
昨天本来以为自己什么都懂了，结果一做题就显出原形。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .container{ width: 200px; height: 200px; background-color: #000000; display: fle..
css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解
热门推荐
m0_37058714的博客
06-21 8万+
flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是   flex-basis  ，basis英文意思是&lt;主要成分&gt;，所以他和...
flex-basis 的真正的使用方法以及flex-shrink计算方法
lmmxxoo的博客
10-16 1万+
flex-basis flex-basis 属性用于设置或检索弹性盒伸缩基准值。 属性值 可以是长度单位，也可以是百分比，百分比是按照父元素的width为标准。 默认值为 0，不是 auto，如果取值为 auto 的话，它的值就等于 flex-items 的 width（或者默认的大小，width没有设置的话）。 使用方法 配合 flex-wrap 一起使用，如果 flex-wrap 的值为 no...
flex 布局练习题
最新发布
09-20
以下是一些flex布局的练习题案例： 1. 使用flex布局实现一个上下结构的容器，容器高度为100vw（视口宽度），背景颜色为skyblue。容器内有两个子元素，第一个子元素高度为父容器的一半，第二个子元素高度为父容器的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值