display:flex属性：flex保持高度同时，上下不留白如何实现呀

来源：蜘蛛抓取(WebSpider) 时间：2020-08-28 06:43 标签： display:flex属性

display:flex属性:flex 是一种布局方式它即可以應用于容器中，也可以应用于行内元素是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局目前，它已经得到了所囿浏览器的支持Flex是Flexible Box的缩写，意为"弹性布局"用来为盒状模型提供最大的灵活性。设为Flex布局以后子元素的float、clear和vertical-align属性将失效。

二：flex的六个屬性

flex-wrap 容器内元素的换行(默认不换行)

5：justify-content : space-around;每个元素两侧的间隔相等所以，元素之间的间隔比元素与边框的间隔大一倍

align-items 元素在主轴（页面）當前行的横轴（纵轴）方向上的对齐方式

  • 1：align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
  • 2：align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界（靠下对齐）
  • 3：align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）
  • 4：align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条则该值与'flex-start'等效。其它情况下该值将参与基线对齐。（靠上对齐）

align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

    • 4:align-content: center; 默认值元素被拉伸以适应容器。各行将会伸展以占用剩余的涳间如果剩余的空间是负数，该值等效于'flex-start'
  • 6:align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行该值等效于'center'。

    • 三：flex常见属性总结

    「四年博客如果觉得我的文章对您有用，请帮助本站成长」

flex布局实现上下固定高度中间自適应布局

flex布局在实际开发中越来越常用，实现左右宽度或者上下高度固定中间自适应的布局的实际需求也很常见。实现起来也很简单：

1、container父容器的高度必须是一个可以计算出来的固定高度
2、实际开发中因为中间部分内容层级太多，甚至嵌套表格等使得自适应无法生效。这时候要看一下中间自适应部分的高度是否从父容器继承过来可以试给table高度不对的那一层设置 height:100%; 或者 height:inherit; 试一下能否生效。

我要回帖

更多关于 display:flex属性 的文章

 

随机推荐