初次接触这个好使又不是特别好用的布局方法

作者: 网页游戏资讯  发布:2019-05-23

初次接触这个好使又不是特别好用的布局方法。  刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而,当自己把页面放缩时。。。。画风就莫名其妙的变了,没错 ,就是变了,变得很乱很丑,再把网页放到手机上:卧槽这是哪个战斗力五颗渣的家伙写的啊,整个页面一坨一坨的堆积在一起。

初次接触这个好使又不是特别好用的布局方法。网页布局,是css的一个重要应用。

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

初次接触这个好使又不是特别好用的布局方法。初次接触这个好使又不是特别好用的布局方法。传统的网页布局,主要是基于盒模型,和display、position、float属性,这些属性的一个优势就是简单,容易理解,但也有一些不方便的地方,比如在实现垂直居中的时候。

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

2009年,W3C提出了一种新的解决方案:Flex(Flexible Box,弹性布局)布局。

初次接触这个好使又不是特别好用的布局方法。  当然了,对于我这样刚刚学了一点flex布局还没有太多实践运用的小菜鸟,随便布个局,就得绕着主轴交叉轴转半天,实在不行还得动手画,运用起来还真是闲的不是特好用。可能以后用多了就好用了。

设置为flex布局的容器称为flex容器,flex容器的子元素称为容器项目(flex item)。

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

初次接触这个好使又不是特别好用的布局方法。将元素设置为flex布局后,子元素的float、clear、vertical-align属性将失效。

  1:容器:简单来说就是包含着要根据放缩页面大小自动布局元素的那个盒子,可以是body也可以是任何其他盒模型的父级元素,

初次接触这个好使又不是特别好用的布局方法。Flex布局的一些基本概念

再简单来书就是样式设置了display:flex的元素,这时你会发现 这个元素的宽默认可以填满整个页面。而且子元素再设置子元素的float、clear和vertical-align属性也是无效的。

Flex容器默认有两根轴,水平的主轴(main axis)和垂直的交叉轴(cross asix)。主轴的开始位置叫做main start,主轴的结束位置叫做main end。交叉轴的开始位置叫做cross axis,交叉轴的结束位置叫做cross end。

  2:项目:包含在容器内的所有成员,都是这个容器的项目,当然了项目同时也可以设置为display:flex做嵌套包含另一层项目。这样布局就可以根据你的不同需要,设置出不同的样式来。

容器项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

  3:轴 ——这里有两条轴,一条是样式里设置的主轴(不设置的话默认是水平向右方向),另一条就是与主轴垂直的交叉轴,主轴的起始位置(即主轴与边框的交叉点)称为main start,结束位置main end;交叉轴的起始位置cross start,结束位置叫做cross end。项目默认沿主轴排列。还有两个本文暂时用不到的概念:单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

Flex容器的一些属性

  4:容器的属性:

flex-direction

    ①flex-direction主轴的方向(也就是默认项目排列的方向)取值有以下四个

flex-wrap

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

flex-flow

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

justify-content

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

align-items

③flex-flow 这是flex-direction和flex-wrap的简写 容器可以同时设置时建议使用此元素,否则,如果是给一类容器设置时,建议分开使用lex-direction和flex-wrap

align-content

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

1.flex-direction:容器的方向

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

有4个值:

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

row(默认值):主轴为水平方向,起点在左侧

a.flex-start 延交叉轴起始端对齐(类似于文本的顶端对齐) b.flex-end 延交叉点结束端对齐(类似于文本的低端对齐) c. center延交叉轴中点对齐(类似于文本的垂直居中)d. stretch 如果项目没有指定高度或者设置的auto,项目将会在交叉轴方向占满容器的高度 e. baseline 项目的第一行文字基线对齐

row-reverse:主轴为水平方向,起点在右侧

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

column:主轴为垂直方向,起点在顶部

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

column-reverse:主轴为垂直方向,起点在底部

  5:项目的属性:

2.flex-wrap:项目排列

①order 定义项目的排列顺序。数值越小,排列越靠前,默认为0 可以以此改变项目在容器中的排列顺序

有3个值:

②flex-grow 定义项目的放大比例,默认为0,此时计时容存在剩余空间也不会放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为3,其他项目都为2,则前者占据的剩余空间将是其他项的1.5倍。以此单独给项目设置,让不同元素在页面放缩时产生不同的展示效果。

nowrap(默认):不换行

③flex-shrink 项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,设置为0时,不会因为空间不足二缩小。另外设置负值无效。

wrap:换行,第一行结束后,另起一行开始排列

④flex-basis 在分配多余空间之前,项目占据的主轴空间(main size)。浏览器会根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。结构嵌套时会经常用到,否则被嵌套在内的容器大小只能根据其项目大小往外撑开。

wrap-reverse:换行,第一行结束后在上面一行开始排列

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

3.flex-flow:flex-direction和flex-wrap的简写形式,默认值为row nowrap

⑥align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

.ele{flex-flow:<flex-direction>||<flex-wrap>}

终于把基本概念敲完了,来,趁刚看完的童鞋还没睡着做点有趣的。上图,麻将来了图片 1

取值请看例子:

接下来简单介绍几个,希望能达到抛砖引玉的效果。

.container{

先是一饼 首先是HTML部分

  flex-flow:row nowrap;

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

}

 

4.justify-content:项目在主轴上的对齐方式

  下边是css部分

有5个值:

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

flex-start(默认):左对齐

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

flex-end:右对齐

接下来升级一下,二饼

center:居中

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

space-between:两端对齐,项目之间的间隔相等

 可以看到这个二饼是竖着在那里的 直接换行的话,你会发现这俩黑蛋蛋是占不满一行的因此也不会换行,这时候就只能强行让他换行了,让他的主轴方向换成竖着的,这时,就能得到两个竖着的饼了,接下来就是调整到中间位置了,此时主轴方向已经换了,水平居中相当于在项目的交叉轴上居中,getit√接下来就是把这连个竖着在中间的蛋蛋给分开了,此时垂直方向分开相当于在项目的主轴让项目两端对齐,可以设置space-between和space-around都能达到效果,就看对间距的具体需求了。

space-around:每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

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

5.align-items:项目在交叉轴上的对齐方式

    接下来是三饼,第二个在屏幕中间,第三个在屏幕的右下角,一条笔直得斜线将容器分成两瓣。通过对容器的属性设置这个就有点问题了,你会发现,what?这仨家伙怎么设置都是在一行的,跟糖葫芦串串一块粘着一样。怎么办呢,下面就要开始动用项目的属性了,对项目设置单独的对齐方式,可以通过其不同的对齐方式,达到画斜线折线的效果,来上代码。

有5个值,与交叉轴的方向有关,具体如下:

本文由bg游戏资讯发布于网页游戏资讯,转载请注明出处:初次接触这个好使又不是特别好用的布局方法

关键词: 其他分类 页游 Flex HTML/HTML5/C HTML&CSS

上一篇:bg游戏资讯:任务管理器,全部开源
下一篇:没有了