xml地图|网站地图|网站标签 [设为首页] [加入收藏]

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

2019-10-03 17:31栏目:编程
TAG:

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

传统的网页布局基于盒装模型,使用display,position,float属性来达成各种布局。
对于一些特殊的布局使用这些来实现不是很方便,比如垂直居中。
Flex应运而生,它可以简便、完整、响应式地实现各种页面布局。
Chrome 21,FF22,IE 10,Safari 6.1及以上的浏览器都支持Flex。
Flex布局将成为未来布局的首选方案。

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

基本概念

任何一个容器都可以指定为Flex布局。
块级元素:

.box{
  display: -webkit-flex; /* Safari chrome*/
  display: flex;
}

行内元素:

.box{
  display: -webkit-inline-flex;
  display: inline-flex;
}

设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素,称为Flex容器(flex container)。它的所有子元素自动成为容器成员,称为Flex项目(flex item)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

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

容器的属性

以下6个属性设置在容器上,用来控制容器中项目的排列方式和位置:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

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

flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

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

flex-wrap

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值

  • nowrap(默认):不换行。
  • wrap:换行,第一行在上方,或者第一列在左
  • wrap-reverse:换行,第一行在下方,或者第一列在右

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

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

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

justify-content

justify-content属性定义了项目在主轴上的对齐方式。注意,主轴可能是水平的也可能是垂直的。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右,其他方向类比即可:

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

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

align-items

align-items属性定义项目在交叉轴上如何对齐,交叉轴是和主轴垂直的轴

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

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

align-content

align-content属性定义了多根轴线的对齐方式。这个和之前的align-items不太一样,后者是规定元素相对本轴线的行为,

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值:

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

  4:容器的属性:

项目的属性

以下6个属性设置在项目上,用来设置项目的大小,对齐,次序等:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

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

order

order属性定义项目的排列顺序。数值越小,排列越靠前,当然,这个前是相对于主轴顺序来说的,默认值为0。

.item {
  order: <integer>;
}

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

flex-grow

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow属性都为x,则它们将等分剩余空间(如果有的话,值为0的元素不参加等分)。如果一个项目的flex-grow属性为2x,其他项目都为x,则前者占据的剩余空间将比其他项多一倍。

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

flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

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

flex-basis

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width(主轴横向)或height属性一样的值,则项目将占据固定空间。

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

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。这点一定要注意,你设置flex-grow:1和flex:1效果不一样的。

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

align-self

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

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

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

实例

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

骰子布局

我们的骰子和骰子上的点的结构是这样的:

<div class="one-container">
    <div class="point"></div>
    <div class="point"></div>
    <!--...-->
</div>

骰子的公共样式:

div{
  display: flex;
  width:104px;
  height:104px;
  margin:16px;
  padding:4px;
  background-color: #e7e7e7;
  box-shadow:
          inset 0 5px white,
          inset 0 -5px #bbb,
          inset 5px 0 #d7d7d7,
          inset -5px 0 #d7d7d7;
  border-radius: 10%;
  .point{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 4px;
    background-color: #333;
    box-shadow: inset 0 3px #111, inset 0 -3px #555;
  }
}

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

左上一个点

Flex布局默认就是首行左对齐,所以啥都不用写,里面放一个point就好。

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

中上一个点

设置项目在主轴上的对齐方式可以调整点的水平位置:

.one-container{
  //top center
  justify-content:center;
}

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

右上一个点

同理

.one-container{
  //top right
  justify-content:flex-end;
}

  5:项目的属性:

中间行,下行一个点

设置项目在交叉轴上的对齐方式,可以将点移到中间行和最下行,再配合刚才的justify-content,9个位置的单独点就都可以达成了。

.one-container{
  //top left

  //top center
  justify-content:center;

  //top right
  justify-content:flex-end;

  //center left
  align-items:center;

  //center center
  align-items:center;
  justify-content:center;

  //center right
  align-items:center;
  justify-content:flex-end;

  //bottom left
  align-items:flex-end;

  //bottom center
  align-items:flex-end;
  justify-content:center;

  //bottom right
  align-items:flex-end;
  justify-content:flex-end;
}

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

两个点

当有两个项目的时候,我们先来看看一行上放两个点,两个点排在一行的两端。
使用justify-content,你有两个选择,space-around和space-between。
一个两边不留空等分间距,一个两边留空

.two-container{
 justify-content:space-between;
}

竖着排列:

.two-container{
  //row two sperad
  justify-content:space-between;
  //column
  flex-direction: column;
}

我们知道骰子的两个点是斜着排列的,那怎么办呢,这时align-self就起作用了:

.two-container{
  //row two sperad
  justify-content:space-between;
  //column
  flex-direction: column;
  .point:nth-child(2) {
    align-self: flex-end;
  }
}

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

三个点

这里主轴水平,第2个和第3个点使用align-self放到中间行和最下行,这里注意调整一下项目在主轴上的分布,这样3个点就会在水平的中央不偏了。

.third-container{
  justify-content:space-between;
  .point:nth-child(2) {
    align-self: center;
  }
  .point:nth-child(3) {
    align-self: flex-end;
  }
}

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

四个点

骰子的4个点是分布在四个角上的这个有两种实现方法
如果你的骰子是固定大小的,给第一第三个点增加一个右外边距使得一行只能容下两个点:

.four-container{
  justify-content:space-between;
  align-content: space-between;
  flex-wrap:wrap;
  .point:nth-child(2n+1) {
    margin-right:40px;
  }
}

或者你使用两个flex布局嵌套:

<div class="four-container-other">
    <div class="row">
        <div class="point"></div>
        <div class="point"></div>
    </div>
    <div class="row">
        <div class="point"></div>
        <div class="point"></div>
    </div>
</div>

.four-container-other{
  align-content:space-between;
  flex-wrap: wrap;
  .row{
    width:100%;
    display: flex;
    justify-content:space-between;
  }
}

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

五个点

由四个点递推,第一个方法不行了,只能使用第二个办法。

<div class="five-container">
    <div class="row">
        <div class="point"></div>
        <div class="point"></div>
    </div>
    <div class="row">
        <div class="point"></div>
    </div>
    <div class="row">
        <div class="point"></div>
        <div class="point"></div>
    </div>
</div>

.five-container{
  align-content:space-between;
  flex-wrap: wrap;
  .row{
    width:100%;
    display: flex;
    justify-content:space-between;
  }
  .row:nth-child(2) {
    justify-content: center;
  }
}

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

六个点

这个反倒简单了,因为3个点自己就会排满一行:

<div class="six-container">
    <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>

.six-container{
  flex-wrap: wrap;
  align-content:space-between;
  justify-content:space-between;
}

版权声明:本文由必发88手机在线官网发布于编程,转载请注明出处:初次接触这个好使又不是特别好用的布局方法