感觉到终于学会了简便的网页布局,不用JS去总计设置样式

  刚开始学前端的童鞋们应该也是同等先读书的table然后再念书了盒子模型,感觉到底学会了简要的网页布局,使用各个display,float,position绞尽脑汁给页面布局成团结想要的页面样式,然则,当自己把页面放缩时。。。。画风就莫名其妙的变了,没错
,就是变了,变得很乱很丑,再把网页放到手机上:卧槽这是哪位战斗力五颗渣的家伙写的哎,整个页面一坨一坨的积聚在联名。

  刚最先学前端的童鞋们应该也是如出一辙先读书的table然后再上学了盒子模型,感觉终于学会了简易的网页布局,使用各种display,float,position绞尽脑汁给页面布局成温馨想要的页面样式,然则,当自己把页面放缩时。。。。画风就莫名其妙的变了,没错
,就是变了,变得很乱很丑,再把网页放到手机上:卧槽这是哪个战斗力五颗渣的东西写的啊,整个页面一坨一坨的堆积在同步。

  然后就钻研js响应式布局,写着写着,哎哎我去,这是哪一个的宽啊,这是哪一个因素的高啊,这么些比例等下设置为多少,跟上一个需不需要一样,会不会再放缩这一个比重又会排乱,一些列统计之后,终于,写出了一个满足的响应式布局,再看看自己的代码,写了好多有木有。

  然后就钻研js响应式布局,写着写着,哎哎我去,这是哪一个的宽啊,这是哪一个要素的高啊,这多少个比例等下设置为多少,跟上一个需不需要一样,会不会再放缩那多少个比例又会排乱,一些列总括之后,终于,写出了一个好听的响应式布局,再看看自己的代码,写了广大有木有。

  这时CSS3里的flex布局方法就展现简单易用,大手一敲,啪啪啪,一行代码,自适应问题就缓解了,不用float,不用position,不用JS去统计设置样式,麻麻再也不用担心我敲键盘时摔鼠标了。

  这时CSS3里的flex布局方法就显得简单易用,大手一敲,啪啪啪,一行代码,自适应问题就迎刃而解了,不用float,不用position,不用JS去总计设置样式,麻麻再也不用担心我敲键盘时摔鼠标了。

  当然了,对于自己这样恰好学了一点flex搭架子还一向不太多实践应用的菜肴鸟,随便布个局,就得绕着主轴交叉轴转半天,实在非常还得出手画,运用起来还真是闲的不是特好用。可能未来用多了就好用了。

  当然了,对于我如此恰好学了一点flex搭架子还不曾太多实践应用的菜肴鸟,随便布个局,就得绕着主轴交叉轴转半天,实在可怜还得入手画,运用起来还真是闲的不是特好用。可能以后用多了就好用了。

  好了,题外话不扯太多了,进入正题。首先看一下咋样是flex布局的基本概念(概念参考引用来自于菜鸟教程)

  好了,题外话不扯太多了,进入正题。首先看一下咋样是flex布局的基本概念(概念参考引用来自于菜鸟教程)

  1:容器:简单的话就是包含着要依据放缩页面大小活动布局元素的卓殊盒子,可以是body也足以是其余其他盒模型的父级元素,

  1:容器:简单的话就是含有着要依照放缩页面大小活动布局元素的充裕盒子,可以是body也足以是此外其他盒模型的父级元素,

再简单来书就是样式设置了display:flex的要素,那时你会意识
这多少个因素的宽默认同以填满整个页面。而且子元素再设置子元素的float、clear和vertical-align属性也是杯水车薪的。

再简单来书就是样式设置了display:flex的元素,这时你会意识
这些因素的宽默认可以填满所有页面。而且子元素再设置子元素的float、clear和vertical-align属性也是行不通的。

  2:项目:包含在容器内的持有成员,都是其一容器的项目,当然了项目同时也可以设置为display:flex做嵌套包含另一层项目。这样布局就可以按照你的例外需要,设置出不同的体裁来。

  2:项目:包含在容器内的具备成员,都是其一容器的花色,当然了项目同时也足以设置为display:flex做嵌套包含另一层项目。那样布局就可以依据你的两样需要,设置出不同的体制来。

  3:轴
——这里有两条轴,一条是体制里设置的主轴(不安装的话默认是程度向右方向),另一条就是与主轴垂直的交叉轴,主轴的开场地点(即主轴与边框的交叉点)称为main
start,为止地方main end;交叉轴的序幕位置cross start,结束地方叫做cross
end。项目默认沿主轴排列。还有五个本文暂时用不到的概念:单个项目占据的主轴空间叫做main
size,占据的穿插轴空间叫做cross size。

  3:轴
——这里有两条轴,一条是样式里安装的主轴(不设置的话默认是程度向右方向),另一条就是与主轴垂直的交叉轴,主轴的序曲地方(即主轴与边框的交叉点)称为main
start,截至地方main end;交叉轴的前奏地方cross start,截止地点叫做cross
end。项目默认沿主轴排列。还有两个本文暂时用不到的概念:单个项目占据的主轴空间叫做main
size,占据的穿插轴空间叫做cross size。

  4:容器的特性:

  4:容器的性能:

    ①flex-direction主轴的大势(也就是默认项目排列的来头)取值有以下两个

    ①flex-direction主轴的主旋律(也就是默认项目排列的可行性)取值有以下几个

     a.默认row 水平方向,起源在左端 b. row-reverse
水平方向,起源在右端 c. column垂直方向 起源在上头
     d.column-reverse垂直方向 起源在下端

     a.默认row 水平方向,起源在左端 b. row-reverse
水平方向,起源在右端 c. column垂直方向 起源在上方
     d.column-reverse垂直方向 起源在下端

澳门皇冠官网app,    ②flex-wrap 是否换行,取值有以下六个

    ②flex-wrap 是否换行,取值有以下五个

a.nowrap:默认值不换行 b.wrap:换行 按交叉轴的倾向一行一行往下排 c.
wrap-reverse:换行 按与接力轴相反的方,向倒着一行一行的排列

a.nowrap:默认值不换行 b.wrap:换行 按交叉轴的样子一行一行往下排 c.
wrap-reverse:换行 按与接力轴相反的方,向倒着一行一行的排列

③flex-flow 这是flex-direction和flex-wrap的简写
容器可以而且安装时指出利用此因素,否则,淌要是给一类容器设置时,提出分开使用lex-direction和flex-wrap

③flex-flow 这是flex-direction和flex-wrap的简写
容器可以同时设置时指出采纳此因素,否则,假设是给一类容器设置时,提议分开使用lex-direction和flex-wrap

    ④justify-content 项目在主轴方向的对齐模式 取值如下

    ④justify-content 项目在主轴方向的对齐形式 取值如下

a. flex-start 延主轴起头端对齐(类似于文本的左对齐) b.flex-end
延主轴截至端对齐(类似于文本右对齐) c.center
延主轴中点对齐(类似于文本的居中) d space-between
延主轴两端对齐项目两端距离相等 e. space-around
每个品种两侧的距离相等。(类似于盒子模型的margin)项目里面的间隔比项目与边框的间距大一倍,

a. flex-start 延主轴起初端对齐(类似于文本的左对齐) b.flex-end
延主轴停止端对齐(类似于文本右对齐) c.center
延主轴中点对齐(类似于文本的居中) d space-between
延主轴两端对齐项目两端距离相等 e. space-around
每个体系两侧的距离相等。(类似于盒子模型的margin)项目里面的间距比项目与边框的区间大一倍,

    ⑤align-items 项目在交叉轴方向的对齐模式

    ⑤align-items 项目在交叉轴方向的对齐形式

a.flex-start 延交叉轴先导端对齐(类似于文本的下面对齐) b.flex-end
延交叉点结束端对齐(类似于文本的低端对齐) c.
center延交叉轴中点对齐(类似于文本的垂直居中)d. stretch
假若项目尚未点名低度或者安装的auto,项目将会在交叉轴方向占满容器的可观
e. baseline 项目的首先行文字基线对齐

a.flex-start 延交叉轴初步端对齐(类似于文本的下边对齐) b.flex-end
延交叉点截止端对齐(类似于文本的低端对齐) c.
center延交叉轴中点对齐(类似于文本的垂直居中)d. stretch
要是项目尚未点名高度或者安装的auto,项目将会在交叉轴方向占满容器的可观
e. baseline 项目的首先行文字基线对齐

    ⑥align-content 多轴线时轴线的对齐格局 

    ⑥align-content 多轴线时轴线的对齐模式 

a.flex-start 与接力轴起头端对齐 b.flex-end与接力轴终点对齐 c.
center与交叉轴中点对齐 d space-between
与接力轴两端对齐,轴线之间的间距平均分布 e. space-around
每根轴线两侧的距离都相当,轴线之间的间距比轴线与边框的区间大一倍(类似于盒子模型的margin)项目里面的间隔比项目与边框的间距大一倍
f.stretch(默认值):轴线占满整个交叉轴

a.flex-start 与接力轴开始端对齐 b.flex-end与接力轴终点对齐 c.
center与交叉轴中点对齐 d space-between
与接力轴两端对齐,轴线之间的间距平均分布 e. space-around
每根轴线两侧的区间都等于,轴线之间的距离比轴线与边框的间隔大一倍(类似于盒子模型的margin)项目里面的距离比项目与边框的间隔大一倍
f.stretch(默认值):轴线占满整个交叉轴

  5:项目标性质:

  5:项目的习性:

①order 概念项目标排列顺序。数值越小,排列越靠前,默认为0
可以以此转移项目在容器中的排列顺序

①order 概念项目标排列顺序。数值越小,排列越靠前,默认为0
可以以此转移项目在容器中的排列顺序

②flex-grow
定义项指标放大比例,默认为0,此时计时容存在剩余空间也不会放大。尽管持有类型的flex-grow属性都为1,则它们将等分剩余空间(假如部分话)。假诺一个项目标flex-grow属性为3,其他连串都为2,则前者占据的多余空间将是此外项的1.5倍。以此单独给品种设置,让不同因素在页面放缩时暴发不同的彰显效果。

②flex-grow
定义项目标加大比例,默认为0,此时计时容存在剩余空间也不会放大。假如拥有品种的flex-grow属性都为1,则它们将等分剩余空间(即使有些话)。倘若一个品种的flex-grow属性为3,其他品类都为2,则前者占据的剩余空间将是此外项的1.5倍。以此单独给项目安装,让不同因素在页面放缩时发出不同的显示效果。

③flex-shrink 项目的裁减比例,默认为1,即假诺空间欠缺,该品种将压缩,设置为0时,不会因为空中不足二缩短。此外安装负值无效。

③flex-shrink 项目的紧缩比例,默认为1,即假诺空间不足,该类型将压缩,设置为0时,不会因为空中不足二收缩。另外安装负值无效。

④flex-basis 在分配多余空间在此以前,项目占据的主轴空间(main
size)。浏览器会遵照这一个特性,总计主轴是否有盈余空间。它的默认值为auto,即项目的本来大小。结构嵌套时会日常使用,否则被嵌套在内的容器大小只可以遵照其体系大小往外撑开。

④flex-basis 在分配多余空间以前,项目占用的主轴空间(main
size)。浏览器会基于这一个特性,统计主轴是否有剩余空间。它的默认值为auto,即项目标自然大小。结构嵌套时会平常采取,否则被嵌套在内的器皿大小只可以依据其体系大小往外撑开。

⑤flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1
auto。后四个属性可选

⑤flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1
auto。后三个特性可选

⑥align-self 属性允许单个项目有与任何品种不一致的对齐情势,可覆盖align-items属性。默认值为auto,表示继续父元素的align-items属性,假若没有父元素,则一律stretch。

⑥align-self 属性允许单个项目有与其他项目不雷同的对齐格局,可覆盖align-items属性。默认值为auto,表示继续父元素的align-items属性,假诺没有父元素,则等同stretch。

算是把基本概念敲完了,来,趁刚看完的童鞋还没睡着做点有趣的。上图,麻将来了澳门皇冠官网app 1

终于把基本概念敲完了,来,趁刚看完的童鞋还没睡着做点有趣的。上图,麻将来了澳门皇冠官网app 2

接下去大概介绍多少个,希望能达成抛砖引玉的效果。

接下去大概介绍几个,希望能达成抛砖引玉的法力。

先是一饼 首先是HTML部分

率先一饼 首先是HTML部分

  <section class="box1">
        <div class="point"></div>
    </section>
  <section class="box1">
        <div class="point"></div>
    </section>

 

 

  下边是css部分

  下边是css部分

        .box1{
            justify-content:center;
            /*项目在主轴方向的对齐方式*/
            align-items:center;
            /*项目延交叉轴的对齐方式*/
        }
        .box1{
            justify-content:center;
            /*项目在主轴方向的对齐方式*/
            align-items:center;
            /*项目延交叉轴的对齐方式*/
        }

   
解析一下:大饼是在正中间的,即项目在容器的主轴和交叉轴的对齐地点均是高中级
对应设置居中即可。

   
解析一下:大饼是在正中间的,即项目在容器的主轴和交叉轴的对齐地方均是中等
对应安装居中即可。

接下去升级一下,二饼

接下去升级一下,二饼

  <section class="box2">
        <div class="point"></div>
        <div class="point"></div>
    </section>
  <section class="box2">
        <div class="point"></div>
        <div class="point"></div>
    </section>

 可以见到这么些二饼是竖着在这边的
间接换行的话,你会发现这俩黑蛋蛋是占不满一行的之所以也不会换行,这时候就只可以强行让她换行了,让他的主轴方向换成竖着的,这时,就能获取两个竖着的饼了,接下去就是调整到中路位置了,此时主轴方向一度换了,水平居中相当于在类型的交叉轴上居中,getit√接下去就是把这连个竖着在中间的睾丸给分开了,此时垂直方向分开相当于在档次的主轴让项目两端对齐,可以设置space-between和space-around都能达效用果,就看对区间的现实性需要了。

 能够看来这一个二饼是竖着在这边的
直接换行的话,你会发觉这俩黑蛋蛋是占不满一行的所以也不会换行,这时候就不得不强行让他换行了,让她的主轴方向换成竖着的,这时,就能博得多少个竖着的饼了,接下去就是调整到中等地点了,此时主轴方向一度换了,水平居中相当于在品种的陆续轴上居中,getit√接下去就是把那连个竖着在中等的睾丸给分开了,此时垂直方向分开相当于在品种的主轴让项目两端对齐,可以设置space-between和space-around都能达到效果,就看对区间的切实要求了。

    .box2{
            flex-direction:column;
            /*主轴的方向*/
            justify-content: space-around;
            /*在主轴方向的对齐方式*/
            align-items: center;
            /*在交叉轴的对齐方式*/
        }
    .box2{
            flex-direction:column;
            /*主轴的方向*/
            justify-content: space-around;
            /*在主轴方向的对齐方式*/
            align-items: center;
            /*在交叉轴的对齐方式*/
        }

    接下去是三饼,第二个在屏幕中间,第三个在屏幕的右下角,一条笔直得斜线将容器分成两瓣。通过对容器的性能设置这一个就有点问题了,你会发现,what?这仨家伙怎么设置都是在一行的,跟糖葫芦串串一块粘着一样。咋做呢,下边就要起来应用项目标属性了,对项目安装单独的对齐格局,可以经过其不同的对齐模式,达到画斜线折线的法力,来上代码。

    接下去是三饼,第二个在屏幕中间,第三个在屏幕的右下角,一条笔直得斜线将容器分成两瓣。通过对容器的性质设置这么些就有点问题了,你会发觉,what?这仨家伙怎么设置都是在一行的,跟糖葫芦串串一块粘着一样。怎么做吧,上边就要起来使用项目标性质了,对项目安装独立的对齐模式,可以经过其不同的对齐模式,达到画斜线折线的法力,来上代码。

  <section class="box3">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
    </section>

        .box3{    
            justify-content: center;
            /*项目在主轴方向的对齐方式*/
        }
        .box3 .point:nth-child(2){
            align-self:center;
            /*项目在交叉轴的单独对齐方式 位置居中 这时你会发现第二个打黑点跑下边屏幕中间位置了 同理设置第三个 跑到最底部了
 当然这里由于没有改变他们的主轴排序位置 因此他们在主轴的相对位置还是不变的 这样一条斜线就诞生了*/
        }
        .box3 .point:last-child{
            align-self:flex-end;
      
        }
  <section class="box3">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
    </section>

        .box3{    
            justify-content: center;
            /*项目在主轴方向的对齐方式*/
        }
        .box3 .point:nth-child(2){
            align-self:center;
            /*项目在交叉轴的单独对齐方式 位置居中 这时你会发现第二个打黑点跑下边屏幕中间位置了 同理设置第三个 跑到最底部了
 当然这里由于没有改变他们的主轴排序位置 因此他们在主轴的相对位置还是不变的 这样一条斜线就诞生了*/
        }
        .box3 .point:last-child{
            align-self:flex-end;
      
        }

  接下去是四饼了,一排两个,一排三个,咔咔咔,五个小圆点被早出来了,换行,额,画风有点好奇,你是不是画出了这么的四饼?

  接下去是四饼了,一排五个,一排两个,咔咔咔,三个小圆点被早出来了,换行,额,画风有点奇怪,你是不是画出了这样的四饼?

澳门皇冠官网app 3

澳门皇冠官网app 4

  当然了,假若你设置的各种饼的宽高比例高于33.3%,这里不会并发这么些题材,已经直接做好一个四饼出来了。然则,麻将里的饼就一饼的饼大,其他的饼都一样大,你在设置6789饼的时候再用事先的比重一度没办法在容器内包含完了,只好换宽高,不过再画出来的饼显示出来,放到在一张图上,有点古怪,打个麻将一会饼大一会小的。

  当然了,即便您设置的每个饼的宽高比例高于33.3%,这里不会产出这多少个题材,已经直接做好一个四饼出来了。不过,麻将里的饼就一饼的饼大,其他的饼都一样大,你在设置6789饼的时候再用事先的比重已经没办法在容器内涵盖完了,只可以换宽高,可是再画出来的饼体现出来,放到在一张图上,有点古怪,打个麻将一会饼大一会小的。

  接下去就还要用同一大的饼去画了,怎么画吗,既然换行换不出自己想要的结果,这直接让她们不再一行咯,分成两块之后,接下去就跟二饼差不多了,献上代码

  接下去就还要用同样大的饼去画了,怎么画吗,既然换行换不出自己想要的结果,这直接让他俩不再一行咯,分成两块之后,接下去就跟二饼差不多了,献上代码

<section class="box4">
        <!-- 需要嵌套 不嵌套的话 会一行三个一行一个 没办法将第三个排到-->
        <div class="b4">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="b4">
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </section>

        .box4{
            flex-wrap: wrap;
            /*是否换行*/
            /*justify-content:space-around;*/
            /*这里是单独的两块 对项目内容起不到实际作用*/
            align-content: space-around;
            /*多条轴线时 轴线的的对齐方式 两条轴线两端对齐*/
        }
        .box4 .b4{
            flex-basis: 100%;/*项目在主轴占据的空间*//*作为项目为填满容器 不设置此属性的话 占位没有打开 两个一排的点在一起*/
            display: flex;
            /*是否换行*/
            justify-content:space-around;
            /*项目在主轴方向的对齐方式*/
            /*align-content: space-around;*/
            /*多轴线时 轴线的对齐方式*/
        }
<section class="box4">
        <!-- 需要嵌套 不嵌套的话 会一行三个一行一个 没办法将第三个排到-->
        <div class="b4">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="b4">
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </section>

        .box4{
            flex-wrap: wrap;
            /*是否换行*/
            /*justify-content:space-around;*/
            /*这里是单独的两块 对项目内容起不到实际作用*/
            align-content: space-around;
            /*多条轴线时 轴线的的对齐方式 两条轴线两端对齐*/
        }
        .box4 .b4{
            flex-basis: 100%;/*项目在主轴占据的空间*//*作为项目为填满容器 不设置此属性的话 占位没有打开 两个一排的点在一起*/
            display: flex;
            /*是否换行*/
            justify-content:space-around;
            /*项目在主轴方向的对齐方式*/
            /*align-content: space-around;*/
            /*多轴线时 轴线的对齐方式*/
        }

此地嵌套是要小心几点:

此处嵌套是要专注几点:

一最外层容器设置给品种的样式对齐直接包含的子元素有效,嵌套的品类需要对被嵌套项目的容器设置;

一最外层容器设置给项目的样式对齐直接包含的子元素有效,嵌套的档次需要对被嵌套项目标容器设置;


嵌套的品类要做容器也要记得添加display:flex;这样才能在次元素上对其品种设置样式;


嵌套的品种要做容器也要记得添加display:flex;这样才能在次元素上对其品种设置样式;

三:flex-basis: 项目在主轴上占有的长空
当此项目在嵌套中还要作为容器,此时不安装次属性,你会发觉,这么些因素的大大小小是随着子元素大小直接撑开的,可是没有办法安装两端对齐,因为这时子元素作为项目曾经相当于顶着容器的边了,这时就要遵照需要来设置在主轴上所占空间了。

三:flex-basis: 项目在主轴上占据的空间
当此项目在嵌套中还要作为容器,此时不设置次属性,你会发现,这一个因素的高低是随着子元素大小直接撑开的,不过从未主意安装两端对齐,因为这时候子元素作为项目早就相当于顶着容器的边了,那时就要依照需要来安装在主轴上所占空间了。

剩下的直接把代码献上了,使用的不懂行,感觉代码有些冗余,命名是这一次相比较懒,也从不遵守专业命名。有疑问如故更好的法门希望大家能一起沟通哦。

剩余的直接把代码献上了,使用的不在行,感觉代码有些冗余,命名是这一次相比较懒,也没有按照正规命名。有疑问仍旧更好的点子希望我们能共同交换哦。

<section class="box5">
        <!-- 需要嵌套 不嵌套的话 会一行三个一行一个 没办法将第三个排到-->
        <div class="b5">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="b5">
            <div class="point"></div>
        </div>
        <div class="b5">
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </section>

        .box5{
            /*flex-direction: column;*/
            flex-wrap: wrap;
            /*justify-content:space-around;*/
            /*项目在主轴的对齐方式 单独的块 不起实际作用 直接设置项目内部项目的位置*/
            align-content: space-around;
            /*多轴线 轴线对齐 交叉轴方向*/
        }
        .box5 .b5{
            flex-basis: 100%;
            display: flex;
            justify-content: space-around;
        }

<section class="box6">
        <div class="b6">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="b6">
            <div class="p6">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="p6">
                <div class="point"></div>
                <div class="point"></div>
            </div>
        </div>
    </section>

        .box6{
            flex-wrap: wrap;          
        }
        .box6 .b6{
            display:flex;
            flex-basis: 100%;
            height: 50%;
            flex-wrap:wrap;
            justify-content: center;
            /*主轴方向对齐方式*/
            align-items: center;
            /*交叉轴方向 项目对齐方式*/

        }
        .box6 .b6 .p6{
            flex-basis:100%;
            display: flex;    
            justify-content: center;

        }

<section class="box7">
        <div class="b7">
            <div class="point"></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="b7">
            <div class="p7">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="p7">
                <div class="point"></div>
                <div class="point"></div>
            </div>
        </div>
    </section>

    .box7{
            flex-wrap: wrap;
        }
        .box7 .b7{
            height: 50%;
            /*各占一半*/
            flex-basis: 100%;
            /*宽占满*/
            display: flex;
            flex-wrap: wrap;
        }
        .box7>.b7:first-child{
            justify-content: center;
            /*居中一下 不让点挤着边框*/
        }
        .box7>.b7:first-child>.point:nth-child(2){
            align-self: center;
        }
        /*三个点变斜线方法*/
        .box7>.b7:first-child>.point:last-child{
            align-self: flex-end;
        }
        .box7>.b7:last-child{
            justify-content: center;
            /*项目主轴方向居中即可 不用分开对齐了*/
        }

<section class="box8">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
    </section>

.box8{
            flex-flow: column wrap;
            justify-content:center;
            /*项目在主轴的对齐方式*/
            align-content:center;
            /*轴线对在交叉轴的齐方式*/
        }

    <section class="box9">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>    
    </section>

.box9{
            flex-wrap:wrap;
            justify-content:center;
            /*项目在主轴方向对齐方式 居中*/
            /*换行后有三条轴线*/
            align-content: space-around;
            /*需要完全等距的话 可以分三块 每块高占三分之一 项目在主轴交叉轴居中就可以了*/
        }
<section class="box5">
        <!-- 需要嵌套 不嵌套的话 会一行三个一行一个 没办法将第三个排到-->
        <div class="b5">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="b5">
            <div class="point"></div>
        </div>
        <div class="b5">
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </section>

        .box5{
            /*flex-direction: column;*/
            flex-wrap: wrap;
            /*justify-content:space-around;*/
            /*项目在主轴的对齐方式 单独的块 不起实际作用 直接设置项目内部项目的位置*/
            align-content: space-around;
            /*多轴线 轴线对齐 交叉轴方向*/
        }
        .box5 .b5{
            flex-basis: 100%;
            display: flex;
            justify-content: space-around;
        }

<section class="box6">
        <div class="b6">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="b6">
            <div class="p6">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="p6">
                <div class="point"></div>
                <div class="point"></div>
            </div>
        </div>
    </section>

        .box6{
            flex-wrap: wrap;          
        }
        .box6 .b6{
            display:flex;
            flex-basis: 100%;
            height: 50%;
            flex-wrap:wrap;
            justify-content: center;
            /*主轴方向对齐方式*/
            align-items: center;
            /*交叉轴方向 项目对齐方式*/

        }
        .box6 .b6 .p6{
            flex-basis:100%;
            display: flex;    
            justify-content: center;

        }

<section class="box7">
        <div class="b7">
            <div class="point"></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="b7">
            <div class="p7">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="p7">
                <div class="point"></div>
                <div class="point"></div>
            </div>
        </div>
    </section>

    .box7{
            flex-wrap: wrap;
        }
        .box7 .b7{
            height: 50%;
            /*各占一半*/
            flex-basis: 100%;
            /*宽占满*/
            display: flex;
            flex-wrap: wrap;
        }
        .box7>.b7:first-child{
            justify-content: center;
            /*居中一下 不让点挤着边框*/
        }
        .box7>.b7:first-child>.point:nth-child(2){
            align-self: center;
        }
        /*三个点变斜线方法*/
        .box7>.b7:first-child>.point:last-child{
            align-self: flex-end;
        }
        .box7>.b7:last-child{
            justify-content: center;
            /*项目主轴方向居中即可 不用分开对齐了*/
        }

<section class="box8">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
    </section>

.box8{
            flex-flow: column wrap;
            justify-content:center;
            /*项目在主轴的对齐方式*/
            align-content:center;
            /*轴线对在交叉轴的齐方式*/
        }

    <section class="box9">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>    
    </section>

.box9{
            flex-wrap:wrap;
            justify-content:center;
            /*项目在主轴方向对齐方式 居中*/
            /*换行后有三条轴线*/
            align-content: space-around;
            /*需要完全等距的话 可以分三块 每块高占三分之一 项目在主轴交叉轴居中就可以了*/
        }

    

    

相关文章