CSS flex使用
实现布局最早就是用浮动,但是浮动最初的目的是用来做图片文字环绕的。只是正好可以用来做布局,而且用浮动的时候存在高度坍塌问题,虽然可以用cleanfix来修复这个问题。但理想的状态是最好有一种功能是专门来处理这个事情的,而不是开发者缝缝补补。浮动是CSS一种非常老且不好用的功能。Flex是专门用来解决布局问题的。Flex布局是非常好用的,只是ie需要10才支持。不过目前ie10已经不维护了。其它浏览器都是支持的,包括移动端的浏览器。flex在移动端是非常流行的,在pc端也越来越流行。
关于flex的定义和教程,火狐官方的文档是最详细的,w3c的好像连模型图都没有。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
flex的两个重要元素 flex-container和flex-item
这两个概念要了解一下,并没有相关代码,只是个概念。方便描述Flex。
例如下面的商品是包裹在一个大的div里面的,只要给这个div设置为flex属性,那么这个div就叫做 flex-container,而里面的这些小的div(或者子元素)就是flex-item。非常好理解。
开启flex和flex的优点
开启flex也非常的简单。
使用display:flex就可以开启flex功能,flex是一个块元素。还可以设置为inline-flex,就变成可以改变大小的行内元素。
#box {
display: flex;
/*display: inline-flex;*/
}
我们写三个div,默认情况下就是下面的样子。(字体做了居中)。现在我想让三个div水平排列怎么做呢?可以给三个div都设置float属性。如果用flex来实现。直接给父div设置为flex就可以实现了。
<style rel="stylesheet">
#box {
}
.div1{
width: 200px;
height: 200px;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
background-color: lightsalmon;
}
.fontCenter{
text-align: center;
line-height: 200px;
font-size: 50px;
}
</style>
<div id="box">
<div class="div1 fontCenter">1</div>
<div class="div2 fontCenter">2</div>
<div class="div3 fontCenter">3</div>
</div>
使用flex一行代码就实现了水平排列的功能。
#box {
display: flex;
/*display: inline-block;*/
}
但如果我想让三个布局右对齐要怎么做呢?float的做法就是把三个div看成一个整体,然后让整体右浮动。而使用flex就非常的简单,在flex-container多添加下面一行就可以实现了。具体细节下面再解释。
#box {
display: flex;
justify-content: end;
}
可以看到flex是非常高效简洁的。
flex的定位系统
在flex里面并没有x,y轴。而是叫主轴和交叉轴。概念是完全不一样的,并不是换个名字而已。在我们设置了下面的代码后,flex的定位系统大概处于下图的样子。主轴的方向是从左到右。最左边是main-start,右边是main-end。这非常好理解。
display: flex;
//默认值就是row,可以不写
//flex-direction: row;
下图是一个主轴的一个示意图,我们看到主轴在水平方向是有两个方向的,并且后面还跟了一个属性flex-direction:row表示方向是从右往左的,如果设置为flex-direction:row-reverse就是从左往右的。当然main-start和main-end也会跟着改变。
不光如此,主轴还能在垂直方向上(flex-direction:column),也有两个方向。flex-direction:column表示从上到下,flex-direction:column表示从下到上。当然main-start和main-end也会跟着改变。也就是主轴可以有四个方向,当然同时只能设定一个方向。
还有一个轴是垂直于主轴的,我们叫他交叉轴。在默认的情况下(只是开启flex,没有任何额外操作),整个定位系统就如下图所示。
其实默认的情况就是x,y轴的形式。
对应的布局情况有下面是四种。
可以通过justify-content属性调整子元素的对齐方式。非常的方便。
对于居中的情况,还默认提供了三种效果,都是非常实用的。
具体细节在下面的案例中举例说明。
具体案例和常见布局实现
情况一:水平布局(靠左)
前面已经讲过,只要开启flex就可以实现了。
情况二:水平靠右
设置justify-content为flex-end就行。
display: flex;
justify-content: flex-end;
情况三:水平居中
正常居中:
display: flex;
justify-content: center;
居中效果:
justify-content还可以设置三种不同的居中效果,效果如下图,可以自己试下。
flex-wrap
我们有9个正方形的div。在设置了flex后水平排列,因为宽度超过屏幕宽度。九个div宽度都被压缩,这是flex的默认处理办法。
当然最好是能够换行显示,flex-wrap就可以实现这样的功能。
flex-wrap: wrap;
还有一个值是wrap-reverse,不过一般用不上。
flex-wrap: wrap-reverse;
flex-flow
这个属性就是可以同时设置flex-dirction和flex-wrap,没什么意思,觉得非常的鸡肋。
display: flex;
flex-flow: row-reverse wrap;
align-items属性
这个属性是专门用来处理交叉轴的item的对齐方式。我们默认交叉轴方向是从上到下(别的方向是类似的,只是相反而已)。
总共就下面这5个值。
flex-start:顶部对齐
flex-start:底部对齐
center:中间对齐
baseline:基线对齐,基线是文字的一个概念,相当于文字底部。如果有多行文字,以第一行对齐
stretch:如果你没有设置item的height(只要有一个),那么所有的item都会填充满高度。
自己设置试试就知道了。
在多行的情况下,item之间会有间隙,这个间隙大高度是多余高度等分获得的。
#box {
display: flex;
flex-flow: row wrap;
align-items: flex-end;
height: 500px;
background-color: plum;
}
align-content属性
align-content是专门用来处理多行的,单行就没必要用这个,用align-items就行。
和 align-items是类似的,align-items是单独影响每个item的,而align-content是把这些item当成一个整体来影响。
和align-item的区别是在多行情况下,item高度是是没有间隙大,原来什么样子就是什么样子,只是整体做一个对齐。
同样也支持三种居中对齐方式。
到此。flex-container的所有属性都讲完了。
flex-item的属性
前面都是flex-container的属性,现在开始讲flex-item的属性
order属性
order的值默认是0,值越小排在越前面。
.div1{
width: 200px;
height: 200px;
order: 3;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
order: 1;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
order: 2;
background-color: lightsalmon;
}
align-self
有一个元素想搞特殊,就可以用这个属性给元素单独设置。
.div1{
width: 200px;
height: 200px;
order: 3;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
order: 1;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
order: 2;
align-self: flex-end;
background-color: lightsalmon;
}
flex-grow
这个属性就是用来填充空白区域的。比如下面的三个div。
都设置上flex-grow属性。就会变成下面的样子。
.div1{
width: 200px;
height: 200px;
flex-grow: 1;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
flex-grow: 2;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
flex-grow: 1;
background-color: lightsalmon;
}
比如种长是1000px,三个div宽度都是100px,那么
div1增加的长度=(1000-1003)/41
div2增加的长度=(1000-1003)/42
div3增加的长度=(1000-1003)/41
如果flex-grow的所有item的总和小于1,那么直接拿flex-grow的值乘以多余的长度就可以了。
.div1{
width: 200px;
height: 200px;
flex-grow: .1;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
flex-grow: .6;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
flex-grow: .3;
background-color: lightsalmon;
}
会空一块出来。
div1增加的长度=(1000-100)*0.1
div2增加的长度=(1000-100)*0.6
div3增加的长度=(1000-100)*0.2
如果三个值加起来超过1,那么算法其实和整数是一样的。都是按比例增长,两种是没什么区别的。
.div1{
width: 200px;
height: 200px;
flex-grow: .1;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
flex-grow: .6;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
flex-grow: .5;
background-color: lightsalmon;
}
flex-shrick
和flex-grow相反, flex-shrick用于当空间不够的时候,对item进行缩小。例如下面的代码,
div1减少的长度=(900-700)/51=40
div2减少的长度=(900-700)/53=120
div3减少的长度=(900-700)/5*1=40
#box {
display: flex;
/*display: inline-block;*/
height: 500px;
width: 700px;
/*align-items: flex-end;*/
background-color: plum;
}
.div1{
width: 300px;
height: 200px;
flex-shrink: 1;
background-color: lightblue;
}
.div2{
width: 300px;
height: 200px;
flex-shrink: 3;
background-color: lightgreen;
}
.div3{
width: 300px;
height: 200px;
flex-shrink: 1;
background-color: lightsalmon;
}
如果flex-shrike的总和小于1,那么直接按比例相乘,不过很少用到。
.div1{
width: 300px;
height: 200px;
flex-shrink: .1;
background-color: lightblue;
}
.div2{
width: 300px;
height: 200px;
flex-shrink: .6;
background-color: lightgreen;
}
.div3{
width: 300px;
height: 200px;
flex-shrink: .2;
background-color: lightsalmon;
}
div1减少的长度=(900-700)*0.1=20
div2减少的长度=(900-700)*0.6=120
div3减少的长度=(900-700)*0.2=40
所以200-180=20,也就是会超出20px的空间,如下图所示。
flex-basis
约等于width,但是有区别,感觉没有什么实战意义。
flex
flex就是flex-shricks,flex-grow,flex-basis的和写。
没什么意思。
flex: 1,1,100px
https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfekgaf
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel下划线不显示怎么办
PHP中文网 06-23 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24 -
抖音国际版要用什么加速器能流畅刷Tiktok的加速器
TK小达人 08-02