一、伸缩布局的起源

　　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. Iview+Vue CDN NetMvC 简单demo

    1.引用相关js文件 2.菜单采用静态数据加载 3.效果展示 4.代码下载 https://github.com/sulin888/NetVueAdmin.git

  2. for循环总结

    1.冒泡排序的总结:其实这个很简单的理解,就是用数组里面的第0个元素(也就是[]里面的第一个数,按照数组的话是第一个,让他们进行挨个比较),示例: 排序前: 14 62 38 41 53 62 71 ...

  3. CUDA 关于 BLOCK数目与Thread数目设置

    GPU的计算核心是以一定数量的Streaming Processor(SP)组成的处理器阵列,NV称之为Texture Processing Clusters(TPC),每个TPC中又包含一定数量的S ...

  4. System.Web.Mvc.Controller.cs

    ylbtech-System.Web.Mvc.Controller.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicK ...

  5. EXCEL函数常用技巧浅析

    EXCEL函数常用技巧浅析 EXCEL函数是一门趣味性非常大的游戏,此贴内容基本上为总结前人经验而来.废话不多说,我们现在走入正题. 一:判断数值奇偶性 1.1  ISODD(number) 判断一个 ...

  6. idae for mac部分背景色修改收集

    文章目录 所有字体默认颜色 终端背景色 行数line number背景色 line number颜色 编码区背景色 光标所在行背景色 未被使用的变量.方法或者类 控制台相关 选中文字的背景色 选中和未 ...

  7. 如何使用Spark大规模并行构建索引

    使用Spark构建索引非常简单,因为spark提供了更高级的抽象rdd分布式弹性数据集,相比以前的使用Hadoop的MapReduce来构建大规模索引,Spark具有更灵活的api操作,性能更高,语法 ...

  8. [Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法

    解决方法import Vue from "vue"; 默认引入的文件是 vue/dist/vue.runtime.common.js.这个可以在node_modules/vue/p ...

  9. 迅雷 API 接口说明文档 -调用迅雷自动下载

    我们可以利用迅雷提供的开放API接口来自动下载文件.详细的接口说明大家可以看下面的. 先要说明一下的就是 迅雷的API接口是用 .com 来调用的 首先就是脚本了,各种语言写法不同,我这里提供用vbs ...

  10. Ubuntu clion下载及激活

    1.下载 方法:去官网下载clion  https://www.jetbrains.com/clion/download/#section=linux 或者使用我上传的百度网盘链接: https:// ...