美文网首页
伸缩布局

伸缩布局

作者: 白屏 | 来源:发表于2018-03-02 09:10 被阅读31次
  • display: flex (父盒子设置为弹性布局)

  • flex-direction: column (调整主轴方向)

  • justify-content: space-around(调整主轴方向上每个item的排列方式)

  • align-items

    • 调整侧轴方向上单独行中item的对齐方式,是跟justify-content相对应的属性
    • strech为自动拉伸,这种情况下必须子元素没有设置高度,会根据父元素高度拉伸)
  • flex-wrap (是否需要换行,如果不需要换行,一旦超出父元素,子元素的宽会被忽略,根据情况自动调整变小)

  • align-content(==多行的情况下才起作用==,也就是必须设置成可换行==flex-wrap: wrap==,用于调整列与列之间的间距)

  • align-self (设置在子元素上,用于脱离父元素align-items的控制,可以单独设置某个子元素的排列方式)

  • flex (设置子元素的分配比例,待分配的子元素是未设置宽度的,分配的大小是父盒子减去padding、固定宽度子元素后,剩下的部分给未设置宽度的子元素自动分配)

  • order (值越大的,排在越后面)

相关文章

  • 17-CSS伸缩布局

    伸缩布局 如何使用伸缩布局?只需要给元素设置 display: flex;属性 伸缩布局分类伸缩容器: 给哪个元素...

  • CSS伸缩布局

    伸缩布局(弹性布局) display:flex 给谁添加了display:flex,谁就是伸缩容器 伸缩容器中的盒...

  • 移动WEB flex 布局

    一、简介 又名伸缩布局、弹性布局、伸缩盒布局、 更适用于移动端 布局原理,添加display: flex; 父盒设...

  • 第10章 布局样式相关-伸缩布局(Flexible Box)

    伸缩布局(一) CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box)...

  • day06-css3-demo

    伸缩布局demo:

  • CSS3之Flexbox布局在ReactNative的应用

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,被成为弹性布局(或者伸缩布局)。相比...

  • flexbox

    flexbox flexbox布局是伸缩容器(container)和伸缩项目组成(item)布局的主题思想是元素可...

  • 伸缩布局

    flex Container 伸缩容器(外层div) main axis 主轴,横向的轴,x轴,起点和终点之间的距...

  • 伸缩布局

    display: flex (父盒子设置为弹性布局) flex-direction: column (调整主轴方向...

  • 伸缩布局

    直接参考: http://www.ruanyifeng.com/blog/2015/07/flex-grammar...

网友评论

      本文标题:伸缩布局

      本文链接:https://www.haomeiwen.com/subject/xpmoxftx.html