【repost】CSS3弹性布局
弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间的能力。
最重要的是弹性盒子布局与方向无关,相对于常规的布局,很显然,这些工作以及网页设计缺乏灵活性,无法支持大型和复杂的应用程序(特别当它涉及到改变方向,缩放、拉伸和收缩等)。
一、弹性盒布局中的术语
1).弹性容器:弹性容器也就是所有弹性元素的父容器。
2).弹性子元素:弹性容器的所有子元素都是弹性子元素。
3).轴:弹性盒布局中分主轴和侧轴。主轴是布局布局的方向,侧轴垂直于主轴。
4).方向: 弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束 边缘代表了弹性子元素排列的起始和结束位置。同时可以改变属性值来改变显示位置。
二、弹性盒布局中的属性
1、display: flex | inline-flex; (适用于父类容器元素上)
定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器
(1)、box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)
(2)、inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)
(3)、flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)
(4)、inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)
(5)、flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)
(6)、inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)
2、flex-grow (适用于弹性盒模型容器子元素)
设置或检索弹性盒的扩展比率。(根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。)
定义
flex-grow: <number>
值说明
<number>:用数值来定义扩展比率。不允许负值
flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow,可以看到总共将剩余空间分成了4份,其中b占1份,c占3分,即1:3
3、flex-shrink (适用于弹性盒模型容器子元素)
设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。)
定义
flex-shrink: <number>
说明
flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
4、flex-basis(适用于弹性盒模型容器子元素)
设置或检索弹性盒伸缩基准值。
定义
flex-basis: <length> | auto | <percentage>
值的说明
auto:无特定宽度值,取决于其它属性值
<length>:用长度值来定义宽度。不允许负值
<percentage>:用百分比来定义宽度。不允许负值
5、flex (适用于弹性盒模型子元素)
复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
如果缩写flex:1, 则其计算值为:1 1 0
定义
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
值的说明
none:none关键字的计算值为: 0 0 auto
[ flex-grow ]:定义弹性盒子元素的扩展比率。
[ flex-shrink ]:定义弹性盒子元素的收缩比率。
[ flex-basis ]:定义弹性盒子元素的默认基准值。
6、flex-direction (适用于父类容器的元素上)
设置或检索伸缩盒对象的子元素在父容器中的位置。
定义
flex-direction: row | row-reverse | column | column-reverse
值说明
row:横向从左到右排列(左对齐),默认的排列方式。
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
column:纵向排列。
row-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
备注
flex生效需定义其父元素display为flex
7、flex-wrap (适用于父类容器上)
设置或检索伸缩盒对象的子元素超出父容器时是否换行。
定义
flex-wrap: nowrap | wrap | wrap-reverse
值说明
nowrap:当子元素溢出父容器时不换行。
wrap:当子元素溢出父容器时自动换行。
wrap-reverse:反转 wrap 排列。
8、flex-flow (适用于父类容器上)
复合属性。设置或检索伸缩盒对象的子元素排列方式。
定义
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
值说明
[ flex-direction ]:定义弹性盒子元素的排列方向。
[ flex-wrap ]:定义弹性盒子元素溢出父容器时是否换行。
9、align-content (适用于父类容器上)
设置或检索弹性盒堆叠伸缩行的对齐方式。
定义
align-content: flex-start | flex-end | center | space-between | space-around | stretch
值说明
(1)、flex-start:各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。
(2)、flex-end:各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。
(3)、center:各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。)
(4)、space-between:各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'flex-start'。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。
(5)、space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。
(6)、stretch:各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。在其它情况下,剩余空间被所有行平分,以扩大它们的侧轴尺寸。
10、align-items (适用于父类容器上)
设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
定义
align-items: flex-start | flex-end | center | baseline | stretch
值说明
(1)、flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
(2)、flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
(3)、center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
(4)、baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
(5)、stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
11、align-self (适用于弹性盒模型子元素)
设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。
定义
align-self: auto | flex-start | flex-end | center | baseline | stretch
值说明
(1)、auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
(2)、flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
(3)、flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
(4)、center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
(5)、baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
(6)、stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
12、justify-content (适用于父类容器上)
设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的空间进行分配。当元素溢出某行时,这一属性同样会在对齐上进行控制。
定义
justify-content: flex-start | flex-end | center | space-between | space-around
值说明
(1)、flex-start:弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。
(2)、flex-end:弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。
(3)、center:弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。
(4)、space-between:弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。
(5)、space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
13、order (适用于弹性盒模型容器子元素)
定义
order: <integer>
值说明
<integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值。
三、CSS3弹性布局实例
1、居中对齐
.flex-container /**//* We first create a flex layout context */
display: flex;
/**//* Then we define the flow direction and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
}
实例说明
通过设置父类容器的css代码控制子元素的排列方式(flex-direction:row)从左到右(默认方式)。子元素超出内容时是否换行。flex-wrap:wrap(采用换行的方式)。合起来就是flex-flow:row wrap。
设置子元素的弹性盒堆叠伸缩行的对齐方式为在盒子中平局分布 justify-content:space-around
2、自适应导航
{...}{
display: flex;
flex-flow: row wrap;
}
{...}{
.navigation {
}
}
{...}{
.navigation {
}
}
实例说明
(1)、设置子元素为从左到右(flex-direction:row),内容超出换行(flex-wrap:wrap).
(2)、设置子元素的内容向右对齐(justify-content:flex-end)
(3)、当小于800px时,内容为居中,当小于500px时,内容纵向排列,从上到下。
3、3栏移动优先布局
.wrapper ...{
display: flex;
flex-flow: row wrap;
}
...{
flex: 1 100%;
}
/**//* Medium screens */
@media all and (min-width: 600px) /**//* We tell both sidebars to share a row */
.aside ...{ flex: 1 auto; }
}
...{
...{ flex: 2 0px; }
.aside-1 ...{ order: 1; }
.main ...{ order: 2; }
.aside-2 ...{ order: 3; }
.footer ...{ order: 4; }
}
实例说明
(1)、设置子元素从左到右,超出换行(flex-flow:row wrap;)。
(2)、默认情况下所有子元素拓展比例为1(flex-grow:1),伸缩比例为100%(flex-basis:100%)。
(3)、大于800px时,.main的拓展比例为2.伸缩值为0(flex-basis:0px),并且侧栏aside-1排列在第一位,main在第二位,aside-2在第三位。
(4)、大于600时。.aside元素的拓展比例为1(flex-grow:1),伸缩比例为auto(flex-basis:auto)。
【repost】CSS3弹性布局的更多相关文章
- css3弹性布局语法全解
本文介绍css3弹性布局的语法 html布局 <div class="box"> <div class="item">1</div ...
- css3 弹性布局和多列布局
弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性. 定义一个弹性盒子 在父盒子上定义display属性: #box{ display ...
- 从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...
- CSS3弹性布局内容对齐(justify-content)属性使用具体解释
内容对齐(justify-content)属性应用在弹性容器上.把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自己主动边距被确定后. 它用来在存在剩余空间时怎样加以 ...
- css3弹性布局
二.弹性布局(重点******************************************) 1.什么是弹性布局 弹性布局,是一种布局方式. 主要解决的是某个元素中子元素的布局方式 让页面 ...
- CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自动边距被确定后. 它用来在存在剩余空间时如何加以分配 ...
- css3 FlexBox 弹性布局
Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...
- CSS3支持box-flex弹性布局
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 第 29 章 CSS3 弹性伸缩布局[上]
学习要点: 1.布局简介 2.旧版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.布局简介 CSS3 提供一种崭新的 ...
随机推荐
- mybatis出现无效的列类型
package com.webapp.hanqi.test; import java.util.Date; import org.junit.jupiter.api.AfterEach; import ...
- Python人工智能第二篇
Python人工智能之路 - 第二篇 : 现成的技术 预备资料: 1.FFmpeg: 链接:https://pan.baidu.com/s/1jonSAa_TG2XuaJEy3iTmHg 密码:w ...
- pwnable.kr-fd-witeup
登录进远程电脑,看到flag,查看内容,权限不够失败咯,ls -la看看权限. 欧克,fd用户对flag只用可读权限,但是呢,看到fd用户对fd文件有s权限,它指设置使当前在执行阶段具有文件所有者的权 ...
- 关于图片无法输出的问题使用ob_clean()
前两天相当于炸锅了,用户量在三百万左右,用户一直使用二维码在门店进行消费,晚上八九点钟时 ,居然全都打不开了 原图 出问题的图 本该是二维码的出现不了,代码使用的是PHP的qrcode,蒙圈了,查询了 ...
- JS练习第三课
用typeof查看数据类型 <pre> <script type="text/javascript"> alert(typeof 12345); <s ...
- UCloud双11活动 - 新人UCloud代金券最低年100元香港云服务器
UCloud,一家在国内还是比较大的云计算产品提供商,早年一直提供企业服务的,如今也开始落地到个人用户群.这不在希望获得更多的用户基础的同时发布各种促销活动.这次双十一活动时机肯定也是要把握的,据说官 ...
- 2,fiddler的基本设置
1,首次打开的基本设置 2,过滤抓包的内容 1)较为常用的是: URL包含和hosts的设置 2)不常用的是 3,设置https 这是实在安装证书,当还是不能抓到https的包的时候,可以区安装彼得证 ...
- GUI学习之五——QPushbutton类学习笔记
QPushButton是QAbstractButton类下使用最多的子类,它的用法在上一章中基本讲完了,这里还总结了几个别的用法. 一.创建按钮 我们在前面所有的案例中创建按钮都是用这样的方式 win ...
- Apollo
下载源码: https://github.com/nobodyiam/apollo-build-scripts#%E4%B8%80%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9 ...
- laravel-安装验证码扩展
第一步:找到验证码扩展 链接:https://packagist.org/packages/mews/captcha 第二步:安装 环境要求:验证码需要开启php的gd库 . 执行命令(有时候安装会出 ...