Flex是Flexible Box的缩写,意为弹性布局,用来为盒子模型提供最大的灵活性、任何一个容器都可以指定为Flex布局。本篇博客全面的讲解了Flex布局的属性,快速入门Flex布局,那么接下来我们谈谈CSS Flexbox弹性布局。

首先要有个容器,并设置display:flex;display:-webkit-flex;该容器有以下六个属性:

flex-direction (元素排列方向)
    row, row-reverse, column, column-reverse
flex-wrap (换行)
    nowrap, wrap, wrap-reverse
flex-flow (以上两者的简写)
    flex-direction || flex-wrap
justify-content (水平对齐方式)
    flex-start, flex-end, center, space-between, space-around
align-items (垂直对齐方式)
    stretch, flex-start, flex-end, center, baseline
align-content (多行垂直对齐方式)
    stretch, flex-start, flex-end, center, space-between, space-around

项目的属性:

order 排列顺序,数值,默认0
    "integer"
flex-grow 如图示7,定义放大比例,默认0,即如果存在剩余空间,也不放大。
    "number"
flex-shrink 如图示8,定义缩小比例,默认1,如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
    "number"
flex-basis 定义项目占据的主轴空间,默认auto。会根据flex-direction定义的主轴(水平或者垂直),定义项目本来的大小,跟width或者height一样。
flex 推荐,以上三个的缩写,默认 0 1 auto
    "flex-grow" "flex-shrink" "flex-basis"
align-self 如图示9,单个项目有与其他项目不一样的对齐方式,可覆盖align-items
    "auto","flex-start","flex-end","center","baseline","stretch" 

1.flex-direction

row (从左往右)默认
row-reverse (从右往左)
column (从上往下)
column-reverse (从下往上)

2.flex-wrap

nowrap (不换行)默认
wrap (换行,且往下一行换)
wrap-reverse (换行,且往上一行换)

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

3.flex-flow,是flex-direction和flex-wrap的简写形式

flex-flow:<flex-direction> || <flex-wrap>;

4.justify-content

flex-start
flex-end
center
space-between
space-around

5.align-items

stretch 默认
flex-start
flex-end
center
baseline 项目第一行文字的基准线对齐

6.align-content

stretch 默认
flex-start
flex-end
center
space-between
space-around

项目属性:Flex项目有6个可用属性

1. order
定义项目的排列顺序。数值越小,排列越靠前,默认为0:order: <integer>;


    .item {
      order: <integer>;
    }


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


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


3. flex-shrink
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小: flex-shrink: <number>;
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对概述行无效。


    .item {
      flex-shrink: <number>; /* default 1 */
    }


4. flex-basis
定义了在分配多余空间之前,项目占据的主轴空间(main size): flex-basis: <length>;
浏览器根据这个属性,计算主轴是否有多余空间。
它的默认值为auto,即项目的本来大小。
可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。


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


5. flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,后两个属性可选: flex: none | <> | <>;
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。


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


6. align-self
允许单个项目有与其他项目不同的对齐方式: align-self: auto | flex-start | flex-end | center | baseline | stretch;
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。


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

以上就是Flex布局的详细介绍,本编博客参考了阮一峰的博客

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐