CSS进阶系列一(flex布局基础知识——介绍、规范、主要思想、专业术语)

  • • 发表于 3年前
  • • 作者 茂茂
  • • 2462 人浏览
  • • 9 条评论
  • • 最后编辑时间 3年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

一、介绍

flex是flexible box的缩写,意为弹性布局。flexible box是CSS3新增加的,用来为盒模型提供最大的灵活性。
  1. flex旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。
  2. flex的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

二、规范

  1. flex布局由于历史原因,分成旧版本(display: box;),混合版本(display: flexbox;),新版本(display: flex;)
     2009年7月 工作草案 (display: box;)
     2011年3月 工作草案 (display: flexbox;)
     2011年11月 工作草案 (display: flexbox;)
     2012年3月 工作草案 (display: flexbox;)
     2012年6月 工作草案 (display: flex;)
     2012年9月 候选推荐 (display: flex;)
    
     后续讲解均用新版本——display: flex;
    

三、主要思想

因为flex布局是一个模块,而不是一个单一的属性,所以涉及很多东西。其中有一些是容器上的属性(父元素,也被称为“flex容器”),而有一些是容器子元素上的属性(常称为“flex项目”)

下面用一张图来解释其主要思想

基本上,Flex项目是沿着main axis(从main-startmain-end)或者cross axis(从cross-startcross-end)排列。

  1. main axis:Flex容器的主轴主要用来配置Flex项目。注意,它不一定是水平,这主要取决于flex-direction属性。

  2. main-start | main-end:Flex项目的配置从容器的主轴起点边开始,往主轴终点边结束。

  3. main size:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度,Flex项目的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。

  4. cross axis:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。

  5. cross-start | cross-end:伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。

  6. cross size:Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度,Flex项目的侧轴长度属性是width或height属性,由哪一个对着侧轴方向决定。


四、专业术语

flex容器属性

1.伸缩容器display:定义一个Flex容器,根据其取的值来决定是内联元素inline-flex还是块级元素flex

.display {
        display: flex;                //块级元素
        display: inline-flex;                        //内联元素
    }

2.伸缩流方向flex-direction:定义Flex项目在Flex容器中排列的方向。

.flex-direction {
        flex-direction: row;                //(默认值)从左向右排列(书写方式以left、center、right标准),即水平方向
        flex-direction: row-reverse;        //从右向左排列(书写方式以left、center、right标准),即反向水平
        flex-direction: column;                //从上到下排列,即垂直方向
        flex-direction: column-reverse;        //从下向上排列,即反向垂直
    }

3.伸缩换行flex-wrap:规定伸缩项目是否沿着侧轴排列

.flex-wrap {
        flex-wrap: nowrap;                //(默认值)单行显示,即不换行
        flex-wrap: wrap;                //多行显示(书写方式以left、center、right标准),即内联元
        flex-wrap: wrap-reverse;        //反向多行显示(书写方式以left、center、right标准),即反转换行
    }

4.伸缩流方向和换行flex-flow:是flex-directionflex-wrap两个属性的缩写

.flex-flow {
        flex-flow: row nowrap;            //(默认值)中间用空格隔开
    }

5.主轴对齐justify-content:控制flex容器内项的水平对齐方式

.justify-content {
        justify-content: flex-start;        //(默认值)伸缩项目向一行的起始位置靠齐
        justify-content: flex-end;            //伸缩项目向一行的结束位置靠齐
        justify-content: center;            //伸缩项目向一行的中间位置靠齐(如果剩余空间是负数,则保持两端溢出的长度相等)
        justify-content: space-between;        //伸缩项目会平均地分布在行里
        justify-content: space-around;        //伸缩项目会平均地分布在行里,两端保留一半的空间
    }

6.侧轴对齐align-items:控制flex容器内项的垂直对齐方式

.align-items {
        align-items: flex-start;        //伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边
        align-items: flex-end;            //伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边
        align-items: center;            //伸缩项目的外边距盒在该行的侧轴上居中放置。(如果伸缩行的尺寸小于伸缩项目,则伸缩项目会向两个方向溢出相同的量)
        align-items: baseline;            //如果伸缩项目的行内轴与侧轴为同一条,则该值和flex-start等效
        align-items: stretch;            //(默认值)如果侧轴长度属性的值为auto,则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
    }

7.堆栈伸缩行align-content:当伸缩容器的侧轴还有多余空间时,用来调准伸缩行在伸缩容器里的对齐方式

.align-content {
        align-content: flex-start;        //各行向伸缩容器的起点位置堆叠
        align-content: flex-end;        //各行向伸缩容器的结束位置堆叠
        align-content: center;            //各行向伸缩容器的中间位置堆叠
        align-content: space-between;    //各行在伸缩容器中平均分布
        align-content: space-around;    //各行在伸缩容器中平均分布,在两边各有一半的空间
        align-content: stretch;            //(默认值)各行将会伸展以占用剩余的空间
    }
//次属性在伸缩项目有多行时才会生效

flex项目属性

8.order:控制Flex项目的顺序源
根据order重新排序伸缩项目。有最小(负值最大)order的伸缩项目排在第一个。若有多个项目有相同的order值,这些项目照文件顺序排。

.order {
        order: <number>;        //默认按文档源的流顺序排列
    }

9.伸缩性flex:是flex-grow扩展比例,flex-shrink收缩比例和flex-basis伸缩基准值三个属性的缩写(flex-shrinkflex-basis是可选值)

`flex-grow`:扩展比例

`flex-shrink`:收缩比例

`flex-basis`:伸缩基准值
.flex {
        flex-grow: <number>(默认值是0);
        flex-shrink: <number>(默认值是1);
        flex-basis: <length>(默认值是auto);
    }
/*缩写   常用值*/
.flex{
        flex:none    //等于flex-grow:0;flex-shrink:0;flex-basis:auto;
        flex:auto    //等于flex-grow:1;flex-shrink:1;flex-basis:auto;
        flex:0 auto    //等于flex-grow:0;flex-shrink:1;flex-basis:auto;(初始值)
        flex:initial    //等于flex-grow:0;flex-shrink:1;flex-basis:auto;(初始值)
}

注意:floatclearvertical-align属性在Flex项目中无效

(部分信息借鉴于《图截CSS3——核心技术与案例实战》不得不说这是本好书,茂茂就是看这个学的)
欢迎各位打赏点赞哦!!!我会更加努力的!!!
分享到:
评论区(共9条评论)
9条评论
Ctrl+Enter
作者

茂茂

茂茂

APP:2 帖子:16 回复:198 积分:13465

已加入社区[1190]天

啦啦啦

作者详情》
Top