Flex布局各属性笔记

原文教程:Flex布局教程 - 阮一峰

以下只是简要总结笔记

1.容器属性

display: flex;  // 设置为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         /* 子元素在容器中的交叉轴上对齐方式 */
    如果子元素有多行,且设置了align-content属性,align-content将覆盖align-items
    flex-start      // 与交叉轴的起点对齐
    flex-end        // 与交叉轴的末尾对齐
    center          // 在交叉轴方向居中
    baseline        // 与文字基线对齐
    stretch         // 如果子元素在交叉轴方向上未设置高度或宽度,则撑满交叉轴(默认)

align-content       /* 如果容器中有多行时,子元素的对齐方式 */
    如果子元素只有一行,该属性不起作用
    flex-start      // 与交叉轴的起点对齐
    flex-end        // 与交叉轴的末尾对齐
    center          // 在交叉轴方向上居中
    space-between   // 在交叉轴方向上两端对齐,两端不留空隙
    space-around    // 在交叉轴方向上两端对齐,两端留空隙
    stretch         // 在交叉轴方向上均分每一行,总体撑满交叉轴

2. 子元素属性

order           /* 子元素的排列顺序,数值越小,排列越靠前 */
flex-grow       /* 子元素分配多大的占比 */
flex-shrink     /* 空间不足时,是否自动缩小,0不,其他值要 */
flex-basis      /* 子元素以此值为基准,来计算最终所占空间,一般就设为auto */
flex            /* flex-grow、flex-shrink、flex-basis 的缩写 */
    auto: 1 1 auto; // 项目占1等分,自动缩小
    none: 0 0 auto; // 项目不占空间,不缩小,以width或其他值固定大小显示

align-self      /* 允许各别子元素在交叉轴上拥有单独的对齐方式 */
    auto        // 继承父级(默认)
    flex-start  // 与交叉轴的起点对齐
    flex-end    // 与交叉轴的末尾对齐
    center      // 在交叉轴方向上居中
    baseline    // 以文字基准线对齐
    stretch     // 撑满交叉轴
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页