• 弹性盒模型的实际应用


    现在是凌晨4.45分,刚才解决了一个棘手的问题,乘着这股余劲,我要把刚才查阅的、测试的以及平时不怎么关注的知识点再理一遍。今天收获真的大。
    1、css清除浮动。父元素如果没有设置高度,将默认由子元素撑开父元素的高度。如果子元素设置了浮动,也不能撑开父元素的高度。
    2、使用@media only screen为不同屏幕大小的设备写样式其实是一件非常繁杂的事,所有构建的页面结构最好一样,然后通过设置 元素的display来影藏和显示元素。
    页面结构一旦成型, 除非是通过js动态增删元素,通过@media only screen我们只能 修改属性而不能增删元素。
    max-width和min-width是指整个窗口的宽度,包括滚动条的宽度。
    3、标准合模型、怪异合模型、弹性盒模型的区别和用法。
    4、bootstrap的相关属性和用法。

    上面就是今天所掌握的知识点,废话不多说入正题。
    怎样实现以下同行元素子自动换行,且换行后,每一行元素依旧占满整个父元素的宽度。
    请看下面几张图:
    这里写图片描述
    状态1
    这里写图片描述
    状态2
    这里写图片描述
    状态3
    这里写图片描述
    状态4
    上面4张图是浏览器窗口由大到导航栏的状态变化。
    我的页面是用bootstrap写的,上面是bootstrap中的按钮组,默认同行显示,由字体撑开按钮的大小
    状态1到状态2
    状态1的字体和按钮大小都比较大,这个过程我是通过css的@media only screen实现。
    状态2到状态3
    这是我们的重点。
    怎么实现行元素自动换行?
    如果同行元素有固定的宽度,一般都不会自动换行。
    如果同行元素采用百分比赋值,始终会有宽度值,不会实现换行。
    如果元素的宽高都是由内容撑开呢?
    给元素设置display:inline-block;
    这里写图片描述
    悟空与八戒两个元素中间会出现缝隙。不过自动换行倒是实现了。
    如果给元素添加浮动效果呢?
    这里写图片描述
    浮动效果要比display:inline-block;好。
    不过这两者虽然都实现了自动换行,但是最终效果却不是我们想要的。
    我们要的效果是由状态2到状态3,元素换行之后,该元素会占据整行,上一行空出来的空间会被其它元素所占满。
    我采用的方法是使用弹性盒模型
    父元素添加以下属性

    display: flex;//表示该元素为弹性盒模型元素。
    flex-wrap: wrap;//表示遇到边界后会自动换行。

    所有子元素添加

    flex-grow: 1;//定义元素在整行中所占的比例,如果都为1,则同行所有的元素的宽度都相同。已换行的元素会 占据整行。如图状态3和状态4.

  • 相关阅读:
    【LeetCode】17. Letter Combinations of a Phone Number
    【LeetCode】16. 3Sum Closest
    【LeetCode】15. 3Sum 三个数和为0
    【LeetCode】14. Longest Common Prefix 最长前缀子串
    【LeetCode】13. Roman to Integer 罗马数字转整数
    【LeetCode】12. Integer to Roman 整型数转罗马数
    【LeetCode】11. Container With Most Water
    【LeetCode】10. Regular Expression Matching
    Models of good programmer
    RSA Algorithm
  • 原文地址:https://www.cnblogs.com/jiandanshishu/p/12953294.html
Copyright © 2020-2023  润新知