使用Flexbox实现网格系统
时间：2023-03-31 12:19:20
CSS
你好世界 你好世界.box{内边距：20px；border:1pxsolid#ddd;}.columns{display:flex;}.column{flex:1}最重要的是给这一行的父元素setflex:1ondirectchildelements(column)of(columns)).这样元素就会平分整行的空间，否则只会占据元素本身的大小，挤在一起。2.指定元素占用一定宽度这里我们按照常用的12列网格系统计算。那么我们有如下需求：指定元素占用的列数当总列数加起来超过12时，自动切换到下一行HelloWorldHelloWorldHelloWorldHelloWorld.columns{display:flex;}.columns.is-multiline{flex-wrap:wrap;}.column{flex:1}.column.is-6{宽度：50%；弹性：无；}.column.is-2{宽度：16.66667%；flex:无;}.column.is-10{宽度:83.333%;flex:none;}这里的重点是给column一个辅助类is-*的定义，is-*一方面按百分比指定宽度，另一方面设置flex:none很重要，否则该元素仍将使用平分宽度的方法而不是指定。第二点是给列一个辅助类is-multiline。is-multiline的作用是设置flex-wrap:wrap。如果没有这个属性，超过12列的宽度后，这些列不会往下走，而是向右延伸。3.元素占原来的宽度HelloWorldHelloWorldHelloWorld.columns{display:flex;}.column{flex:1}.column.is-narrow{flex:none;}这里我们给一个辅助类is-narrow给想要只占原来的列元素的宽度。它设置了flex:none属性，否则元素的三个元素会平分整条线的宽度。添加is-narrow类，前后元素会占据原来的宽度，中间元素会占据剩余的宽度。参考Laracasts
