flex常用

2019-02-22  本文已影响0人  YellowPoint
  1. 主轴单个元素右对齐
margin-left: auto;  注意这里是left
  1. 按钮中的字的垂直水平居中,貌似比设置line-height=height要更居中
display: flex;
justify-content: center;
align-items: center;

  1. display: inline-flex; 将对象作为内联弹性伸缩盒显示。
    flex布局(3): flex,inline-flex,inline-block 区别
    让其宽度被子元素撑大
  2. flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    flex:none 也就是这个元素不缩小
  3. 子元素宽度自动撑大,但所有子元素超过父级宽度则该元素超出省略
    flex布局中,保持内容不超出容器的解决办法

给父级设置 overflow: hidden;

上一篇 下一篇

猜你喜欢

热点阅读