只因小黑子：flex布局复习

已于 2023-02-18 12:41:19 修改
阅读量120 收藏 1
点赞数
分类专栏： 前端 文章标签： css css3 html
于 2023-02-18 12:38:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VanWot/article/details/128512193
版权

小黑子的flex布局复习

flex布局

1. flex基础

  1. flex布局含义:
    -flex布局，也被称之为弹性盒子布局，是CSS3里面新增的一种布局
    方式，通过使用flex布局，我们可以让布局更加便捷高效.

  2. 如何触发弹性盒子:
    -给父元素添加display属性,并且将取值设置成:flex

  3. 触发弹性盒子有哪些特点?

    1. 子元素默认横向显示

    2. 子元素会默认变成块级元素,能设置宽度高度

    3. 如果只有一个子元素的话，则给子元素添加margin:auto的时候
      会让子元素垂直水平居中

2. Flex布局基础概念

  1. flex容器：采用flex布局的元素的父元素；
  2. flex项目：采用flex布局容器里面的子元素；
  3. 主轴：触发弹性盒子后，项目的排列方向；
  4. 横轴(水平轴)：水平方向轴线；
  5. 纵轴(垂直轴)：垂直方向轴线；
  6. 侧轴(交叉轴)：触发弹性盒子后，与主轴对立的方向。
  7. 注意:触发弹性盒子之后,项目默认沿主轴排列。

3. display:flex 弹性盒子

影响:
1.子元素默认横向排列
2.行内元素，变成了块级元素
3.只有一个元素的时候， margin:auto 自动居中
4.与浮动没有任何关系

4. flex-direction 修改主轴方向

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

修改主轴方向
flex-direction:row                   水平方向排列
flex-direction:row-reverse           水平方向反向排列
flex-direction:column                竖直方向排列
flex-direction:column-reverse        竖直方向反向排列

5. justify-content 调整主轴对齐方式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

调整主轴对齐方向

  • justify-content:flex-start 主轴默认对齐
  • justify-content:flex-end 主轴对齐后面（项目之间无间距）
  • justify-content:center 主轴中间对齐（项目之间无间距）
  • justify-content:space- between 主轴两端对齐（项目之间无间距）
  • justify-content:space-around 主轴每个元素距离环绕，项目与项目之间距离是首尾项目与容器之间距离的2倍
  • justify-content:space-evenly 主轴的平分

6. align-items 调整侧轴对齐

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

调整主轴对齐方向
align-items:flex-start  侧轴默认对齐

align-items:flex-end    侧轴对齐后面

align-items:center       侧轴中间对齐

align-items:space- between  侧轴两端对齐

align-items:space-around   侧轴距离环绕

align-items:baseline       侧周的基线位置显示,效果与开始位
置一致,实际开发的时候不会使用该属性值

align-items:stretch       默认拉伸项目高度充满容器，前提是项目不需要设置高度

7. flex-wrap 折行属性

调整弹性盒子中的子盒子过多时，折行
在这里插入图片描述

在这里插入图片描述

flex-wrap:nowrap   不折行,默认就是存在挤压的效果
flex-wrap:wrap      折行显示;

8. align-content 控制折行后的行间距

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

折行后会存在上下盒子间距的问题，align-content来调节属性：

  1. align-content:flex-start 上下默认对齐
  2. align-content:flex-end 上下对齐后面
  3. align-content:center 上下中间对齐
  4. align-content:space- between 上下两端对齐
  5. align-content:space-around 上下距离环绕
  6. align-content:space-evenly 上下间距平分

9. align-self 单独整侧轴对其方式

在这里插入图片描述

  • align-self:flex-start 项目位于侧轴的开始位置显示
  • align-self:flex-end 项目位于侧轴的结束位置显示
  • align-self:center 项目位于侧轴的居中位置显示
  • align-self:baseline 项目位于侧轴的基线位置对其,但是开发的时候几乎不会使用
  • align-self:strech 侧轴上面的拉伸效果

10. orde 调整顺序

给每个元素添加时用到结构伪类
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

属性:order ======调整显示顺序的:项目的显示顺序
                 取值可以为正数
                 可以为负数
                 取值越大越靠后面
                 取值越小越靠前面
order : auto     ===0

11. flex : 1 占剩余宽度或剩余高度的所有

属性:flex : 1;
作用:设置占剩余宽度,剩余高度的所有: 前提:如果主轴在横向则实现占剩余宽度所有;
主轴在纵向的话,则实现占剩余高度的所有 如果所有的项目都使用了flex:1;则实现的效果是均分的情况

  1. 主轴在横向的时候
    如果项目不设置高度的话,默认高度是拉伸的,
    项目添加flex:1实现的是占剩余宽度的所有
    在这里插入图片描述
    在这里插入图片描述
  2. 主轴在纵向的时候
    如果项目不设置宽度的话,默认宽度是拉伸的,
    项目添加flex:1实现的是占剩余高度的所有

在这里插入图片描述

在这里插入图片描述

12. flex 复合属性

  1. flex属性是一个复合属性
    是由: flex-grow、flex-shrink、flex-basis三个属性的缩写。
  2. flex-grow:定义项目的的放大比例;
    默认为0，即即使存在剩余空间,也不会放大;
    所有项目的flex-grow为1:等分剩余空间(自动放大占位);
    flex-grow为n的项目,占据的空间(放大的比例)是flex-grow为1的n倍。
  3. flex-basis:定义在分配多余空间之前,项目占据的主轴空间(main size)
    浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值,默认值为auto
  4. flex-shrink:定义项目的缩小比例
    取值为0时，不挤压不折行
    取值为1时，默认效果
    在这里插入图片描述

13. margin:0 auto 基本原理

margin:0 auto 基本原理相当于

  display: flex;
  justify-content:center;
  align-items:center

14. 自适应导航案例

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.layout{
			height: 44px;
			background-color:#d92b34;
		}
		nav{
			width:1004px;
			height: 44px;
			background-color: #c8411f;
			margin: 0 auto;
			display: flex;
		}
		nav>div{
			flex: 1;
			text-align: center;
			line-height: 44px;
			color: white;
		}
		nav>div:hover{
			background-color: orange;
		}
	</style>
	<div class="layout">
		<nav>
			<div>van</div>
			<div>van</div>
			<div>van</div>
			<div>van</div>
			<div>van</div>
			<div>van</div>
			<div>van</div>
			<div>van</div>
			<div>van</div>
			<div>van</div>
		</nav>
	</div>

在这里插入图片描述

15. pc 主体布局

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.bigbox{
			width: 1202px;
			height: 960px;
			margin:0 auto;
			display:flex;
			flex-wrap:wrap;
			justify-content:space-between;
			align-content:space-between;
		}
		.bigbox>div{
			width:576px;
			height:150px;
 			border: 1px solid gray;
			display:flex;
		}
        .bigbox>div>div>p:nth-child(1){
			font-size: 18px;
			margin-top: 20px;
			color: #605f5f;
		}
        .bigbox>div>div>p:nth-child(2){
			font-size: 12px;
			line-height: 42px;
			color: #abadaf;
		}
        .bigbox>div>div>p:nth-child(3){
			font-size: 14px;
			color: #959595;
		}

	</style>
	<div class="bigbox">
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		<div>
			<img src="./img/1.jpg"/>
			<div>
				<p>麻瓜的教育</p>
				<p>2022-22-22</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
	</div>

在这里插入图片描述

小黑子史蒂夫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
太阳黑子：Solr支持的Ruby对象搜索
02-01
太阳黑子 Sunspot是一个Ruby库，用于与Solr搜索引擎进行富有表现力的强大交互。 Sunspot构建在RSolr库的顶部，该库为Solr交互提供了一个低级接口。 Sunspot提供了简单，直观，富有表现力的DSL，并以强大的功能为...
爱坤小黑子游戏源码大全.zip
11-18
【标题】"爱坤小黑子游戏源码大全.zip" 提供的是一个包含多个游戏源码的集合，可能是一个小型游戏开发项目或者教学资源。从压缩包的名称来看，"爱坤小黑子"可能是游戏的主角或者项目的代号，而“大全”则暗示了包含...
flex布局的个人复习笔记
naisi2422553065的博客
04-19 259
flex布局个人笔记 前言 :flex在工作中已经使用很多次了, 也确实很简单. 比原生的浮动真的好用太多了了 ,就是兼容性可能会有点问题.真的是万恶的ie 不过还好现在ie逐渐被淘汰了.而我们都知道 flex是专门用来做页面布局的, 现在还不知道什么是flex布局的话,那会处处碰壁吧... 里面的全部内容就用一个index总结了,需要的可以拷贝去掉注释看效果 <!DOCTY...
只因小黑子：css动画复习
VanWot的博客
02-19 3205
155-174 CSS动画
只因小黑子：多列布局和渐变效果复习
VanWot的博客
02-20 2057
141-142，151-154
CSS基础：浅聊flex布局以及常用属性
u011863822的博客
03-27 3620
聊flex布局，以及常用的属性，还有具体的例子更方便理解
小黑子的python入门到入土：第二章
VanWot的博客
02-21 673
40 - 61 集
小黑子的python入门到入土：第三章
VanWot的博客
03-18 1103
海龟
Python画图之小黑子头像
qq_52108058的博客
03-07 3529
【代码】Python画图之小黑子头像。
小黑子的HTML入土过程
VanWot的博客
10-19 2430
HTML入门教程
微信小程序开发教程 | 第一篇：首页布局
java程序员笔记
11-29 2426
写在前面 请各位先下载示例代码，将 image 文件夹以及相关页面的CSS代码拷贝过去备用。 代码地址： 开发步骤 第一步： 按照官网文档简易教程，创建一个新的项目 第二步： 打开 app.json 文件，添加页面路径，添加bar（底部菜单：首页，订单，我的）。 在 app.json 文件中： “pages” 属性用来指定小程序由哪些页面组成，数组的第一项代表小程序的初始页面（首页）。小程序中新...
论文研究 - 基于小波的多重分形分析太阳黑子数与太阳极场的关系
05-21
寻找太阳黑子数（SSN）与太阳极场之间的关系的兴趣日益浓厚。 通常，可以在复杂系统动力学的时间序列中观察到分形特性，例如太阳活动和气候。 本研究通过进行多重分形分析研究了SSN与太阳极场之间的关系。 为了研究...
小黑子专属游戏—迷你版.exe
12-17
小黑子专属游戏—迷你版.exe
matlab太阳黑子_matlab_太阳黑子_太阳黑子matlab_
10-03
标题中的“matlab太阳黑子_matlab_太阳黑子_太阳黑子matlab_”表明这是一个关于使用MATLAB处理太阳黑子数据的项目。描述提到“基于matlab，实现太阳黑子周期辐射信号周期的分析”，这暗示我们将讨论如何利用MATLAB...
flex：1
m0_47999208的博客
07-25 241
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS相关记录
oThrowsException的博客
07-24 610
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS的常见难见
weixin_62432037的博客
07-24 1000
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
Programming in the Large CSSE2002
最新发布
w976j_的博客
07-25 444
❼❼❼SheePComponents❼❼Savingnotnot).TheandSeeSee。
matlab小黑子代码
07-28
以下是一个使用 MATLAB 编写的简单的小黑子代码示例： ```matlab % 定义小黑子的回答集合 answers = ["是的", "不是", "也许", "我不知道", "你觉得呢？"]; % 随机选择一个回答 randomIndex = randi(length...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值