flex 弹性盒子

http://www.runoob.com/w3cnote/flex-grammar.html

flex弹性盒子——display:flex

1  flex-direction:row,这时,设置的width失效

flex-direction:column ,这时,设置的height失效

2 flex :用来设置比例

flex-wrap 和flex:1  不能一起用

因为flex:1规定了元素宽度的比例是适合的,换行就失效了

3 older用于设置flex的顺序

4 默认显示 align-items:flex-start 的效果(如图1),要想显示其他效果,需要再设置覆盖它(如图2)


图1:align-items:flex-start


图2  :align-content:flex-start

<align-self>属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已...
    丫3阅读 3,644评论 0 0
  • 一、什么叫做flex Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型设置更为灵活的变化...
    没_有_人阅读 3,051评论 0 3
  • 布局的传统解决方案,基于盒装模型,依赖display属性 +position属性+float属性。 一、flex ...
    xf0128阅读 1,760评论 0 0
  • flex 基本概念 flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器,轴包括 主...
    胡自鲜阅读 4,664评论 1 1
  • 弹性容器属性#### flex-directionflex-wrapflex-flowjustify-conten...
    JellyL阅读 3,038评论 0 1

友情链接更多精彩内容