弹性布局

弹性方法

display:flex;             设置弹性盒子

flex-wrap:wrap;        自动换行

justify-content:;        设置弹性项目在主轴上的对齐方式

align-items:;             设置弹性项目在交叉轴上的对其方式

flex-direction:column-reverse;           改变主轴方向

弹性属性

space-around         改变对齐方向

space-between       两端对立(两端顶头排列)

center                      居中

space-evenly          同样外边距排列(不分左右)

space-around         同样左右外边距排列

row-reverse             水平向右

colume                    竖直向下

column-reverse        竖直向上

fiex-start                   左对齐

fiex-end                     右对齐

stretch                       拉伸至最大高度(在该元素未设置高度时才能使用后)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一.什么是flex布局? 官方说法:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供...
    Jason杰森阅读 3,800评论 0 1
  • 传统的响应式布局方式,通过position:absoulte和float 弹性布局: 可以看出仅少量的代码就可以实...
    chen_cheng阅读 3,733评论 0 2
  • 怪异盒模型 box-sizing box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 con...
    溜溜球的嘛阅读 3,146评论 0 0
  • 弹性布局 最近了解了弹性布局,发现这玩意真是太好用了,于是就记...
    Shy啊阅读 3,233评论 0 1
  • 主轴和侧轴 注意:flex:将一个容器设置为块伸缩容器inline-flex:将一个容器设置为内联 伸缩容器 注意...
    晚溪呀阅读 4,930评论 0 1