我是靠谱客的博主 虚幻发卡,最近开发中收集的这篇文章主要介绍flex布局学习笔记:flexbox--持续维护中,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

兼容性先放在这里:引自 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,例如 floatclear: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-flowflex-directionflex-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。它可以接受一个正值,也可以接受一个负值。
这里写图片描述
这个时候,三个liorder值都是0,如果想让 第一个 li放在后面。

li:nth-child(1){
order : 1 ;
}

这里写图片描述

flex-grow 和 flex-shrink

flex-growflex-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默认的值是autoflex-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速记

flexflex-growflex-shrinkflex-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 分别为21 ,所以他们分别占父元素的2/31/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--持续维护中所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(41)

评论列表共有 0 条评论

立即
投稿
返回
顶部