Weex布局Flex的使用——Weex的学习之路（十）

2019-07-05 本文已影响59人安卓搬砖小曾

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'> ]
    }


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

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

Weex布局Flex的使用——Weex的学习之路（十）

项目属性：`Flex`项目有6个可用属性

猜你喜欢

热点阅读

Weex布局Flex的使用——Weex的学习之路（十）

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

猜你喜欢

热点阅读

项目属性：`Flex`项目有6个可用属性