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

CSS flex 是一种伸缩布局，之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。

flex 为和模型布局提供了极大地灵活性，所谓弹性布局即可根据大小判定自动伸缩。

flex相关的各个属性如下：

1、display：flex；在父盒子定义flex，子盒子才能使用flex属性

2、flex：none |flex-grow flex-shrink flex-basis 设置子盒子的缩放比例，可以一起指定也可以单独指定。（均不可为负数）

　　（1）none 相当于 flex： 0 0 auto；

　　（2）flex-grow 用来规定盒子的扩展比率，即盒子相对于其他盒子能够分配到的空间的比值，没有指定flex的不参与分配。

<!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>Document</title>

    <style>

        .fa {

            width: 800px;

            height: 400px;

            border: 2px solid red;

            display: flex;

            margin: 200px auto;

        }

        .son1 {

            background-color: aqua;

            width: 200px;

        }

        .son2 {

            background-color: green;

            flex-grow: 1;

            width: 50px;

        }

        .son3 {

            background-color: blue;

            flex-grow: 2;

            width: 30px;

        }

        .son4 {

            background-color: orange;

            flex-grow: 3;

            width: 80px;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son1">1</div>

        <div class="son2">2</div>

        <div class="son3">3</div>

        <div class="son4">4</div>

    </div>

</body>

</html>

　　　　上面图中子盒子所占大小的计算方法为：

　　　　a、.son1 没有指定flex 因此不参与分配大小为固定的200px；

　　　　b、剩下的空间需要减去盒子固有的宽度来继续分配，即可分配空间为

　　　　　　600-50-30-80=440px

　　　　c、指定分配的比率为1:2:3 所以各自能分配到的大小为440*（1/6），440*（2/6），440*（3/6）

　　　　d、最后可得出各个盒子的大小

　　　　　　.son2: 440*（1/6）+50=123.3px

　　　　　　.son3: 440*（2/6）+30=176.7px

　　　　　　.son4: 440*（3/6）+80=300px

　　（3）、flex-shrink 规定盒子收缩率，一般是在子盒子总体大小超过父盒子情况下，确定各个盒子的缩小比例。

<!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>Document</title>

    <style>

        .fa {

            width: 400px;

            height: 400px;

            border: 2px solid red;

            display: flex;

            margin: 200px auto;

        }

        .son1 {

            width: 100px;

            flex-shrink: 1;

            background-color: aqua;

        }

        .son2 {

            width: 200px;

            flex-shrink: 2;

            background-color: orange;

        }

        .son3 {

            width: 300px;

            flex-shrink: 3;

            background-color: deeppink;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son1">1</div>

        <div class="son2">2</div>

        <div class="son3">3</div>

    </div>

</body>

</html>

　　　　上面图中子盒子所占大小的计算方法为：

　　　　a、子盒子总体宽度大小为：100+200+300=600px

　　　　b、超过父盒子 600-400=200px

　　　　c、收缩比率为：1:2:3 ，则对收缩大小进行加权求值,求出收缩大小

　　　　　　.son1: 200*[100*1/（1*100+2*200+3*300）]=14px

　　　　　　.son2: 200*[200*2/（1*100+2*200+3*300）]=57px

　　　　　　.son1: 200*[300*3/（1*100+2*200+3*300）]=129px

　　　　d、最终各个盒子大小为

　　　　　　.son1: 100-14=86px；

　　　　　　.son2: 200-57=143px；

　　　　　　.son3: 300-129=171px；

　　（4）、flex-basis：长度 |百分比

<!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>Document</title>

    <style>

        /* 超过按照比例划分 */

        .fa {

            width: 400px;

            height: 400px;

            border: 2px solid red;

            display: flex;

            margin: 200px auto;

        }

        .son1 {

            width: 100px;

            flex-basis: 35%;

            background-color: aqua;

        }

        .son2 {

            width: 200px;

            flex-basis: 30%;

            background-color: orange;

        }

        .son3 {

            width: 300px;

            flex-basis: 50%;

            background-color: deeppink;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son1">1</div>

        <div class="son2">2</div>

        <div class="son3">3</div>

    </div>

</body>

</html>

　　　　一般设置不超过盒子大小或者不超过100%，超过100%则按比例分配空间。

　　　　如上图按7:6:10 来分配，设置为auto，则以自身大小来分配。

　　（5）、常用复合属性

　　　　　　flex：1相当于 flex：1 1 0%；

　　　　　　flex：auto 相当于 flex：1 1 auto；

　　　　　　flex：none 相当于 flex：0 0 auto；

　　　　　　 flex：0 none 或flex：initial 相当于 flex：0 1 auto；

3、flex-direction：row | row-reverse | column | column-reverse 调整株洲方向，即合适是水平分布还是垂直分布的，默认是水平方向。

　　上面四个值分别是，水平| 水平反向| 垂直| 垂直反向

　　反向的意思是，盒子顺序是相反的。

<!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>Document</title>

    <style>

        .fa {

            width: 400px;

            height: 400px;

            border: 2px solid red;

            display: flex;

            margin: 200px auto;

            flex-direction: column-reverse;

        }

        .son1 {

            flex: 1;

            background-color: aqua;

        }

        .son2 {

            flex: 1;

            background-color: orange;

        }

        .son3 {

            flex: 1;

            background-color: deeppink;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son1">1</div>

        <div class="son2">2</div>

        <div class="son3">3</div>

    </div>

</body>

</html>

4、justify-content: flex-start | flex-end | center | space-between | space-around 子盒子在父盒子中的水平对齐方式。　　　

　　flex-start ：默认值，项目向容器起始位置对齐（靠左对齐）

<!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>Document</title>

    <style>

        .fa {

            width: 400px;

            height: 200px;

            border: 1px solid red;

            display: flex;

            margin: 100px auto;

            justify-content: flex-start;

        }

        .son {

            flex: 0 0 20%;

            background-color: aqua;

        }

        .son:nth-child(2) {

            background-color: orange;

        }

        .son:nth-child(3) {

            background-color: deeppink;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son">1</div>

        <div class="son">2</div>

        <div class="son">3</div>

    </div>

</body>

</html>

　　接下来只将justify-content 值改变，就不重复写代码了，只给出结果图

　　flex-end：项目向容器结束位置对齐。（靠右对齐）

　　center：项目位于容器的中间。（水平居中）　　

　　space-between：各个项目中间有空隙，但是开头和结尾紧贴容器（父盒子）

space-around：各个项目中间有空隙，且空隙距离相同（相当于每个盒子左右给了一个相同的margin值）

5、align-items：flex-start | flex-end | center | baseline | stretch 子盒子在父盒子中的垂直对齐方式

<!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>Document</title>

    <style>

        .fa {

            width: 400px;

            height: 400px;

            border: 1px solid red;

            display: flex;

            margin: 100px auto;

            align-items: stretch;

        }

        .son {

            flex: 0 0 20%;

            padding: 30px 0;

            background-color: aqua;

            font-size: 40px;

        }

        .son:nth-child(2) {

            padding: 50px 0;

            background-color: orange;

        }

        .son:nth-child(3) {

            padding: 100px 0;

            background-color: deeppink;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son">1</div>

        <div class="son">2</div>

        <div class="son">3</div>

    </div>

</body>

</html>

　　同样接下来几种只给出效果图

　　flex-start：上对齐

　　flex-end ：下对齐

　　center：垂直居中对齐

　　baseline：与项目的第一行文字的基线对齐，因此当基线在同一条线上时，与flex-start一致

6、flex-wrap：nowrap | wrap | wrap-reverse 当子盒子大小超过父盒子是是否换行

　　nowrap：默认值，不换行。强行在一行显示，因此每个盒子的大小都会减少。

<!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>Document</title>

    <style>

        .fa {

            width: 200px;

            height: 200px;

            border: 1px solid red;

            display: flex;

            margin: 100px auto;

            align-items: baseline;

            flex-wrap: nowrap;

        }

        .son {

            width: 50px;

            background-color: aqua;

            font-size: 40px;

        }

        .son:nth-child(2) {

            background-color: orange;

        }

        .son:nth-child(3) {

            background-color: deeppink;

        }

        .son:nth-child(4) {

            background-color: green;

        }

        .son:nth-child(5) {

            background-color: greenyellow;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son">1</div>

        <div class="son">2</div>

        <div class="son">3</div>

        <div class="son">4</div>

        <div class="son">5</div>

        <div class="son">6</div>

    </div>

</body>

</html>

　　wrap：换行显示。

　　wrap-reverse：换行且倒着显示

7、flex-flow: flex-direction flex-wrap; flex-flow 是flex-direction 和 flex-wrap 的简写，默认值是flex-flow： row wrap

<!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>Document</title>

    <style>

        .fa {

            width: 200px;

            height: 200px;

            border: 1px solid red;

            display: flex;

            margin: 100px auto;

            flex-wrap: wrap;

            align-content: stretch;

        }

        .son {

            /* width: 50px; */

            padding: 10px;

            background-color: aqua;

            font-size: 40px;

        }

        .son:nth-child(2) {

            background-color: orange;

        }

        .son:nth-child(3) {

            background-color: deeppink;

        }

        .son:nth-child(4) {

            background-color: green;

        }

        .son:nth-child(5) {

            background-color: greenyellow;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son">1</div>

        <div class="son">2</div>

        <div class="son">3</div>

        <div class="son">4</div>

        <div class="son">5</div>

        <div class="son">6</div>

    </div>

</body>

</html>

　　flex-start：上对齐

　　flex-end：下对齐

　　center：居中对齐

　　space-between ：与justify-content中的 space-between类似最上一行顶对齐，最下一行底对齐

　　space-around：与justify-content中的 space-around类似各个行上下有空隙，且空隙距离相同（相当于每行上下给了一个相同的margin值）

9、order：设置子盒子显示顺序。值取整数，可以为负数，数值越小的排列方向越靠前。

<!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>Document</title>

    <style>

        .fa {

            width: 200px;

            height: 200px;

            border: 1px solid red;

            display: flex;

            margin: 100px auto;

            flex-wrap: wrap;

            align-content: space-between;

        }

        .son {

            /* width: 50px; */

            padding: 10px;

            background-color: aqua;

            font-size: 40px;

        }

        .son:nth-child(2) {

            background-color: orange;

            order: -2;

        }

        .son:nth-child(3) {

            background-color: deeppink;

        }

        .son:nth-child(4) {

            background-color: green;

            order: 3;

        }

        .son:nth-child(5) {

            order: 2;

            background-color: greenyellow;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son">1</div>

        <div class="son">2</div>

        <div class="son">3</div>

        <div class="son">4</div>

        <div class="son">5</div>

        <div class="son">6</div>

    </div>

</body>

</html>

注意事项：

上述的9个属性，其中1、3、4、5、6、7、8是放在容器（父盒子）的属性

而2、9是项目(子盒子)的属性

CSS 小结笔记之伸缩布局 (flex)的更多相关文章

CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示具体代码如下 <!DOCTYPE htm ...
CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
弹性伸缩布局-flex
弹性伸缩布局-flex 引言:本文主要参照阮一峰的网络日志 .郭锦荣的博客总结完成. 正文: 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性 ...
CSS3伸缩布局Flex学习笔记
如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...
css学习_css3伸缩布局 flex布局
1.flex布局案例一: 案例二: 保证不至于缩放得太小或太大案例三:flex的值不一定要写成几份,可以写成固定值案例四: 竖着3等分(父容器按照高度3等分) !!案例 -----用fle ...
CSS学习笔记（12）--Flex 布局教程：实例篇
原文--阮一峰博客作者: 阮一峰日期: 2015年7月14日上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...
CSS3(5)---伸缩布局(Flex)
CSS3(5)---伸缩布局有关页面布局之前写过三篇相关文章: 1.CSS(5)---盒子模型 2.CSS(6)---浮动(float) 3.CSS(8)---定位(position) 一.什么是F ...
伸缩布局flex
一.伸缩布局的起源 1.之前我们想要适应不同的浏览器,一般采用的是设置宽度.高度为父级元素的百分比,但是有时候百分比的计算是相当复杂的,加上有时候还有规定的宽度要设置,所以,伸缩布局的出现是我们所急需 ...
CSS学习笔记（11）--Flex 布局教程：语法篇
原文--阮一峰博客作者: 阮一峰日期: 2015年7月10日网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...

随机推荐

Android通用简洁的下载器
下载逻辑在android开发中可谓很常见,那么封装一个通用简洁的下载器时很有必要的.如果不想给工程引入一个很重的jar包那么可以直接复用下面的代码即可. 主要对外接口构造函数 : publi ...
iconfont 批量把图标加入购物车的方法
在浏览器中按 f12 打开[开发人员工具],找到[console(控制台)],输入以下代码,再按回车,稍等片刻即可把全部图标加入购物车 var ll = document.getElementsByC ...
Java总结：语法基础
更新时间:2018-1-7 10:34:05 更多请查看在线文集:http://android.52fhy.com/java/index.html Hello World 文件名:HelloWorld ...
find_package()的查找*.cmake的顺序
1. find_package(<Name>)命令首先会在模块路径中寻找 Find<name>.cmake,这是查找库的一个典型方式.具体查找路径依次为CMake: 变量${C ...
Java NIO系列教程（三） Buffer
Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的.交互图如下: 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被 ...
WebLogic 12c Linux 命令行安装
最近负责在Linux上安装WebLogic Server 12c,客户说要安装最新的版本,版本号为 12.1.X(12.1.2,12.1.3).开始以为和旧版安装一样,使用控制台的方式,下载bin文件 ...
elasticSearch6源码分析(5)gateway模块
1.gateway概述 The local gateway module stores the cluster state and shard data across full cluster res ...
一个Time TodoList实例了解redux在wepy中的使用
@subject: wepy-redux-time-todo @author: leinov @date:2018-10-30 @notice: 小程序(wepy)开发群110647537 欢迎加入 ...
浅谈JSONP （vue-jsonp组件 XXXtoken:报错处理）
由于同源策略的存在,特别是前后端两个项目存在的情况下,客户端访问服务端必然存在跨域的情况,而使用jsonp,则不存在这个问题. 主要是因为jsonp是在页面中插入一段js代码,而请求返回的也是一段js ...
算法时间复杂度、空间复杂度(大O表示法)
什么是算法? 计算机是人的大脑的延伸,它的存在主要是为了帮助我们解决问题. 而算法在计算机领域中就是为了解决问题而指定的一系列简单的指令集合.不同的算法需要不同的资源,例如:执行时间或消耗内存. 如果 ...

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

CSS 小结笔记之伸缩布局 (flex)的更多相关文章

随机推荐

热门专题