Flex布局
博客专区 > 一诺_ 的博客 > 博客详情
Flex布局
一诺_ 发表于11个月前
Flex布局
  • 发表于 11个月前
  • 阅读 18
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

Flex布局

容器属性

  1. 父元素首先设置 display:flex

  2. flex-direction: row(默认) | row-reverse | colum | colum-reverse

    该属性指定了Flex的项目怎样在flex容器中排列,设置flex容器的主轴方向,它们(项目)两个主要的方向排列,就像一行一样水平排列或者像一列一样垂直排列。

  3. flex-wrap: nowrap(默认值) | wrap | wrap-reverse

    初始情况下,Flexbox的理念是所有的项目都排列在一条线上(轴线),flex-wrap 属性控制容器是否将它的项目排列在一行或者多行,并且控制新行堆叠的方向。

  4. flex-flow: row nowrap

    该属性是上面两个属性的简写方式,前一个参数设置flex-direction,后一个参数设置flex-wrap

  5. justify-content: flex-start(默认值) | flex-end | center | space-between | space-around

    定义了项目在容器主轴上的对齐方式,当的容器中项目都是一行并且非弹性的时候或者项目是弹性的但是达到了它们的最小宽度的时候该属性可以定义容器中的剩余空间的分配。

  6. align-items: stretch(默认值) | flex-start | flex-end | center | baseline

    定义项目在交叉轴上的对齐方式,交叉轴与当前的轴线有关系,与justify-content很相似,只不过是垂直方向的;这属性为所有的项目设置默认的交叉轴上的对齐方式,包括匿名的。

  7. align-content: stretch(默认值) | flex-start | flex-end | center | space-between | space-around

    当交叉轴上还有多余的空间时它定了多行的对齐方式,类似justify-content在主轴上对齐所有项目的方式一样。

子元素属性

  1. order: number

    该属性可以很简单的控制项目的顺序,而不用在HTML代码里面做调整。这个整形值可以为负数,默认值是 0。

  2. flex-grow: number || 0

    该属性指定项目的生长因素,它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。

  3. flex-shrink: number || 1

    该属性指定了项目的收缩因素,它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

  4. flex-basis: 100px || auto (不懂 )

    该属性的值和width和height的取值一样,在 flex factors分配剩余空间之前指定项目的初始的大小

  5. flex:

    该属性是flex-grow, flex-shrink 和flex-basis的缩写形式,同时属性值也有简写:auto表示(1,1,auto),none表示(0,0,auto) 注意: W3C鼓励使用flex的简写形式,因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。

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

    该属性和容器的align-items属性有同样的作用,它是用在单一的项目上的,可以完全压倒容器中align-items定义的对齐方式。

    注意:auto 表示项目会使用父元素(容器)的align-items的值,如果该项目没有父元素的话align-self的值是stretch。

flex items值得注意的是:float、clear、vertical-align这些属性对于项目(flex item)会失效

标签: CSS Designer
共有 人打赏支持
粉丝 0
博文 3
码字总数 5963
×
一诺_
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: