css flex布局

￡神魔★判官ぃ 2022-11-21 09:29 398阅读 0赞

  1. 容器（container）属性









































    属性 说明 可能取的值(第一个值为默认值)
    flex-direction 规定主轴方向 row | row-reverse | column | column-reverse
    flex-wrap 规定item超过一行时如何换行 nowrap | wrap | wrap-reverse
    flex-flow flex-flow: <flex-direction> || <flex-wrap> 默认row nowrap
    justify-content 规定item在主轴上如何对齐 flex-start | flex-end | center | space-between | space-around
    align-items 规定item在交叉轴上如何对齐 stretch | baseline | flex-start | flex-end | center
    align-content 规定多根交叉轴的对齐方式 stretch | flex-start | flex-end | center | space-between | space-around |

  2. 项目（item）属性









































    属性 说明 可能取的值(第一个值为默认值)
    order 定义item在主轴上的排列顺序（越小越靠前） 0 | <integer>
    flex-grow 定义item的放大比例（与其他设置了该属性的item比较） 0(如果存在空间也不放大) | <integer>
    flex-shrink 定义item的缩小比例（与其他设置了该属性的item比较） 1(如果空间不够item将缩小) | <integer>
    flex-basis 放缩前item占据主轴多少空间（根据这个计算剩余多少空间用于放缩） auto(本来大小) | <integer>
    flex flex: none | auto | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ] 0 1 auto | none(0 0 auto) | auto(1 1 auto) | …
    align-self 为单个项目设置交叉轴的对齐方式，并覆盖父元素的align-items auto(继承父元素align-items) | stretch | baseline | flex-start | flex-end | center

阮一峰Flex

发表评论

表情：
评论列表 （有 0 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS3--Flex布局

    Flex布局 CSS2传统的盒模型采用float – position布局方式。【PC端】 CSS3的弹性盒模型采用Flex布局方式。【移动端、响应式Bootst...

    r囧r小猫r囧r小猫/ 0 赞/ 160 阅读

    相关 CSS-Flex布局

    01-标准流 标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。 ![\[外链图片转存失败,源站可能有防盗链机制,建议

    小鱼儿小鱼儿/ 0 赞/ 86 阅读

    相关 CSS - 弹性布局（flex）

    目录 传统布局的不足之处：导航栏实现案例说明问题 关于单个、一行多个浮动元素的水平居中实现 弹性布局 弹性容器的主轴和侧轴概念 弹性容器的主轴对齐&侧轴对齐（一维布局

    傷城~傷城~/ 0 赞/ 67 阅读

    相关 CSS中flex布局

    flex布局，也称为弹性盒子布局，这是一种简单而强大的布局方式，我们通过弹性盒指明控件的分布方式、内容的对齐方式和元素的排布顺序，把不同的组件放置在页面中，内容可以轻易的横向或

    忘是亡心i忘是亡心i/ 0 赞/ 56 阅读

    相关 css3-flex布局

    第1章 flex布局 Flex布局（伸缩布局盒模型）是CSS3提出的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。 任何一个容器都可以指定为F

    电玩女神电玩女神/ 0 赞/ 355 阅读

    相关 CSS-flex布局

    参考博文：[阮一峰][Link 1] Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。 开启开启伸缩盒模display: fle

    桃扇骨桃扇骨/ 0 赞/ 322 阅读