新萄京flex 布局 初次接触者好要又未是专程好用的布局方法。flex 布局 初次接触这好要又无是特别好用的布局方法。

  刚开学前端的童鞋们应该吗是同样先念的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垂直方向 起点在下端

    ②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。

到底将基本概念敲了了,来,趁刚看罢的童鞋还无歇在开点有趣之。上图,麻将来了新萄京 1

好不容易把基本概念敲完了,来,趁刚看了的童鞋还没睡觉在做点有趣的。上图,麻将来了新萄京 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;
      
        }

  接下是四饼了,一解片只,一败片独,咔咔咔,四个小圆点被早出了,换行,额,画风有点蹊跷,你是不是画画出了这样的季饼?

  接下是四饼了,一去掉片独,一消片单,咔咔咔,四只小圆点被早出了,换行,额,画风有点蹊跷,你是无是画画生了这般的季饼?

新萄京 3

新萄京 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;
            /*需要完全等距的话 可以分三块 每块高占三分之一 项目在主轴交叉轴居中就可以了*/
        }

    

    

发表评论

电子邮件地址不会被公开。 必填项已用*标注