Flex 伸缩盒布局

Flex 伸缩盒布局

flex布局的属性

容器属性
  • flex-flow
  • flex-direction
  • flex-wrap
  • justify-content
  • align-item
  • align-content
元素属性
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

flex 弹性盒模型

采用flex布局的元素,称为flex容器,它的所有子元素自动成为容器成员,称为flex项目。

对某个元素声明display:flex;那么这个元素就成为了弹性容器,具有flex弹性布局的特性。

  1. 每个弹性容器都有两根轴:主轴和交叉轴,两轴之间成90度关系。注意:水平的不一定就是主轴。
  2. 每根轴都有起点和终点,这对于元素的对齐非常重要。
  3. 弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列
  4. 弹性元素也可以通过display:flex设置为另一个弹性容器,形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素

弹性容器的两根轴非常重要,所有属性都是作用于轴的。

  • flex-direction

    取值:row(默认) | row-reserve | colume | colume-reserve

    用于控制项目的排列方向与顺序

  • flex-wrap

    取值:nowrap(默认) | wrap | wrap-reverse

    用于控制项目是否换行、换行顺序

  • flex-flow

    flex-direction 和 flex-wrap 的简写形式,写法例如

    flex-flow: row nowrap(默认);

  • justify-content

    取值:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly

    用于控制项目在主轴上的对齐方式,分别为左对齐,右对齐,居中,两端对齐,间隔相等,项目之间间隔相等。

  • align-item

    取值:flex-strat | flex-end | center | baseline | stretch(默认)

    用于控制项目在交叉轴排列方式,默认stretch即如果项目没有设置宽度则占满整个容器

    baseline比较特殊,它让项目以第一行文字的基线为参照进行排列

  • align-content

    取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)

    用于控制多行项目的对齐方式,如果项目只有一行则不起作用。需要设置flex-wrap: wrap;默认stretch,即在项目没有设置高度,或高度为auto的情况下,让项目整个填满容器,与align-items类似。

项目属性

容器属性是加在父容器上的,那么项目属性就是加在项目上的,就好比容器属性设置给ul,

而项目属性设置给li一般。

  • order

    取值: 默认是0,用于决定项目的排列顺序,数值越小,排列越靠前

    .项目{

    ​ order:1

    }

  • flex-grow

    取值:默认是0,用于决定项目在剩余空间的情况下是否放大,默认不放大;注意,即使设置了固定宽度,也会放大。

    如果某个项目设置了flex-grow:1;而其它项目属性为0,则该项目会占满剩余空间。

  • flex-shrink

    取值:默认是1,用于决定项目在空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即便设置了固定宽度,也会缩小。

    但是某个项目设置了flex-shrink 设置为0,则即便空间不足,自身也不缩小。

  • flex-basis

    取值:默认为auto,用于设置项目的宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会比width属性高,因此会覆盖width属性。

  • flex

    取值:默认为 0 1 auto ,flex属性是flex-grow,flex-shrink,flex-basis的简写,用于将项目放大,缩小与是否定宽。

    该属性有两个快捷键值,分别是auto(1 1 auto) 等分方法缩小,与none(0 0 auto) 不放大不缩小。

    还有最常用的flex:1 === flex:1 1 0px;

  • flex-self

    取值:auto(默认) | flex-start | flex-end | center | baseline | stretch ,表示继承父容器的align-item属性。如果没有父元素,则默认stretch。

    用于让个别项目拥有与其它项目不同的对齐方式,各值的表现与父容器的align-item属性完全一致。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值