移动端笔记（二）-----弹性盒子

已于 2022-04-28 22:54:43 修改
阅读量249 收藏 3
点赞数 2
分类专栏： 移动端 文章标签： html css html5 css3 前端框架
于 2022-03-24 22:07:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45904557/article/details/123719834
版权

flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 flex 布局。

加入display：flex之后将会变成弹性盒子


.box{
  display: flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。


.box{
  display: -webkit-flex; 
  display: flex;
}

注意，设为 Flex 布局以后，弹性盒子里的子元素的float、clear和vertical-align属性将失效。

二、什么是弹性盒子？

给元素加上display：flex之后就会变成弹性盒子，这个盒子也叫容器，里面的直接子元素称为项目

容器默认存在两根轴：水平的主轴  ┉  和垂直的交叉轴   ┋。

加了display：flex之后，下面的div就会在主轴从左往右排，类似于加了float：left

从起点到终点

三、容器的属性

1. justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
				display: flex;
				/* justify-content: flex-start; */
				/* justify-content: flex-end; */
				/* justify-content: center; */
				/* justify-content: space-around; */
				/* justify-content: space-between; */
				justify-content: space-evenly;
				width: 500px;
				height: 500px;
				background-color: pink;
			}

flex-start默认，左对齐
flex-end右对齐
center居中对齐
space-between两端对齐，每两个项目之间的距离相等。
space-around每1个项目两侧的距离相等。
space-evenly每两个项目之间的距离与边沿项目距离容器之间的距离相等

01.flex-start   默认，左对齐


 

02.flex-end    右对齐

03.center   居中对齐

04.space-around  每1个项目两侧的距离相等。。

05.space-between   ​​​​​​​两端对齐，每两个项目之间的距离相等

06.space-evenly      每两个项目之间的距离与边沿项目距离容器之间的距离相等

2. align-items属性

align-items属性定义项目在交叉轴上如何对齐。  垂直（从上到下。）

				.box {
					display: flex;
				/* align-items: stretch; */
				/* align-items: flex-start; */
				/* align-items: flex-end; */
				/* align-items: center; */
				align-items: baseline;
				
					width: 500px;
					height: 500px;
					background-color: pink;
				}

stretch

默认值，如果子元素项目未设置高度或设为auto，那么将占满整个容器的高度。
flex-star交叉轴的起点对齐
flex-end交叉轴的终点对齐。
center交叉轴的中点对齐
baseline项目的第一行文字的基线对齐。

01.stretch   如果子元素项目未设置高度或设为auto，那么将占满整个容器的高度。

以下是没有设置高度的效果：

注意：如果加了display：flex，图片变形，就给子元素加高度 或者添加交叉轴的align-items：center

02.flex-start：交叉轴的起点对齐。

03.flex-end：交叉轴的终点对齐。

04.center：交叉轴的中点对齐。

05.baseline: 项目的第一行文字的基线对齐。

学完习和两个元素之后我们就又学到了一个简单快捷的

居中对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 300px;
				height: 300px;
				background-color: pink;
			}

			.box1 {
				width: 100px;
				height: 100px;
				background-color: red;
			}

		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>

		</div>
	</body>
</html>

3. flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
				display: flex;
              flex-direction: column;
            /* flex-direction: column-reverse;
             flex-direction: row;
             flex-direction: row-reverse; */
             align-items:center;
             justify-content: center;
				width: 500px;
				height: 500px;
				background-color: pink;
}

有四个值：

  • row：  （默认值），行，主轴为水平方向，起点在左，从左往右
  • row-reverse：  主轴为水平方向，起点在右，从右往左
  • column：  主轴为垂直方向，起点在上沿，从上往下，改变之后对齐方式也会改变
  • column-reverse：  主轴为垂直方向，起点在下沿，从下往上

效果如下：

01.row（默认值）：主轴为水平方向，起点在左端。

02.row-reverse：主轴为水平方向，起点在右端。

 

03.column：主轴为垂直方向，起点在上沿。

04.column-reverse：主轴为垂直方向，起点在下沿。

4. flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。


.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。


.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

四、项目的

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。


.item {
  order: <1>;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。


.item {
  flex-grow: <2>;
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。


.item {
  flex-shrink: <1>; 
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。


.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。


.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。


.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

Favour72
关注
专栏目录
CSS 布局 （Flex 布局）
Ee2222的博客
05-30 573
原则 要支持IE8用float布局，不必支持，flex布局 不到万不得已，不要写死 width 和 height 尽量用高级语法，如 calc、flex 如果要满足 IE，就全部写死 Float 儿子全加 float 老子加 .clearfix .clearfix简单写法 .clearfix:after{ content: ''; display: block; ...
前端学习笔记 - 移动端Web开发
fengxm0309的博客
10-18 1085
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可
css flex布局
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-25 340
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box............
CSS中的Flex布局
最新发布
zheshiyangyang的博客
05-21 9646
Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。
CSS之flex布局
一只努力搬砖的打工妹纸
06-27 2156
CSS中常用的flex布局
CSS flex布局
meteorshower2013的博客
07-10 248
学习参考 微信小程序开发指南： https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a 阮一峰博客： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuic...
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
weixin_46615135的博客
03-23 1498
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
html设置弹性盒子分配自适应比例,移动端弹性布局flex，CSS3自适应
weixin_42298164的博客
06-22 3505
1、Flex布局今天整理了一些关于Flex布局，参考了好多大神的杰做phpFlex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。css任何一个容器均可以指定为Flex布局。html.box{display: flex;}行内元素也可使用Flex布局。web.box{display: inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀...
2020-08-24 学习笔记 p20-p27 弹性布局 移动端 响应式 苹果官网头部 响应式导航 苹果官网
大可学习间
08-24 300
弹性布局1 (p20) 相关参考文档资料：https://www.runoob.com/w3cnote/flex-grammar.html 弹性容器： 设置了display:flex 这个元素为弹性容器，里面的子元素会按照弹性布局的方式进行布局 弹性子元素： 设置了display:flex 的弹性容器的直接子元素即为弹性子元素 flex-direction 设置主轴的分布方向 row（默认值）：主轴为水平方向，起点在左端。 （从左到右） row-reverse：主轴为水平...
笔记--移动Web开发(bootstrap框架响应式布局)
qq_43488583的博客
09-08 695
1. 响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕( 手机 ) <768px 小屏设备( 平板 ) >=768px ~ <992px 中等屏幕( 桌面显示器 ) >=992px ~ <1200px 宽屏设备( 大桌面显示器 ) >=1200px 1.2 响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 原理就
移动端页面（弹性盒模型布局）
08-23
弹性盒模型布局的仿某宝个人中心页面，涉及rem，在线小图标的使用
CSS flex布局
Glichi的博客
07-12 612
任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览器必须加上前缀-webkit .box{ display: -webkit-flex; /* Safari */ display: flex; } ++设置flex...
Css-flex 布局
阑珊伊人
05-05 761
Flex(Flexible Box)布局意为”弹性布局”,是CSS3最受欢迎的属性之一，简洁、快速，为盒状模型提供了最大的灵活性。 但是在使用该属性过程中，我们需要注意两点： Flex属性在webkit内核的浏览器中使用时，必须加上-webkit-前缀。 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 容器的属性 Flex具有以下六种容器属性。 ...
CSS Flex布局
c3H56的博客
02-21 113
经过这一段时间的学习，我发现flex布局是我目前的薄弱之处，也是相对重要的部分。 首先，先是了解概念： 基本概念：采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。这三条轴分别为水平主轴（main axis） 垂直交叉轴（cross axis）和项目默认沿主轴排列。 定义及其作用： Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的
CSS中的flex布局
weixin_67644104的博客
01-15 6648
CSS中的flex布局
CSS：flex布局
u013938578的博客
02-22 468
1.基本概念 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。 这里需要强调，不能先入为主认为宽度就
CSS之Flex布局
qq_57907966的博客
02-18 1044
Flex布局
css—flex布局
m0_64085523的博客
01-18 2424
flex布局 学习笔记一.简介：1.定义2.布局原理二.容器container（父元素）的属性1.flex-direction 设置主轴方向2.justify-content 设置主轴上子元素的排列方式3.flex-wrap 设置子元素是否换行4.flex-flow 复合元素，相当于同时设置了 flex-direction 和 flex-wrap5.align-items 设置侧轴上的子元素排列方式方式（单行）6.align-content : 设置侧轴上的子元素排列方式（多行）三,项目（item）子元
移动WEB开发 flex布局
Ulrica_Amaris的博客
03-19 353
flex布局 传统布局  兼容性好  布局繁琐  局限性，不能再移动端很好的布局 flex 弹性布局  操作方便，布局极为简单，移动端应用很广泛  PC 端浏览器支持情况较差  IE 11或更低版本，不支持或仅部分支持 flex布局体验 <style> span { width: 300px; height: 100px; background-color: green;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值