弹性盒子属性

一、align-content属性

属性作用：用于修改flex-wrap属性行为。类似于justify-content，但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

属性值：

flex-start 各行向侧轴的起始位置堆叠。
flex-end 各行向侧轴的结束位置堆叠。
center 各行向弹性盒容器侧轴的中间位置堆叠
space-between各行向弹性盒容器中平均分布
space-around 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
stretch 各行将会伸展以占用剩余的空间，默认值。

代码实例：

只设置弹性盒子元素换行（flex-wrap:wrap）时，页面压缩，一行不足以放的下所有子元素就会换行，第二行和第一行却不是紧贴在一起，各行将会伸展占满剩余的空间。

1、设置弹性盒容器align-content:flex-start，各行都尽量向侧轴的起点位置堆叠。

.box{

            height:300px;border:1px solid red;display:flex;flex-wrap:wrap;

            align-content: flex-start;

        }

2、设置弹性盒容器align-content:flex-end，各行都尽量向侧轴的终点位置堆叠

.box{

            height:200px;border:1px solid red;display:flex;flex-wrap:wrap;

            align-content: flex-end;

        }

压缩页面宽度之后：

3、设置弹性盒容器align-content:center，各行都向侧轴中间位置堆叠。

.box{

            height:200px;border:1px solid red;display:flex;flex-wrap:wrap;

            align-content: center;

        }

压缩页面之后:

4、弹性容器设置align-content:space-between，如果没有分行的话第一行会挨着侧轴的起点放置，如果分行了，第一行在侧轴的起点，最后一行在侧轴的终点，其他行在容器中间平均分布。

    .box{

            height:300px;border:1px solid red;display:flex;flex-wrap:wrap;

            align-content: space-between;

        }

如果页面中有很多行：

5、弹性容器设置align-content:space-around，各行按照侧轴在弹性容器中平均分配，上下两行距离侧轴起点和终点的距离为相邻两行之间间距的一半。

    .box{

            height:200px;border:1px solid red;display:flex;flex-wrap:wrap;

            align-content: space-around;

        }

压缩页面宽度，使子元素分行。

6、设置弹性父元素align-content:stretch，当父元素有高度，子元素换行时，表现效果和仅设置flew-wrap:wrap相同。各行吧父元素里面的多余的空间平分了。

.box{

            height:200px;border:1px solid red;display:flex;flex-wrap:wrap;

            align-content: stretch;

        }

改变父元素的高度

设置在子元素中的属性

二、flex-grow属性

语法：flex-grow:<number>(default 0)

属性作用：设置或检索弹性盒的扩展比率。

根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。（当父元素剩余空间很多，该如何去分配剩余的空间）

属性值：<number> 用数值来定义扩展比率。不允许为负值。

flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。

1、flex-grow:0就是不分配剩余的空间，和不设置flex-grow属性效果相同。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>FlexBox</title>

     <style>

         .box{

             width:300px;border:1px solid red;

             background:#faa;

             display:flex;}

         .b1{width:80px;background:#aaf;}

         .b2{width:160px;background:#af;}

     </style>

 </head>

 <body>

 <div class="box">

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

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

 </div>

 </body>

 </html>

表现效果：如果不对子元素进行设置，子元素就会按照已经设定好的宽度在弹性容器中占据宽度。

1、对子元素设置flex-grow:1后，因为两个子元素都设置的是flex-grow:1，所以就把弹性容器剩下的空间按照1:1的比例平分给两个子元素。使其充满容器。

第一个子元素b1显示的宽度=设置的宽度80px+剩下的平分的宽度30px（110px）

第二个子元素b2显示的宽度=设置的宽度160px+父元素剩下平分的宽度30px（190px）

2、为两个子元素设置不同的flex-grow取值，所以容器剩下空间分配的比例也变成1:2。

子元素b1的显示宽度=80px+父元素分配的宽度20px（100px）

子元素b2的显示宽度=80px+父元素分配的宽度40px（120px）

三、flex-shrink属性

语法：flex-shrink:<number>（default 1）

属性作用：设置或检索弹性盒的收缩比率

根据弹性盒子元素所设置的收缩因子作为比率来收缩空间

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

代码示例：

在弹性盒子中，如果不进行其他的设置，子元素永远不会溢出父元素。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>FlexBox</title>

     <style>

         .box{

             width:200px;

             height:50px;

             border:1px solid red;

             background:#faa;

             display:flex;}

         .b1{width:80px;height:20px;background:#aaf;}

         .b2{width:160px;height:20px;background:#afa;}

     </style>

 </head>

 <body>

 <div class="box">

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

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

 </div>

 </body>

 </html>

父元素宽度为300px，两个子元素的宽度之和为340px，子元素本应该溢出父元素的，但是由于父元素设置了弹性盒子，所以子元素还是放置在父元素中。

1、给弹性盒子元素设置flex-shrink：0后，子元素父容器中溢出。

2、给弹性盒子元素分别设置flex-shrink：2和flex-shrink:1后，子元素并不会从页面中溢出。

flex-shrink的收缩比例是如何分配呢

超出的空间=(160+80) - 200 =40px

加权总和=80*2+160*1=320px

.b1被移除的宽度：80*(2/320)*40=20px（元素原有设置的宽度 * 在加权总和中所占的比例2/320 * 超出的空间）

所以第一个弹性盒子元素b1在页面所显示的宽度=原有宽度 - 被移除的宽度=80px - 20px= 60px

.b2被移除的宽度：160 * (1/320) * 40=20px （元素原有的宽度 * 在加权总和中所占的比例1/320 * 超出的空间）

第二个弹性盒子元素b2在页面所显示的宽度=原有宽度 - 被移除的宽度 = 160px - 20px=140px

四、flex-basis属性

语法：flex-basis：<length> | auto（default auto）

属性作用：设置或检索弹性盒伸缩基准值。

属性取值：

auto：无特定宽度值，取决于其他属性值

<length>：用长度值来定义宽度。不允许负值。

<percentage>：用百分比% 来定义宽度。不允许负值。

代码示例：

在不设置其他属性，弹性盒子内部子元素的排列情况应该是成行排列，按照已经设置好的宽度在弹性容器内部占据空间。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>flexbox</title>

     <style>

     *{

         margin:0;padding:0;

     }

     ul li {list-style: none;}

     ul{width:600px;  height:50px;  background-color: #eee;  display:flex;}

     li{width:100px;height:30px;}

     li:nth-child(1){background:#f66;}

     li:nth-child(2){background:#6f6;}

     li:nth-child(3){background:#66f; /*flex-basis:600px;*/}

     li:nth-child(4){background:#faa;}

     li:nth-child(5){background:#aaf;}

     </style>

 </head>

 <body>

     <ul>

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

     </ul>

 </body>

 </html>

1、给子元素设置flex-basis:600px后，子元素不再按照原有的宽度排列，而是按照各自的宽度比例进行排列。弹性容器中其他子元素的宽度为100px，设置第三个子元素的flex-basis宽度为600px，所以各个子元素之间应该按照 1:1:6:1:1 的比例来分配父元素的宽度。

第三个子元素的宽度应该是600/(10/6)=360px

2、给子元素设置flex-basic:auto后，auto是默认值元素宽度并不发生变化。

3、设置子元素flex-basis为百分比，百分比是相对于父元素的百分比。

五、flex属性

语法：flex:none | [flex-grow] | [flex-shrink] | [flex-basis];

属性作用：简写属性。设置或检索伸缩盒对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

flex用于合并指定flex-shrink和flex-basis属性，默认值为0 1 auto。

如果缩写flex:1，则其计算值为：1 1 0

auto等价于1 1 auto；none等价于0 0 auto

[flex-grow]：定义弹性盒子元素的扩展比率

[flex-shrink]：定义弹性盒子元素的收缩比率

[flex-basis]：定义弹性盒子元素的默认基准值。

不对弹性盒子进行设置的情况：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     body{    height:50px;display: flex; border:2px solid #fcf;}

     /*div{flex:1;}*/

     .box1{width:50px;background-color: #ccf;}

     .box2{background: #cff;}

     .box3{width:50px;background-color:#ffc;}

     </style>

 </head>

 <body>

     <div class="box1">left</div>

     <div class="box2">center</div>

     <div class="box3">right</div>

 </body>

 </html>

表现效果：

1、子元素设置flex:1

2、子元素设置flex:auto；

六、Order属性

设置弹性盒子的子元素排列顺序。

number 默认值是 0。规定灵活项目的顺序。用整数值来定义排列顺序，数值小的排在前面，可以为负值。

弹性盒子FlexBox简介（二）的更多相关文章

弹性盒子FlexBox简介（一）
一.理解弹性盒子弹性盒子是CSS3的一种新的布局模式. CSS3弹性盒子(Flexible Box或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方 ...
CSS box-flex属性，然后弹性盒子模型简介
今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...
CSS box-flex属性，然后弹性盒子模型简介(转)
一.淡淡的开头语昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...
css3:神秘的弹性盒子flexbox
请先运行demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
弹性盒子 flexbox 元素居中
1 .navtext{ width:800px; height:600px; border: 1px solid black; justify-content:center; align-items: ...
弹性盒子布局flexbox
弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可相关 ...
flexbox 弹性盒子
flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...
Flexbox（弹性盒子）
CSS3属性:这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. 属性介绍: 创建Flex容器 .container ...
CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

随机推荐

Hibernate一级缓冲
Hibernate的一级缓冲什么是缓冲缓冲概念: 数据存在数据库中,数据库本身就是一个文件系统,使用流的方式操作文件,但是文件中有很多的内容,用流的操作得效率就低. 解决办法: 把数据存在内存中, ...
用户tokenId
tokenId表示为:用户登录到成功后,服务端分配给客户端的令牌号,同时下发tokenId的过期时间.下次用户直接持有tokenId,在其过期时间内均可跳过用户登录步骤,直接请求其他服务操作.如果to ...
bug大致分类及如何定位
前端一.概念:网站的静态页面设计,网站前端工作使用的是html.css.javascript等技术设计网站页面的样式和排版布局,这就是网站前端. 二.Bug类别 1.HTML:出现文本的问题基本都是 ...
html的标签规范
if/else标签{ % if condition1 %} ... display 1{ % elif conditon2 %} ... display 2{ % else % } ... displ ...
Go语言入门篇-高级数据类型
一.数组类型二.切片类型切片的更多操作方法示例: 三.字典类型四.通道类型示例: 通道的更多种类示例: 五.函数示例: 六.结构体和方法示例: 七.接口八.指针示例: mooc
mysql的my.sock不存在问题
因为是初步学习Linux,所以为了对其更加了解,没有使用yum对mysql进行安装,而是使用xftp6的方式上传然后解压安装 1.在安装过程中,好像如果不安装在usr/local目录下会存在不能启动的 ...
（3.5）常用知识-NULL与零长度、字符串尾部填充空格
概述:NULL与零长度是不同的,NULL表示数据未知或不可用,它是与零(数值或2进制).零长度字符串不同的一种值,也可以理解为一种状态. 即可以理解为:所有的变量都有2种状态,一种有值,一种为NUL ...
POJ 3743 LL’s cake（圆+PSLG）
题意是给你一块在原点半径为10的圆,然后告诉你一条直线在圆弧上的极角,相当于用这条直线把这个圆分成两半,然后一共是n条直线切圆,就好比切蛋糕,问你其中最大一块的面积是多少. 如果我们将圆弧转化成直线边 ...
kernel编译
Linux内核编译与安装 Linux内核介绍 Linux内核是一个用C语言写成的,符合POSIX标准的类Unix操作系统.内核是操作系统中最基本的一部分,提供了众多应用程序访问计算机硬件的机制.Lin ...
数塔 Easy
在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 已经告诉你了,这是个DP的题 ...

弹性盒子FlexBox简介（二）