Flex Box 概念梳理
发布在前端大锅饭2018年11月8日view:295HTML5css3前端开发ReactVue.js前端的畅想vue前端工程web
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Flex Box

Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。

之所以说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另外一个二维布局CSS Grid Layout,可以同时处理行和列上的布局。

采用 Flex 布局的元素,称为 Flex 容器(flex container),容器里的子元素称为项目(item)。

1.容器

  • #### 概念

从容器的角度来看,有两个不变的轴,主轴由 flex-direction 定义,另一根轴垂直于它。默认定义是:

​ 1) 从左往右的主轴 (main axis),主轴开始位置称为 main start ,结束位置称为 main end

​ 2) 从上到下的交叉轴 (cross axis),交叉轴开始位置称为 cross start ,结束位置称为 cross end

  • 相关属性

    • flex-direction:定义了主轴方向。决定容器内项目排列方向,默认从左到右 row 。 column 表示容器内项目沿着主轴排列, reverse 表示沿着交叉轴排列。
        flex-direction:row | row-reverse | column | column-reverse

特别注意:flex-direction设置后会引起项目排列方向改变。

  • flex-wrap:决定容器主轴方向上项目是否换行,默认不换行 nowrap 。 reverse 表示反向。
    flex-wrap: nowrap | wrap | wrap-reverse;

  • flex-flow:是 flex-direction 和 flex-wrap 属性的简写。默认为: row nowrap 。
    flex-flow: <flex-direction> || <flex-wrap>;
  • justify-content:决定容器内项目 在主轴上 对齐方式。默认左对齐 flex-start 。
    justify-content: flex-start | flex-end | center | space-between | space-around;
    /**
    * flex-start(默认值):左对齐。项目堆放在容器主轴开始位置(main start);
    * flex-end:右对齐。项目堆放在容器主轴结束位置(main end);
    * center: 居中。项目沿着主轴居中排列;
    * space-between:两端对齐,项目之间的间隔都相等。
    * space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    **/
 ```

![](http://upload-images.jianshu.io/upload_images/13661853-b18403bcca139158.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



*   align-items:决定容器内项目 **在交叉轴上** 对齐方式。默认为 `stretch` 。
align-items: flex-start | flex-end | center | baseline | stretch;
/**
* flex-start:交叉轴的起点对齐。
* flex-end:交叉轴的终点对齐。
* center:交叉轴的中点对齐。
* baseline: 项目的第一行文字的基线对齐。
* stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
**/

![](http://upload-images.jianshu.io/upload_images/13661853-26be81410a8bb831.png!web?imageMogr2/auto-orientstrip%7CimageView2/2/w/1240)


![](http://upload-images.jianshu.io/upload_images/13661853-b38a891ed93e8c4d.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![](http://upload-images.jianshu.io/upload_images/13661853-8431a815b737d526.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


*   align-content:决定容器内项目 **在交叉轴上** 内容与剩余空间对齐方式。默认为 `stretch` 。

    特别注意:该属性只对设置了`flex-wrap:wrap`的容器生效,并且容器里的元素构成了多行。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/**
* flex-start:与交叉轴的起点对齐。
* flex-end:与交叉轴的终点对齐。
* center:与交叉轴的中点对齐。
* space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
* space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
* stretch(默认值):轴线占满整个交叉轴。
**/

## 2.项目

*   #### 概念

    项目默认沿主轴排列。单个项目占据的主轴空间叫做 `main size` ,占据的交叉轴空间叫做 `cross size` 。

*   #### 相关属性

    *   order:定义项目在容器 **主轴方向上的** 排列顺序,数值越小排列越靠前。默认为 0 。
    order: <integer>;
![](http://upload-images.jianshu.io/upload_images/13661853-ca34c9d6bac57088.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


*   flex-grow:定义项目的放大比例,默认为 0 ,即便容器存在剩余空间,也不放大。不允许负值。
flex-grow: <number>; /* default 0 */
/**
* 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
* 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
**/

![](http://upload-images.jianshu.io/upload_images/13661853-ce0382264ed337aa.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


*   flex-shrink:定义项目在容器空间不足时的缩小比例,默认为1,即容器空间不足时该项目要缩小,并且项目内容会换行。不允许负值。
flex-shrink: <number>; /* default 1 */
/**
* 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
* 如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
**/

![](http://upload-images.jianshu.io/upload_images/13661853-99fb14e8c76e9669.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![](http://upload-images.jianshu.io/upload_images/13661853-f268fc3324b43d25.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


*   flex-basis:可以理解成设置项目默认大小。定义项目分配多余空间之前, **在主轴上** 占据的空间。默认为auto,即项目内容大小。
flex-basis: <length> | auto; /* default auto */
如果容器内所有项目大小总和超过容器,不设置 wrap 的情况下会溢出容器:

![](http://upload-images.jianshu.io/upload_images/13661853-ba02f3439aca3c3b.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



*   flex:是 `flex-grow` , `flex-shrink` 和 `flex-basis` 的简写,默认值为 `0 1 auto` 。后两个属性可选。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

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

*   align-self:用于设置单个项目 **在交叉轴上** 对齐方式,可覆盖容器的 `align-items` 属性,默认为 `auto` 。如果值为 `auto` ,则计算值为父元素的 'align-items ' 值,否则为指定值。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

“‘

评论
发表评论
暂无评论
WRITTEN BY
__小宸__
前端全栈开发工程师 分享一些心得与技术给大家,希望能对大家有所帮助。 欢迎加入前端开发学习交流群:943129070 大家可以一起交流学习
TA的新浪微博
PUBLISHED IN
前端大锅饭

平台每天更新最实用,最新颖的网页设计、网站制作技巧精品文章,分享html+css、JavaScript、jQuery,ps等直播课录像,国内知名设计师亲授!无论你身在何处,和大家一起来利用零碎的时间学习知识,涨见识、涨工资吧!

我的收藏