css3 伸缩布局 display:flex等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 400px;height: 400px;
border: 1px solid red;
/* 先把父元素设置成flex(伸缩) */
display: flex;
/* 子元素在主轴方向的对其方式的设置 */
/* justify-content: flex-end; */ /*从右到左 ，默认显示从左到右 */
/* justify-content: center; *//* 中间显示*/
/* justify-content: space-between */ /*两端对齐*/
/* justify-content: space-around */ /*两边空白 环绕式对齐*/ /* 主轴方向作为调整 */
/* flex-direction: row; */ /*主轴水平*/
/* flex-direction: row-reverse; */ /*水平反转*/
/* flex-direction: column; *//*主轴水平方向变成了垂直的方向，侧轴永远是垂直主轴的*/
/* flex-direction: column-reverse; */ /*主轴竖着反转*/ /* 侧轴对齐 */
/* align-items: flex-start; */ /*侧轴开始*/
/* align-items: flex-end; */ /*侧轴底部*/
/* align-items: center; */ /*侧轴居中*/
/* align-items: stretch; */ /*拉伸效果，要想有效果，必须干掉子元素的高度*/ /* 默认子元素没有换行 nowrap*/
flex-wrap: wrap; /*子元素换行*/
/* flex-wrap: wrap-reverse; */ /*反转加换行*/ align-content: flex-start /*子元素换行后有空白行，希望没有空白行，需要重新设置主轴的方向*/
}
.dv1{
width: 100px;height: 100px;
background: red;
margin-left: 5px;
}
.dv2{
width: 100px;height: 100px;
background: blue;
margin-left: 5px;
}
.dv3{
width: 100px;height: 100px;
background: green;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="dv1"></div>
<div class="dv2"></div>
<div class="dv3"></div>
<div class="dv3"></div>
<div class="dv4"></div>
<div class="dv1"></div>
</div>
</body>
</html>
css3 伸缩布局 display:flex等的更多相关文章
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- css3伸缩布局中justify-content详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
- CSS3伸缩布局Flex学习笔记
如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...
- CSS3 伸缩布局盒模型
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
- CSS3——伸缩布局及应用
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...
随机推荐
- csharp C#数字字符串排序orderby的问题解决
一般情况下 您使用 strs.OrderBy(n=>n) 得出的结论是 1, 11,111,2,22,222想要得出 1,2,11,22,111,222 咋办?源码送上 static void ...
- Docker使用exec进入正在运行中的容器
docker在1.3.X版本之后提供了一个新的命令exec用于进入容器,这种方式相对简单一些,下面我们来看一下该命令的使用: docker exec --help 接下来我们使用该命令进入一个已经在运 ...
- 【交换机】交换机RLDP（环路检测&链路检测）功能介绍及配置说明
功能简介RLDP 全称是Rapid Link Detection Protocol,是锐捷网络自主开发的一个用于快速检测以太网链路故障的链路协议.一般的以太网链路检测机制都只是利用物理连接的状态,通过 ...
- Android开发怎么让自己的APP UI漂亮、大方（配色篇二）
我们在没有效果图的app开发中有一件事情肯定很头疼:一个按钮的调色改过来改过去,还是很难看,最终只能暂时作罢,浪费了大量的开发时间和精力.开发规范篇见Android开发怎么让自己的APP UI漂亮.大 ...
- 关于C#中遍历字符串中的每个字符的方法
解决方案 C#提供了两个方法用于遍历字符串. 1.第一个方法是foreach循环,这个方法快速且容易,但是与第二个方法相比它不太灵活.其使用方法如下: string testStr = "a ...
- Spring-Cloud-Ribbon学习笔记（二）：自定义负载均衡规则
Ribbon自定义负载均衡策略有两种方式,一是JavaConfig,一是通过配置文件(yml或properties文件). 需求 假设我有包含A和B服务在内的多个微服务,它们均注册在一个Eureka上 ...
- 基于【CentOS-7+ Ambari 2.7.0 + HDP 3.0】搭建HAWQ数据仓库03 —— 安装HAWQ 2.3.0.0
一. HAWQ2.3.0环境准备[全部主机节点]: 1, vim /etc/sysctl.conf,编辑如下内容: kernel.shmmax= kernel.shmmni= kernel.shmal ...
- 将RAC软件转换为单实例软件
将RAC软件转换为单实例软件 http://blog.itpub.net/26736162/viewspace-2155632/ 1. Stop database and CRS on both no ...
- iOS开发之--UIImageView的animationImages动画
图片动画实现,代码如下: -(UIImageView *)animationImageView { if (!_animationImageView) { _animationImageView= [ ...
- 数据交互axios的用法
参考: https://www.cnblogs.com/zhouyangla/p/6753673.html