flex布局的优缺点是：1、flex布局优点在于其容易上手，根据flex规则很容易达到某个布局效果；2、缺点是浏览器兼容性比较差，只能兼容到ie9及以上。本文 *** 作环境：宏基S40-51、HBuilderX.3.0.5&&cs

最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex.container {display: flex;flex-direction: column;align-items: center;backgro

FlexibilityFlex伸缩布局决定性的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间，也会按照 收缩比率 缩小各项目以

瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了1.multi-column多列布局实现瀑布流先简单的讲下multi-col

在设置display:flex,justify-content: space-betweend的时候，它会把子元素靠边对齐平均分剩余的空间。例如：打算一行放三个子元素效果：这看起来一点问题都没有，还挺好看的，但是如果下一行不够三个呢，只有

移动端里面，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，但是最近在做项目的时候发现一个问题：一个li里面设置了flex,flex: 0 0 33.333%,然后想让子元素里面的文字超出flex定义宽度后自动省略。<

CSS 中的 Flex(d性布局) 可以很灵活的控制网页的布局，其中决定 Flex 布局内项目宽度高度的是三个属性：flex-basis, flex-grow, flex-shrink.flex-basisflex-basis 决定了

以下是一个用Flex布局的柱状图：HTML：<div class="his_box"><div>成绩分布直方图<div><div class="histogram&q

Flex布局简介Flex英文为flexiable box，翻译为d性盒子，Flex布局即d性布局。Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为：.box{display: flex;}行内

Gird布局与Flex布局有一定的相似性，都是对容器的内部项目进行划分。Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作成一维布局Grid布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以将它看成二维布局。父

两列布局项目中经常会用到，很多种方法可以做这样的效果但是最方便的还是要属flex了，给外层父元素设置display:flex;然后子元素，宽度自适应的那个设置flex-grow:1;，另外一个设置固定宽度就可以做到，一个固定另一个自适应了

要创建一个 flex 容器，只需要将一个 display: flex 属性添加到一个元素上。默认情况下，所有的直接子元素都被认为是 flex 项，并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器，那么 flex 项将按比