解决flex布局垂直居中去间隔去错位

flex布局实现垂直居中 如果宽度和高度是px 那就简单,但是想要自适应使用 百分比 的话 问题就一大堆

1.宽度百分比失效

你会发现再flex容器里面的div 使用的width 百分比是没有用的,需要使用别的来设置百分比宽度

使用flex-basis: 50%; 代替 width:50%;

2.div排列换行有间隔 没有紧密的拼凑再一起

加上这两个
align-items: flex-start;
align-content: flex-start;

3.换行之后 奇数div 错位,或者宽度直接占了一整行!

在网上搜大部分都是简单的填充几个div 补上就完事了.
静态页面确实可以,简答粗暴. 但是如果要动态生成div 那么会比较麻烦,

加点东西!
#test11{…}
#test11:after{
content: “”;
flex: 50%;
}

实例 可以直接拿去修改

<style>
        #test11{
       //大盒子 不做文字居中 只做div布局
            display: flex;
            flex-direction: row;//排列方式 左-右  row-re,,,反过来 
            flex-wrap: wrap; //换行方式 上下 wrap-re..反过来