概述
兼容性先放在这里:引自 Using Flexbox: Mixing Old and New for the Best Browser Support 、最佳浏览器兼容
父元素{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
子元素{
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
支持浏览器
如果你将Flexbox多版本混合在一起使用,可以得到以下浏览器的支持:
- Chrome any
- Firefox any
- Safari any
- Opera 12.1+
- IE 10+
- iOS any
- Android any
最在的限制当然是IE浏览器了,但在其他方面很好。如果你正在做一个特定的移动版本网站,你也会得到更好的支持。如果有谁在window版本手机上测试,麻烦告诉我一下测试结果。
Firefox19有点问题,你需要在观察一下它。例如,在这个案例中,我无法近死侧边栏为20%。这个只是折叠到内容的宽度里,这样说或许有点武断。我需要设置“-moz-box-flex:1”,否则主内容(60%)会伸展到和最宽的段落,就像是段落设置了“white-space:nowrap”,这一点简直是莫名其妙。
我认为学习 Flexbox 是件很有趣的事情,因为他会省去很多你因为布局写的无用的css,例如 float
、clear:both
以及需要用 dsplay:inline-block
的布局,还会引起其他问题(元素间的4px)。另外 Flexbox 是现代Web布局的主流方式之一,不会很快就消失。
FlexBox是什么?
根据规范中的描述可知道,Flexbox模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调整和分配元素和空间两者之关的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。
如何开始使用Flexbox?
首先,简单的列表(下面的例子都以此列表展开哦)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul {
list-style: none;
border: 1px solid green;
}
li {
width: 100px;
height: 100px;
background: #aff;
margin: 5px;
}
ul {
/*
声明父元素为 `flex` 容器
*/
display:flex;
/* display:inline-flex; */
}
看到没有,神奇的像是float:left
一样,而且不用清除浮动啦。
一、flex 容器属性: flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
以下: X -> 水平方向 ; Y -> 垂直方向
flex-direction
flex-direction
属性控制Flex项目沿着主轴(Main Axis)的排列方向。
/* ul 是一个flex容器 */
ul {
flex-direction: row || column || row-reverse || column-reverse;
}
1、row
:沿X从左向右排列(左 -> 右)
2、column
: 沿Y从上向下排列 (上 -> 下)
3、row-reverse
: 沿X从右向左排列 (右 -> 左)
4、column-reverse
: 沿Y从下向上排列 (下 -> 上)
flex-wrap
ul {
flex-wrap: wrap || nowrap || wrap-reverse;
}
1、 nowrap
(默认值):Flex容器内的Flex项目不换行排列,flex项目宽度自适应
2、 wrap
: Flex容器内的Flex项目达到一定数量时,能换行排列
3、 wrap-reverse
: 它让Flex项目在容器中多行排列,只是方向是反的
flex-flow
flex-flow
是 flex-direction
和 flex-wrap
两个属性的速记属性。
ul {
flex-flow: row wrap;
}
相当于
ul {
flex-direction: row;
flex-wrap: wrap;
}
justify-content
ul {
justify-content: flex-start || flex-end || center || space-between || space-around;
}
1、 flex-start
(默认值):让所有Flex项目靠X开始边缘(左对齐)
2、 flex-end
:让所有Flex项目靠X结束边缘(右对齐)
3、 center
:让所有Flex项目排在X中间(居中对齐)
4、 space-between
:让除了第一个和最一个Flex项目的两者间间距相同(两端对齐)
5、 space-around
:让每个Flex项目具有相同的空间
align-items
ul {
align-items: flex-start || flex-end || center || stretch || baseline;
}
1、 stretch
(默认值):让所有的Flex项目高度和Flex容器高度一样
2、 flex-start
:让所有Flex项目靠 Y 开始边缘(顶部对齐)。
3、 flex-end
:让所有Flex项目靠 Y 结束边缘(底部对齐)。
4、 center
:让Flex项目在 Y 中间(居中对齐)。
5、 baseline
:让所有Flex项目在 Y 上沿着他们自己的基线(每个项目的中间)对齐。
align-content
1、 stretch
(默认值):让所有的Flex项目高度和Flex容器高度一样
2、 flex-start
:让多行Flex项目靠 Y 开始边缘(顶部对齐)。
3、 flex-end
:让多行Flex项目靠 Y 结束边缘(底部对齐)。
4、 center
:让多行项目在 Y 中间(居中对齐)。
5、 baseline
:让多行Flex项目在 Y 上沿着他们自己的基线(每个项目的中间)对齐。
二、Flex项目属性
order || flex-grow || flex-shrink || flex-basis
order
允许Flex项目在一个Flex容器中重新排序。基本上,你可以改变Flex项目的顺序,从一个位置移动到另一个地方。
这不会影响源代码。这也意味着Flex项目的位置在HTML源代码中不需要改变。order
属性的默认值是0
。它可以接受一个正值,也可以接受一个负值。
这个时候,三个li
的order
值都是0
,如果想让 第一个 li
放在后面。
li:nth-child(1){
order : 1 ;
}
flex-grow 和 flex-shrink
flex-grow
和flex-shrink
属性控制Flex项目在容器有多余的空间如何放大(扩展),在没有额外空间又如何缩小。
他们可能接受0
或者大于0
的任何正数。0 || positive number
。
ul {
display:flex;
}
默认情况下,flex-grow
属性值设置为0
。表示Flex项目不会增长,填充Flex容器可用空间。取值为0
就是一个开和关的按钮。表示flex-grow
开关是关闭的。
li {
flex-grow:1;
}
默认情况下,flex-shrink
的值是1
,也就是说flex-shrink
开关也是打开的。也就是当你拉动浏览器窗口的时候,里面的内容是根据窗口大小变化的。
flex-basis
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项目宽度的计算是基于内容的多少来自动计算.
然而,如果你想将Flex项目设置一个固定的宽度,你也可以这样做:
li {
flex-basis: 150px;
}
flex速记
flex
是flex-grow
、flex-shrink
和flex-basis
三个属性的速记(简写)。
li {
flex: 0 1 auto;
}
相当于
li {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
flex-grow
第一,然后是flex-shrink
,最后是flex-basis
。缩写成GSB
,可以帮助你更好的记忆。
先更到这,刚刚一半,忙起来,下次继续学习。
分割线———————————————5.23————————————————————————
<ul>
<li>我是第一个苹果</li>
<li>我是第二个桃子</li>
</ul>
ul {
display:flex;
}
/* 第一个弹性项目 */
li:nth-child(1) {
flex: 2 1 0; /* 与写成 flex: 2 相同*/
}
/* 第二个弹性项目 */
li:nth-child(2){
flex: 1 1 0;
background-color: #8cacea;
}
flex-grow
分别为2
和 1
,所以他们分别占父元素的2/3
和 1/3
。我是这么理解的,大家可以看下本文最下面链接的文章,其实我没懂博主的意思,就按我自己的理解记笔记了。
-
align-self
如果想改变一个弹性项目沿着侧轴的位置,而不影响相邻的弹性项目
取值 : auto || flex-start || flex-end || center || baseline || stretch
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-start;
/* 影响所有弹性项目 */
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
font-size: 2rem;
}
1、 auto
与父元素的 align-items
值相同
2、 flex-start
:顶部
3、 flex-end
:底部
4、 center
:垂直居中
5、 baseline
:与其他flex子项目基线对齐
6、 stretch
: 垂直拉伸,拉伸与容器高度一样
-
绝对和相对flex项目
在原博文中其实提到过 绝对和相对flex项目,但是因为我需要盲目相信,所以就没往笔记里写,在这一小节有一个详细介绍,笔记都是边理解边写的,哈哈 ,所以比较随心~~
相对 flex 项目:项目的间距根据内容大小计算
绝对 flex 项目:项目的间距根据 flex
属性计算,而不是内容
<ul>
<li>在原博文中其实提到过 绝对和相对flex项目,但是因为我需要盲目相信,所以就没往笔记里写,在这一小节有一个详细介绍,笔记都是边理解边写的,哈哈 ,所以比较随心~~</li>
<li>相对 flex 项目:项目的间距根据内容大小计算 </li>
</ul>
ul{
list-style: none;
display: flex;
background: #ff00ff;
}
li{
background: #aff;
margin: 5px;
text-align: center;
flex: auto;
/*记住这与 flex: 1 1 auto; --- flex-basis:auto
相同*/
border: 1px solid #5a6cf8;
}
这个就是 flex 的相对项目,由内容撑起来的。
将上面的css改为
li{
flex:1;
/*与 flex: 1 1 0 相同*/
}
这就是flex绝对项目,由 flex 属性决定 li
的宽度。
Flex项目的初始宽度是零(flex-basis: 0
),并且它们会伸展以适应可用空间。当有两到多个Flex项目的flex-basis
取值为0
时,它们会基于 flex-grow
值共享可用空间。
这个之前就讨论过了。现在宽度不会基于内容大小而计算,而是基于指定的 flex
属性值来计算。这样你就明白了吧。对么?
绝对Flex项目的宽度只基于 flex 属性,而相对Flex项目的宽度基于内容大小。
-
Auto-margin 对齐
-
当给
li
设置margin:auto
时,是会出问题的。
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
</ul>
ul{
list-style: none;
display: flex;
background: #ff00ff;
}
li{
background: #aff;
margin: 5px;
text-align: center;
border: 1px solid #5a6cf8;
}
这些图的背景颜色实在太丑了,哈哈哈哈哈
li:first-of-type{
margin: auto;
}
li:first-of-type{
margin-right: auto;
}
li:first-of-type{
margin-right: auto;
}
设置 margin 任何一个方向的 auto 之后,justify-content
就不起作用了。
——————又要搁浅了,因为我要去健身啦,下次接着学习啊,这个flex布局简直厉害了——————
————–6/1—==因 为本人年龄大于14周岁,并且暂时膝下无子女,所以无法过六一儿童节————–
码农网大神是这么说的
于是乎我先自己做了个小练习,用不了十分钟的。
开始今天的学习~~~~
flex 的兼容性问题
上述解决方案地址 解决flexbox跨浏览器兼容bug
学习于码农网FlexBox
最后
以上就是虚幻发卡为你收集整理的flex布局学习笔记:flexbox--持续维护中的全部内容,希望文章能够帮你解决flex布局学习笔记:flexbox--持续维护中所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复