伸缩布局flex
一、伸缩布局的起源
1、之前我们想要适应不同的浏览器，一般采用的是设置宽度、高度为父级元素的百分比，但是有时候百分比的计算是相当复杂的，加上有时候还有规定的宽度要设置，所以，伸缩布局的出现是我们所急需的。
例：将一个section三等分，其中放入3个div
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伸缩布局</title>
<style>
/* 原始的模式 */
/* section{
width: 1000px;
height: 200px;
}
div{
float:left;
width:33.33%;
height:20px;
background-color: red;;
}
div:nth-child(2){
background-color: blue;
}
div:last-child{
background-color:green;
} */
/* 采用伸缩布局 */
section {
display: flex;
width: 1000px;
} div {
flex: 1;
height: 20px;
background-color: red;
} div:nth-child(2) {
background-color: blue;
} div:last-child {
background-color: green;
}
</style>
</head> <body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body> </html>
二、伸缩布局的使用
1、可以添加具体宽度
div:nth-child(2) {
width: 20px;
background-color: blue;
}
2、可以设置最小宽度，这样当屏幕缩小到小于最小宽度时，就会出现滚动条
min-width:500px;
3、伸缩布局的排列方式：主轴、方向
flex-direction: row;
/* 默认的：横向排列 */
flex-direction: column;
/* 纵向排列 */
flex-direction: row-reverse;
/* 横向逆序 */
flex-direction: column-reverse;
/* 纵向逆序 */
4、主轴的对齐方式
/* justify-content一行的情况 */
/* 从左到右，默认的顺序 */
/* justify-content: flex-start; */
/* 从右到左的，逆序 */
/* justify-content: flex-end; */
/* 子元素在父元素的中间显示 */
/* justify-content: center; */
/* 均分，贴边 */
/* justify-content: space-around; */
/* 均分，不贴边 */
/* justify-content: space-between; */
5、order:控制子元素的裴烈顺序：默认是0，越小的值越排在前面,可以是负数
6、flex-wrap是否换行：no;默认收缩显示wrap;换行wrap-reverse;以相反的顺序换行
7、aligin-items侧主轴的对齐方式：stretch;子元素高度拉伸（默认）center;居中felx-start;在开头；flex-end;在底边
8、flex-flow:排列方向 是否换行的综合接卸形式
伸缩布局flex的更多相关文章
- 弹性伸缩布局-flex
弹性伸缩布局-flex 引言:本文主要参照阮一峰的网络日志 .郭锦荣的博客总结完成. 正文: 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性 ...
- CSS3伸缩布局Flex学习笔记
如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...
- css学习_css3伸缩布局 flex布局
1.flex布局 案例一: 案例二: 保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例 -----用fle ...
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
- CSS3(5)---伸缩布局(Flex)
CSS3(5)---伸缩布局 有关页面布局之前写过三篇相关文章: 1.CSS(5)---盒子模型 2.CSS(6)---浮动(float) 3.CSS(8)---定位(position) 一.什么是F ...
- 伸缩布局 Flex
其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀,采用Flex布局的元素,称为Flex容器(flex container),简称”容器”.它的所有子元素自动成为容器成员,称为Fle ...
- 弹性伸缩布局flex
Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + posi ...
- CSS3弹性伸缩布局（二）——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
- CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
随机推荐
- thinkphp 获取内容
如果需要获取渲染模板的输出内容而不是直接输出,可以使用fetch方法. fetch方法的用法和display基本一致(只是不需要指定输出编码和输出类型): 大理石平台规格 fetch('模板文件') ...
- DelphiHookApi(经典)
论坛里有关于HOOK API的贴子, 但其实现在方式显示得麻烦, 其实现在拦截API一般不用那种方式, 大都采用inline Hook API方式.其实也就是直接修改了要拦截的API源码的头部,让它无 ...
- Java-Maven-pom.xml-project-dependencies：dependencies
ylbtech-Java-Maven-pom.xml-project-dependencies:dependencies 1.java 调用ddl <!-- java 调用ddl --> ...
- 同步异步，异步回调，线程队列，线程时间Event
同步异步-阻塞非阻塞 阻塞-非阻塞 指的是程序的运行状态 阻塞:当程序执行过程中遇到了IO操作,在执行IO操作时,程序无法继续执行其他代码,称为阻塞. 非阻塞:程序在正常运行没有遇到IO操作,或者通过 ...
- day 67 Django基础三之视图函数
Django基础三之视图函数 本节目录 一 Django的视图函数view 二 CBV和FBV 三 使用Mixin 四 给视图加装饰器 五 Request对象 六 Response对象 一 Dja ...
- Go前言
Go语言为并发而生 硬件制造商正在为处理器添加越来越多的内核以来提高性能.所有数据中心都在这些处理器上运行,今天的应用程序使用多个微服务来维护数据库连接,消息队列和维护缓存.所以,开发的软件和编程语言 ...
- Hibernate的Hello World！
一.创建Java工程,新建Lib文件夹,加入Hibernate和数据库(如MySql.Oracle.SqlServer等)的Jar包 二.创建 hibernate.cfg.xml 文件,并配置,配置项 ...
- unity3d入门 Demo 学习记录
闲来学习一下 unity3d 的Demo,记录如下. 官方 Demo,名字为 Roll-A-Ball,如图 场景比较简单,包含地面.玩家精灵.主摄像机.墙壁.可拾取的方块.分数为示 text.平行光源 ...
- [NOIP2019模拟赛]LuoguP4261白金元首与克劳德斯
题目描述 给出坐标系中n个矩形,类型1的矩形每单位时间向x轴正方向移动1个单位,类型2的矩形向y轴正方向,初始矩形不重叠,一个点被矩形覆盖当且仅当它在矩形内部(不含边界),求$(-\infty ,+\ ...
- Eureka服务治理学习笔记(摘抄)
1.简介 EureKa在Spring Cloud全家桶中担任着服务的注册与发现的落地实现.Netflix在设计EureKa时遵循着AP原则,它基于R EST的服务,用于定位服务,以实现云端中间层服务发 ...