理解Flexbox弹性盒子
http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档
1:要开始使用Flexbox,必须先让父元素变成一个Flex容器。
你可以在父元素中显式的设置display:flex
或者display:inline-flex
。就这么的简单,这样你就可以开始使用Flexbox模块。
2.Flex容器属性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
flex-direction: row || column || row-reverse || column-reverse;
flex-wrap: wrap || nowrap || wrap-reverse;
flex-flow:flex-flow
是flex-direction
和flex-wrap
两个属性的速记属性
你还记得使用border
的速记写法?border: 1px solid red
。这里的概念是相同的,多个值写在同一行,比如下面的示例:
ul {
flex-flow: row wrap;
}
justify-content
属性可以接受下面五个值之一:
ul {
justify-content: flex-start || flex-end || center || space-between || space-around
}
align-items
属性类似于justify-content
属性。只有理解了justify-content
属性,才能更好的理解这个属性。
align-items
属性可以接受这些属性值:flex-start || flex-end || center || stretch || baseline
。
ul {
align-items: flex-start || flex-end || center || stretch || baseline
}
它主要用来控制Flex项目在Cross-Axis对齐方式。这也是align-items
和justify-content
两个属性之间的不同之处。
align-content
还记得前面讨论的wrap
属性吗?我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。
align-content
属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式,排列效果和align-items
值一样,但除了baseline
属性值。
像align-items
属性一样,它的默认值是stretch
。你现在应该熟悉这些值。那它又是如何影响Flex容器里的10个Flex项目多行排列方式。
3.Flex项目属性
order || flex-grow || flex-shrink || flex-basis
flex-basis
记得前面我说过,Flex项目是当我没有的。但我们也可以控制。
flex-basis
属性可以指定Flex项目的初始大小。也就是flex-grow
和flex-shrink
属性调整它的大小以适应Flex容器之前。
前面介绍的是非常生要的,所以我们需要花一点时间来加强对他们的理解。
flex-basis
默认的值是auto
。flex-basis
可以取任何用于width
属性的任何值。比如 % || em || rem || px
等。
注意:如果flex-basis
属性的值是0
时,也需要使用单位。即flex-basis: 0px
不能写成flex-basis:0
。
默认情况,Flex项目的初始宽度由flex-basis
的默认值决定,即:flex-basis: auto
。Flex项目宽度的计算是基于内容的多少来自动计算(很明显,加上了padding
值)。
flex速记
flex
是flex-grow
、flex-shrink
和flex-basis
三个属性的速记(简写)。
注意它们之间的顺序。flex-grow
第一,然后是flex-shrink
,最后是flex-basis
。缩写成GSB,可以帮助你更好的记忆。
如果flex
属性值中少一个值,会发生什么呢?
如果你只设置了flex-grow
和flex-shrink
值,flex-basis
可能是默认值0
。这就是所谓的绝对flex项目。只有当你设置了flex-basis
,你会得到一个相对flex项目。
flex: 0 1 auto
li {
flex: 0 1 auto;
}
这相当于写了flex
默认属性值以及所有的Flex项目都是默认行为。
flex: 0 0 auto
li {
flex: 0 0 auto;
}
这个相当于flex: none
。
还是老规矩:宽度是被自动计算,不过弹性项目不会伸展或者收缩(因为二者都被设置为零)。伸展和收缩开关都被关掉了。
它基本上是一个固定宽度的元素,其初始宽度是基于弹性项目中内容大小。
flex: 1 1 auto
这与 flex: auto
项目相同。
还是按我前面立的规矩。即,自动计算初始化宽度,但是如果有必要,会伸展或者收缩以适应整个可用宽度。
伸展和收缩开关打开了,宽度自动被计算。
flex: "positive number"
这里正数可以代表任何正数(没有引号)。这与 flex: “正数” 1 0
相同。
flex: 2 1 0
与写为 flex: 2
是一样的,2
表示任何正数。
li {
flex: 2 1 0; / *与 flex: 2相同 */
}
与前面我立的规矩一样,即,将弹性项目的初始宽度设置为零(嗯?没有宽度?),伸展项目以填满可用空间,并且最后只要有可能就收缩项目。
弹性项目没有宽度,那么宽度该如何计算呢?
这个时候 flex-grow
值就起作用了,它决定弹性项目变宽的程度。由它来负责没有宽度的问题。
当有多个弹性项目,并且其初始宽度 flex-basis
被设置为基于零的任何值时,比如 0px
,使用这种 flex
简写更实用。
实际发生的是,弹性项目的宽度被根据 flex-grow
值的比例来计算。
记住设置 flex-grow : 1
,会让弹性项目填满可用空间。伸展开关打开了。
这里有两个弹性项目。一个的 flex-grow
属性值是 1
,另一个是 2
,那么会出现啥情况呢?
两个项目上的伸展开关都打开了。不过,伸展度是不同的,1
和 2
。
二者都会填满可用空间,不过是按比例的。
它是这样工作的:前一个占 1/3
的可用空间,后一个占 2/3
的可用空间。
绝对和相对Flex项目
一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中,只根据 flex
属性来计算,而不是内容。
绝对Flex项目的宽度只基于 flex
属性,而相对Flex项目的宽度基于内容大小。
align-self
align-self
属性更进一步让我们更好地控制弹性项目。
你已经看到 align-items
属性是如何有助于整体对齐弹性容器内的所有弹性项目了。
如果想改变一个弹性项目沿着侧轴的位置,而不影响相邻的弹性项目,该怎么办呢?
这是 align-self
属性大展拳脚的地方了。
该属性的取值可以是这些值之一:auto || flex-start || flex-end || center || baseline || stretch
。
Auto-margin 对齐
当在Flex项目上使用 margin: auto
时,值为 auto
的方向(左、右或者二者都是)会占据所有剩余空间。
解决嵌套中的flex容器的占用空间比例问题
一定有办法让所有这些放在一行,每个段落占据该行相等空间。用Flexbox来搞定!这里的概念与很多栅格系统中用的一样。
li {
display: flex; /*段落现在显示在一行上*/
padding: 0 20px; /*留点呼吸空间*/
min-height: 50px;
}
li p {
flex: 0 0 25%; /*这是甜面酱*/
}
看到段落会发生什么了吗?
flex: 0 0 25%;
“不要伸展或者收缩,不过每个段落应该占据 25%
的可用空间” 。段落所占空间是相等的。
理解Flexbox弹性盒子的更多相关文章
- flexbox 弹性盒子
flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- flexbox弹性盒子模型
这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...
- css FlexBox 弹性盒子常用方法总结
总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...
- CSS3 -- FlexBox(弹性盒子)
盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...
- flexbox弹性盒子布局
混合划分 demo1,css: #demo1{ width: 100%; background: #ccc; display: -webkit-flex;/*表示使用弹性布局*/ } #demo1 . ...
- 弹性盒子FlexBox简介(一)
一.理解弹性盒子 弹性盒子是CSS3的一种新的布局模式. CSS3弹性盒子(Flexible Box或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方 ...
- 弹性盒子布局flexbox
弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...
- css3:神秘的弹性盒子flexbox
请先运行demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
随机推荐
- Erlang cowboy websocket 服务器
Erlang cowboy websocket 服务器 原文见于: http://marcelog.github.io/articles/erlang_websocket_server_cowboy_ ...
- PS 滤镜——Skewing
%%%% Skewing clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorith ...
- Android特效专辑(五)——自定义圆形头像和仿MIUI卸载动画—粒子爆炸
Android特效专辑(五)--自定义圆形头像和仿MIUI卸载动画-粒子爆炸 好的,各位亲爱的朋友,今天讲的特效还是比较炫的,首先,我们会讲一个自定义圆形的imageView,接着,我们会来实现粒子爆 ...
- 基于Bresenham和DDA算法画线段
直线:y=kx+b 为了将他在显示屏上显示出来,我们需要为相应的点赋值,那么考虑到计算机的乘法执行效率,我们肯定不会选择用Y=kx+b这个表达式求值,然后进行画线段. 我们应当是将它转化为加法运算. ...
- android EventBus详解(三)
post()方法调用流程 我们继续来看EventBus类,的另一个入口方法post() //已省略部分代码 public void post(Object event) { PostingThread ...
- ELF 文件 动态链接 - 地址无关代码(GOT)
Linux 系统中,ELF动态链接文件被称为 动态共享对象(DSO,Dynamic Shared Object),简称共享对象 文件拓展名为".so" 动态链接下 一个程序可以被分 ...
- Dapper.SimpleCRUD mysql 插入数据时出现的小插曲
最近想玩一下.net dapper,然后在nuget包中搜索看到了 Dapper.SimpleCRUD ,然后我等好奇心重的小骚年,内心又开始跃跃欲试. 使用sqlserver数据库时没有遇到问题,既 ...
- WSL与Windows交互实践
1. WSL是什么 2. WSL新特性 3. WSL管理配置 4. WSL交互 5. 解决方案 * 5.1 使用别名 * 5.2 多复制一份 * 5.3 重定向 * 5.4 symlink 6 ...
- C++各个存储区
#include<iostream.h>void main(){char a[]="abc";栈 char b[]="abc";栈 char* c= ...
- 装修工人如何在网上"找活"
http://blog.sina.com.cn/s/blog_555e8fe80102wwsz.html ps:其实码农也是一种装修工. 在这个互联网时代,各个行业都在利用网络达到自己的商业目的,作为 ...