CSS3(八) CSS3 FLEX布局

CSS3

发布日期: 2020-05-03

更新日期: 2020-05-24

文章字数: 1.8k

阅读时长: 7 分

阅读次数:

Flex 布局

布局的传统方案是基于盒模型,依赖 display 属性+float 属性+position 属性.但是对于那些特殊布局非常不方便,比如垂直居中就不容易实现.

于是在 2009 提出来了弹性盒模型就是 display:box;然后在 2012 年在此基础上又升级了一套新标准就是：Flex 我相信 Flex 布局将会成为未来布局的首选方案

(一)Flex 布局基本概念

1.前提

使用 Flex 布局必须遵循一个前提就是父元素必须加上 display:flex;设为 Flex 布局以后,子元素的float,clear,和vertical-align属性讲全部失效 ####2.容器与项目

父元素设置为 Flex 容器后,我们称为 Flex 容器,简称”容器”。
他的所有子元素自动成为容器成员，称为 Flex 项目。简称”项目”
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

2.容器的属性

容器的属性有 6 大类，但是可以合并为 3 类

flex-direction:决定主轴的方向（项目排列的方向）

flex-wrap:超出后是否换行

flex-flow:就是上两个的综合,速记

justify-content:项目在主轴的横轴对齐方式

align-items:项目在主轴的纵轴对齐方式

align-content:需要和 flex-wrap 一起使用。他表示超出后形成的 2 行在纵轴对齐方式

3.1flex-direction:决定主轴的方向即项目排列的反向

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

row(默认值):主轴为水平方向,起点在左端.

row-reverse:主轴为水平方向,起点在右端

column:主轴为垂直方向,起点在上端

column-reverse:主轴为垂直方向,起点在下端

3.2 flex-wrap 属性.超出一行后,是否换行

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

nowrap(默认):不换行

wrap:换行,第一行在上方

wrap-reverse:最后一行在上方，第一行在最下方

3.3 flex-flow 属性是上面的 flex-direction 和 flex-wrap 的属性的简写方式,默认值就是 row nowrap

.box{flex-flow:<flex-direction>||<flex-wrap>}

3.4 justify-content 定义了项目在主轴横轴的对齐方式

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

flex-start:(默认值)左端对齐

flex-end:右端对齐

center:居中

space-between:两端对齐,项目之间的间隔都相等

space-around:每个项目的间隔都相等,项目之间的间隔比项目与边框的间隔大一倍
具体见下图:

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

flex-start: 顶端对齐

flex-end:尾端对齐

center:居中对齐

stretch:(默认)如果项目没有设置高度，那么将沾满整个容器的高度

baseline:项目第一行的文字的基线对齐

3.6 align-content 定义了多行对齐的方式，如果项目只有一行，则该属性不会起作用

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

4.项目

order:自定义项目的顺序

flex-grow:默认是 0 关闭。后面接数字表示横轴分了多少份

flex-shrink:默认是 1.允许缩放。后面接数字。表示横轴缩小了多少份。

flex-basis:表示项目基础值

flex: grow 值 shrink 值 basis 基础值。(速记版本)

align-self:只单个项目的纵轴。不影响其他项目

4.1 order 属性定义了项目的排列顺序，数值越小,排名越靠前默认是 0，要是值一样则看 HTMLDOM 顺序

li{order:4;}

4.2 flex-grow 可以理解为项目占得份数或者放大比例,如果存在剩余空间。也不放大

.box{flex-grow:<number>||默认是0}

如果所有的项目 flex 属性都是 1，那么他们将等分剩余空间。如果一个项目的 flex-grow 属性为 2.其他项目都是 1，则前者占据的剩余空间比其他项目多一倍。

.box{flex-shrink:<number>||默认是1}

如果项目的 flex-shrink 属性都为 1，当空间不足的时候，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都是 1，则空间不足，前者不缩小.

.box{flex-basis:100px||百分比||em||rem||auto默认就是auto}

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

.box{flex:none|[flex-grow] [flex-shrink] [flex-basis]}

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

4.6 align-self 允许单个项目与其他项目不一样的对齐方式，可覆盖

.box{align-self: auto | flex-start | flex-end | center | baseline | stretch;}
auto:他会遵循父元素

总结

简单来说父元素有 4 个属性

flex-flow
justify-content
align-items
align-content
子元素有 3 个属性:
order
flex
align-self

到此 Flex 布局全部结束。

下面这些属于题外话了主要就是弄清楚 FLEX 的宽度是怎么计算的
举个例子
有 3 个 FLEX 项目对应的数值是 flex: 3 1 200px; flex: 2 2 300px;flex: 1 3 600px;

    现在有2种情况
    [当他们的父元素是1000px的时候这个时候你会发现项目元素的总宽度大于了1000px]() 因为200+300+600=1100>1000超出了100PX
    那么他用到的就是shrink
    他先获取压缩总的数据 1*200+2*300+3*600 = 2600
    1*200/2600*100=7.6px; 再用基准值200-7.6=192.4就是项目1实际的宽度
    2*300px/2600*100 = 23px ; 再用基准值300-23 = 277px 就是项目2的实际宽度
    3*600/2600*100 = 69px; 再用基准值600-69 = 531px 就是项目3的实际宽度
    [第二种情况要是他们的父元素是1200px,也就是子元素的所有基准值加在一起小于父元素的宽度]()
     200+300+600 = 1100<1200 实际宽度比总和小100PX
    这个时候看的就是flex-grow了  3+2+1=6 相当于他分了6份了
    项目一的宽度就是 100/6*3 =50 然后再用项目一的基准值+50 = 200+50 = 250
    项目二的宽度就是 100/6*2 = 33再利用项目二的基准值+33 = 300+33 = 333
    项目三的宽度就是100/6*1 = 16.6 再利用项目三的基准值+16.6 = 600+16.6 = 617px