弹性盒布局 flex项目属性介绍

1. order  设置 flex 项目的排列顺序，值越小越靠前

2. align-self  设置某个 felx 项目不同于其他 flex 项目的交叉轴对齐方式

    语法:

align-self: flex-start | flex-end | center | baseline | stretch;

3. flex-grow  设置 flex 项目的放大比例

    语法:

flex-grow： 0;

    默认值为0，即使存在剩余空间，也不放大;

    当值为1是，flex项目等比例放大。

4. flex-shrink  设置 flex 项目缩小比例

    语法:

flex-shrink: 1;

    默认值为1，当flex容器空间不足时，flex项目将会等比例缩小;

    当值为0时，即使flex容器空间不足，flex项目也不会缩小。

5. flex-basis  再分配剩余空间之前，设置flex项目占据主轴的空间

    语法:

flex-basis: auto;

    auto 为默认值

6. flex是 flex-grow，flex-shrink，flex-basis 的简写方式

    默认值为   flex: 0 1 auto;

    注: flex: 1; 的应用

        ① 等比例分配空间

        ② 分配剩余空间

    注: flex: 1; 等价于 flex: 1 1 0%;

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓