当前位置:首页 > 网站技术 > 前端技术 > 正文内容

CSS Flex 盒布局教程

binadmin2020-06-23前端技术68

参考文章:A Visual Guide to CSS3 Flexbox PropertiesW3C CSS Flexible Box Layout Module LevelFlex 布局教程:语法篇

该Flexbox的布局正式名称css灵活包装盒布局模块css3中新的布局模块,旨在提高容器中的项目对齐,方向和顺序,即使它们的尺寸是动态的甚至是未知的。flex容器的主要特征是能够修改其子项的宽度或高度,以在不同的屏幕尺寸上以最佳方式填充可用空间。

许多设计人员和开发人员发现此flexbox布局更易于使用,因为元素的放置更简单,因此可以用更少的代码来实现更复杂的布局,从而简化开发过程。Flexbox布局算法基于方向,这与基于垂直和水平的块或行内布局不同。这种Flexbox布局应用于小型应用程序组件,而新的css网格布局模块 正在出现以处理大规模布局。

flex 兼容性查看请点此处 最新Flex兼容

基本上大多数浏览器都能兼容,苹果浏览器要使用前缀-webkit-

一、基本概念

flex布局由(称为flex容器)父容器及其直接子代(称为flex项目)组成

CSS3-Flexbox-Model.webp

flex容器有两条轴线:main axis 主轴 和cross axis 横轴,两条轴线互相垂直。

主轴有主轴尺寸(main dimension),横轴有横向尺寸(cross dimension 

主轴开始的位置为main start,结束的位置为main end

横轴开始的位置为cross start,结束的位置为cross end

主轴尺寸的宽度用main size表达,并且有主尺寸特性(main size propoerty

轴尺寸的高度用cross size表达,并且有横向尺寸特性(cross size propoerty

用法:

display:flex => 该值会导致元素在放置到流布局中时生成块级别的弹性容器框。
display:inline-flex => 该值使元素在放置到流布局中时生成内联级别的弹性容器框。

display:flex |inline-flex

注:float、clear、vertical-align、:frst-line 和: : first-letter 伪元素都不适用于flex布局


二、容器属性

容器属性取以下几个值

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content


2.1、flex-direction

设置弹性容器主轴的方向来指定弹性项目在弹性容器中的布局方式

.box{
   flex-direction: row | row-reverse | column | column-reverse
}

row(默认值):从左至右排列在一行

row-reverse:从右至左排列一行

column:从上至下排列在一列

column-reverse:从下至上排列在一列


如果容器属性没有设置宽度,row-reverse则会从最右边倒序排列 示例

QQ截图20200609135255.png


2.2、flex-wrap

flex-wrap属性控制flex容器是按单行还是多行布置其项目,以及新行的堆叠方向

.box{
   flex-wrap: nowrap | wrap | wrap-reverse
}

nowrap(默认值):项目显示在一行中,缩小宽度适应容器宽度(当项目总宽度大于容器宽度时,等比例缩小项目;当项目总宽度小于容器宽度时,项目宽度不变)

wrap:项目从左至右,从上至下。不改变项目宽度自动换行,自动拉伸容器高度。

wrap-recerse:项目从左至右,从下到上。不改变项目宽度自动换行,自动拉伸容器高度。

示例

QQ截图20200609140854.png

2.3、flex-flow

此属性是设置flex-direction和flex-wrap属性的简写。

默认值为row nowrap

.box{
   flex-flow: row nowrap;
}


2.4、justify-content

该justify-content属性使flex项目沿着flex容器当前行的主轴对齐。当一行上的所有伸缩项目都不灵活或已达到最大大小时,它有助于分配剩余的可用空间。

.box{
 justify-content:flex-start | flex-end | center| space-between| space-around
}

flex-start(默认值):项目在容器左端对齐

flex-end:项目在容器右侧对齐

center:项目在容器中心对齐

space-between:项目以相等的间距显示,第一个和最后一个弹性项目与弹性容器的边缘对齐

space-around:项目在每个弹性项目(甚至第一个和最后一个弹性项目)周围均以相等的间距显示

QQ截图20200609142544.png


2.5、align-items

伸缩项目可以在伸缩容器的当前行的横轴上对齐,类似于justify-content,但在垂直方向上。此属性为所有弹性项目(包括匿名项目)设置默认对齐方式。

.box{
 align-items:stretch | flex-start | flex-end | center| baseline
}

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。(如果设置了高度,和flex-start一样)

flex-start:横轴开始位置对齐

flex-end:横轴结束位置对齐

center:横轴中线对齐

baseline:项目里的第一行文本基准对齐

QQ截图20200609143836.png


2.6、align-content

align-content当横轴上有多余的空间时,此属性会在Flex容器内将Flex容器的线justify-content对齐,类似于在主轴内对齐单个项目的方式。

如果只有一根轴线,该属性无效果

.box{
  display: flex;
  flex-flow: row wrap;
 align-content: flex-start | flex-end | center | space-between | space-around | stretch
}

stretch(默认值):项目在容器上端对齐

flex-start:所有项目在容器上端对齐

flex-end:所有项目在容器底部侧对齐

center:所有项目在容器中线对齐

space-between:项目以相等的间距显示,第一个和最后一个弹性项目与弹性容器的边缘对齐

space-around:项目在每个项目(甚至第一个和最后一个弹性项目)周围均以相等的间距显示。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

QQ截图20200609151257.png


三、项目属性

3.1、order

order属性控制flex容器的子代出现在flex容器内的顺序。默认情况下,它们的顺序与最初在flex容器中添加的顺序相同。数值越小,排列越靠前。

默认值0

.item {
  order: <integer>;
}

3.2、flex-grow

flex-grow属性定义项目的放大比例。即如果存在剩余空间,也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有弹性项目的值flex-grow都与容器中所有项目的大小相同,则 第二个弹性项目相对于其他弹性项目的大小占用更多空间

3.3、flex-shrink

.item {
  -webkit-flex-shrink: ; /_ Safari _/
  flex-shrink:         ;
}

默认情况下,所有伸缩项目都可以缩小,但是如果我们将其设置为0 (请勿收缩),它们将保持原始大小

默认值: 1

注意:负数无效。

例子:

.section-nine-1{display: flex;}
.section-nine-1 span{width:300px;}
.section-nine-1>span:first-child{flex-shrink:2;}
.section-nine-1>span:nth-child(2){flex-shrink:3;}
.section-nine-1>span:nth-child(4){flex-shrink:4;}
.section-nine-1>span:nth-child(5){flex-shrink:2;}


实例解析:

flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中显式定义了
.section-nine-1>span:first-child==>flex-shrink: 2;
.section-nine-1>span:nth-child(2)==>flex-shrink:3
.section-nine-1>span:nth-child(4)==>flex-shrink:4
.section-nine-1>span:nth-child(5)==>flex-shrink:5

隐式定义.section-nine-1>span:nth-child(3)==>flex-shrink:1

所以计算出来总共将剩余空间分成了 12 份,即2:3:1:4:2

我们可以看到父容器继承宽度为 1200px,子项被定义为 300px,子项相加之后即为 1500 px,超出父容器 300px。

那么超出的 300px 需要被 五个盒子消化通过收缩因子,所以加权综合可得 300*2+300*3+300*1+300*4+300*5=3600px。

于是我们可以计算 五个盒子 将被移除的溢出量是多少:

1 被移除溢出量:(300*2/3600)*300,即等于50px

2 被移除溢出量:(300*3/3600)*300,即等于75px

3 被移除溢出量:(300*1/3600)*300,即等于25px

4 被移除溢出量:(300*4/3600)*300,即等于100px

5 被移除溢出量:(300*2/3600)*300,即等于50px

最后1、2、3、4、5的实际宽度分别为:300-50=250px, 300-75=225px, 300-25=275px, 300-100=200px,300-50=250px,此外,这个宽度是包含边框的。



3.4、flex-basis

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。


3.5、flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

3.6 align-self

此align-self属性允许align-items为单个弹性项目覆盖默认对齐方式(或由指定的对齐方式)

可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}


标签: css
分享给朋友:

相关文章

使用rem做手机端网页自适应

使用rem做手机端网页自适应

利用原生js做手机端网页自适应解决方案rem布局刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图function getRem(pwidth,...

浏览器缓存机制

浏览器缓存机制

浏览器缓存机制本文地址: https://www.laruence.com/2010/03/05/1332.htmlCache-ControlCache-Control 是最重要的规则。这个...

前端入门html、css、js知识汇总(1)

前端入门html、css、js知识汇总(1)

注:本文适合需要一点前端知识,如有不懂自行百度或去W3C官网、去菜鸟教程查询1.html不需要编译,直接由浏览器执行   html文件时一个文本文件   h...

计算机编码规范之ASCII码

计算机编码规范之ASCII码

Bin(二进制)Oct(八进制)Dec(十进制)Hex(十六进制)缩写/字符解释0000 00000000x00NUL(null)空字符0000 00010110x01SOH(start of hea...

手机端分享调用功能的实现(只能在真机上测试有效)

手机端分享调用功能的实现(只能在真机上测试有效)

html: <a href="javascript:void(0);" onclick="call('default')"> <...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信