flex-wrap align-content详解
时间:2022-07-28
本文章向大家介绍flex-wrap align-content详解,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100px auto;
display: flex;
/*
1.默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项
2.在伸缩容器中有一个叫做flex-wrap属性, 专门用于控制放不下是否需要换行的
默认的取值: flex-wrap 不换行
wrap: 放不下就换行 而不是等比压缩
wrap-reverse: 放不下就换行 , 以行为单位进行反转
*/
/*flex-wrap: nowrap;/*默认的,不换行。*/
flex-wrap: wrap;/*放不下就换行 而不是等比压缩*/
/*flex-wrap: wrap-reverse;/*放不下就换行 , 以行为单位进行反转*/
/*在伸缩容器中有一个叫做align-content的属性, 是专门用于设置换行之后的对齐方式的
注意点: 只有伸缩项发生了换行这个属性才有效*/
/*align-content: flex-start;/*换行之后和侧轴的起点对齐, 一行接一行*/
/*align-content: flex-end;/* 换行之后和侧轴的终点对齐, 将所有换行之后的内容当做一个整体来操作*/
/*align-content: center;/*换行之后和侧轴的中点对齐*/
/* align-content: space-between;/*换行之后在侧轴上两端对齐*/
/*align-content: space-around;/*换行之后在侧轴上环绕对齐*/
align-content: stretch;/*以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴*/
}
ul>li{
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
}
ul>li:nth-child(2){
background: green;
}
ul>li:nth-child(3){
background: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
- 在asp.net web api 2 (ioc autofac) 使用 Serilog 记录日志
- hbase源码系列(十三)缓存机制MemStore与Block Cache
- hbase源码系列(十四)Compact和Split
- 设计模式学习(四): 1.简单工厂 (附C#实现)
- 从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD
- 从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置
- RavenDb学习(十)附件,存储大对象
- 从头编写 asp.net core 2.0 web api 基础框架 (3)
- Distribute Cached 使用
- RavenDb学习(七) 异步工作以及维度查询
- RavenDb学习(五)结果转换
- sqoop 从sqlserver2008 导入数据到hadoop
- 从头编写 asp.net core 2.0 web api 基础框架 (2)
- hbase源码系列(四)数据模型-表定义和列族定义的具体含义
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- QMake复制文件/目录方法
- 计算FPS小例子
- 解读技术 |学习率及其如何改善深度学习算法
- MySQL 5.7 新特性:Generated Column
- 聊聊dubbo-go的nacosRegistry
- 聊聊dubbo-go的PrometheusReporter
- 聊聊dubbo-go的apolloConfiguration
- 聊聊dubbo-go的DefaultHealthChecker
- 一文搞懂matplotlib中的颜色设置
- pyecharts极简入门教程
- Linux gdb+valgrind调试
- matplotlib基础绘图命令之hist
- Python|一文详解数据预处理
- 安排上了!PC人脸识别登录,出乎意料的简单
- valgrind使用介绍