一、伸缩布局的起源

  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; */
/* 纵向逆序 */
/* align-content 多行的情况()
值同,默认是strentch
必须在父元素例配置{display:flex;flex-direction:row;flex-wrap:wrap;}
*/
 

  5、order:控制子元素的裴烈顺序:默认是0,越小的值越排在前面,可以是负数

  6、flex-wrap是否换行:no;默认收缩显示wrap;换行wrap-reverse;以相反的顺序换行

  7、aligin-items侧主轴的对齐方式:stretch;子元素高度拉伸(默认)center;居中felx-start;在开头;flex-end;在底边

  8、flex-flow:排列方向 是否换行的综合接卸形式

伸缩布局flex的更多相关文章

  1. 弹性伸缩布局-flex

    弹性伸缩布局-flex 引言:本文主要参照阮一峰的网络日志 .郭锦荣的博客总结完成. 正文: 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性 ...

  2. CSS3伸缩布局Flex学习笔记

    如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...

  3. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  4. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

  5. CSS3(5)---伸缩布局(Flex)

    CSS3(5)---伸缩布局 有关页面布局之前写过三篇相关文章: 1.CSS(5)---盒子模型 2.CSS(6)---浮动(float) 3.CSS(8)---定位(position) 一.什么是F ...

  6. 伸缩布局 Flex

    其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀,采用Flex布局的元素,称为Flex容器(flex container),简称”容器”.它的所有子元素自动成为容器成员,称为Fle ...

  7. 弹性伸缩布局flex

    Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + posi ...

  8. CSS3弹性伸缩布局(二)——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  9. CSS3 Flex布局(伸缩布局盒模型)学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

随机推荐

  1. JavaScript 数据值校验工具类

    /** * 数据值校验工具类 */ var checkService = { // 不校验 none: function () { return true; }, //非空校验 isEmpty: fu ...

  2. 基于vue的环信基本实时通信功能

    本篇文章借鉴了一些资料,然后在这个基础上,我将环信的实现全部都集成在一个组件里面进行实现: https://blog.csdn.net/github_35631540/article/details/ ...

  3. golang中time包的使用

    一.代码 package main; import ( "time" "fmt" ) func main() { //time.Time代表一个纳秒精度的时间点 ...

  4. java8 list、map遍历以及反射

    //新建list List<User> userList = new ArrayList<>(); User user = new User(); user.setId(&qu ...

  5. 使用WebStorm上传本地项目到GitHub和GitLab

    在使用 WebStorm 上传本地项目到 GitHub 之前,先要做一些相关配置. 首先打开 WebStorm ,依次点击File -> Settings… 打开系统设置面板,在上面搜索 git ...

  6. yolo+keras+tensorflow出错:No module named 'leaky_relu'+

    结论:keras2.1.5+tensorflow1.6.0即可. 首先出现的是:No module named 'leaky_relu',此时把keras改成2.1.5照样出错,改成keras2.1. ...

  7. 通过apiservice反向代理访问service

    第一种:NodePort类型 type: NodePort ports: - port: 80 targetPort: 80 nodePort: 30008 ​ 第二种:ClusterIP类型 typ ...

  8. Python学习之文件操作(二)

    CSV文件处理 在Python中处理CSV文件可以使用模块csv.有关csv模块的官方资料看这里. 1 读取csv文件 csv.reader(csvfile, dialect='excel', **f ...

  9. linux 文件类型的颜色

    linux文件颜色的含义:蓝色代表目录 绿色代表可执行文件 红色表示压缩文件 浅蓝色表示链接文件 灰色表示其他文件 红色闪烁表示链接的文件有问题了 黄色表示设备文件 蓝色文件----------目录 ...

  10. JS流程控制语句 重复重复(for循环)语句结构: for(初始化变量;循环条件;循环迭代) { 循环语句 }

    重复重复(for循环) 很多事情不只是做一次,要重复做.如打印10份试卷,每次打印一份,重复这个动作,直到打印完成.这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码. for语句结构: ...