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>
- 利用Geneva开发SOA的安全模型
- STOMP协议介绍
- ADO.NET实体框架连接串引发的异常:Unable to load the specified metadata resource
- Mono产品生命周期
- WordPress免插件仅代码实现文章归档模板 II
- Paket 介绍
- C语言学不会,编程能力无法提升?你的问题我来解决!
- 实现WCF和Unity 的集成
- Qt中纯C++项目发布为dll的方法(超详细步骤)
- .NET的Actor模型:Orleans
- UML:类图复习-鸡生蛋,蛋生鸡
- DotNet多个程序集合并工具
- Spring官网下载dist.zip的几种方法
- Spring Security笔记:HTTP Basic 认证
- 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 数组属性和方法
- 在Linux中使用Vundle管理Vim插件的方法
- 详解linux添加硬盘分区挂载教程
- CentoS6.5环境下redis4.0.1(stable)安装和主从复制配置方法
- 详解linux dma驱动编写
- CentOS6.5环境安装nginx服务器及负载均衡配置操作详解
- 详解linux 驱动编写(sd卡驱动)
- Centos 6.9环境下创建用户及删除用户的方法
- 详解linux驱动编写(入门)
- Ubuntu使用国内源出现Hash Sum mismatch错误的解决
- CentOS基于nginx反向代理实现负载均衡的方法
- CentOS7服务器环境下vsftpd安装及配置方法
- Linux date 时间设置同步命令分享
- Gerrit设置开机启动方法
- Ubuntu服务器下搭建php运行环境的方法
- 详解ubuntu14.04搭建(迁移)hustoj记录