图片 2

第一接触这么些好使又不是特地好用的布局方法

Posted by

  刚开始学前端的童鞋们应该也是一模二样先读书的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倍。以此单独给项目安装,让差异因素在页面放缩时产生分裂的来得效果。

三个点

此间主轴水平,第四个和第四个点采纳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;
}

⑥align-self 属性允许单个项目有与别的连串区别样的对齐情势,可覆盖align-items属性。默许值为auto,表示继续父成分的align-items属性,若无父元素,则等同stretch。

网格布局

到底把基本概念敲完了,来,趁刚看完的童鞋还没睡着做点有意思的。上海体育场地,麻未来了图片 1

基本网格布局

最轻便易行的网格布局,正是平均遍布。在容器里面平均分配空间。只要给品种安装了一模一样的flex-basis(无法是auto),flex-grow和flex-shrink,不管是不怎么个类型都会均分空间。大概你大约设置三个flex:1,那样浏览器会自行推算出:

flex-basis: 0px;
flex-grow: 1;
flex-shrink: 1;

只要你只设置了flex-grow是老大的,尽管flex-shrink暗许正是1方可不管,但是由于flex-basis暗中同意为auto,所以内容很多的因素会占相当大的主轴空间。

<div class="row even">
    <div class="cell">
        <div class="cell">1/2</div>
    </div>
    <div class="cell">
        <div class="cell">1/2</div>
    </div>
</div>
<div class="row even">
    <div class="cell">
        <div class="cell">1/3</div>
    </div>
    <div class="cell">
        <div class="cell"></div>
    </div>
    <div class="cell">
        <div class="cell">1/3</div>
    </div>
</div>

.row{
  display: flex;
  flex-wrap: nowrap;
  margin: -1em 0 1em -1em;
  .cell{
    padding: 1em 0 0 1em;
    text-align: center;
    flex: 1;
    //flex-basis: 0px;
    //flex-grow: 1;
    //flex-shrink: 1;
    color:white;
    display: flex;
    .item{
      background-color: hsla(31,15%,50%,.2);
      border-radius: 4px;
      padding: .8em 1em 0;
      width:100%;
      &:after {
        content: '\00a0';
        display: block;
        margin-top: 1em;
        height: 0;
        visibility: hidden;
      }
    }
  }
}

此地安装了flex=1。
你会小心到,这里的cell只是贰个容器,项指标理所必然是由cell里的item设置的,cell之所以设置了display:flex是为了使cell里的item的惊人利用align-items的暗中同意值stretch填充满cell,固然未有内容或内容远远不足。
再有这里的row的margin、cell的padding、item的伪成分是有讲究的,是为了在flex布局嵌套时互动抵消用的,这些会在下边解释

接下去大约介绍多少个,希望能达标投砾引珠的效果与利益。

比例布局

某些网格的上升的幅度为一定的比例,其余网格平均分配剩余的上空。
平均分配剩余空间的花色实际上照旧靠的flex都为同一的值,对于那多少个要占一定地点的,通过给flex-basis一个百分比来设置它占主轴多少宽度,flex-shrink和flex-grow都设为0来确定保证其大小不会自适应的调度。若是您的类型是有margin的,那么那一个比例是不准的,和width同样,所以项目里面包车型地铁间距最棒利用padding来完结。

<div class="row fix-precentage">
    <div class="cell c-100">
        <div class="item">full</div>
    </div>
    <div class="cell">
        <div class="item">nowhere to go</div>
    </div>
</div>
<div class="row fix-precentage">
    <div class="cell c-50">
        <div class="item">full</div>
    </div>
    <div class="cell">
        <div class="item">even rest</div>
    </div>
    <div class="cell">
        <div class="item">even rest</div>
    </div>
    <div class="cell">
        <div class="item">even rest</div>
    </div>
</div>

.c-100{
  flex: 0 0 100%;
}
.c-50{
  flex: 0 0 50%;
}

第一一饼 首先是HTML部分

响应式布局

动用媒体询问加flex就足以做到响应式的布局咯:

.row.responsive{
  flex-wrap: wrap;
  @media all and (max-width: 768px)  {
    .cell {
      flex:0 0 100%;
    }
  }
}
  <section class="box1">
        <div class="point"></div>
    </section>

网格布局嵌套

在一个flex项目div中再嵌套三个row的时候,row的左上负margin会和div的padding抵消。
row上面包车型大巴正margin-bottom会和div的伪成分的margin-top重合。
与上述同类二个row就疑似常的放在了div里,未有其余多于的边距。

<div class="row nest">
    <div class="cell">
        <div class="item">
            <div class="row">
                <div class="cell">
                    <div class="item">1/2</div>
                </div>
                <div class="cell">
                    <div class="item">
                        <div class="row">
                            <div class="cell">
                                <div class="item">1/2</div>
                            </div>
                            <div class="cell">
                                <div class="item">1/2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="item">responsive</div>
    </div>
    <div class="cell">
        <div class="item">responsive</div>
    </div>
</div>

 

圣杯布局

圣杯布局指的是一种最广大的网址布局。页面从上到下,分成四个部分:尾部(header),躯干(body),后面部分(footer)。个中人体又水平分为三栏,从左到右为:导航、主栏、副栏。
大家应用贰个总的垂直的flex布局,放上header,body,footer。
里面header和footer固定中度,flex:none
body自动拉伸,在内容远远不够时特别整个容器的纤维高度100vh使footer处于页面最底;在内容多时拉伸协作内容,flex:flex:
1 0 auto;

.HolyGrail{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  //height:100%;
  header,
  footer {
    flex: none;
  }
  .HolyGrail-body {
    display: flex;
    flex: 1 0 auto; /* 2 */
  }
}

在body中,flex水平布局,左侧边栏固定宽度,中间内容随荧屏铺开:

.HolyGrail-content {
  flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
  /* two aside fix to 12em */
  flex: 0 0 12em;
}

nav放在最侧面:

.HolyGrail-nav {
  /* nav left */
  order: -1;
}

在显示器宽度太时辰,body中内容竖直排列相比较方便

@media all and (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

  下边是css部分

输入框布局

我们平时须求在输入框的前线增加提醒,后方加多开关。
我们想让这么些提醒或开关是定点宽度的,然后input填满剩下的增长幅度,不过在原先那并不便于,以往有了
flex一切就变得轻松了

<!-- appending -->
<div class="InputAddOn">
    <input class="InputAddOn-field">
    <button class="InputAddOn-item">Submit</button>
</div>

<!-- prepending -->
<div class="InputAddOn">
    Hint:
    <input class="InputAddOn-field">
</div>

<!-- both -->
<div class="InputAddOn">
    Hint:
    <input class="InputAddOn-field">
    <button class="InputAddOn-item">Submit</button>
</div>

大旨就多个

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

可是当然要美化一下呀~

.InputAddOn {
  margin:1em;
  display: flex;
}
.InputAddOn-field:first-child, .InputAddOn-item:first-child {
  border-radius: 2px 0 0 2px;
}
.InputAddOn-field:not(:last-child), .InputAddOn-item:not(:last-child) {
  border-right: 0;
}
.InputAddOn-field:last-child, .InputAddOn-item:last-child {
  border-radius: 0 2px 2px 0;
}
.InputAddOn-field, .InputAddOn-item {
  border: 1px solid hsla(31,15%,50%,.25);
  padding: .5em .75em;
}
.InputAddOn-field {
  flex: 1;
}
.InputAddOn-item {
  background-color: hsla(31,15%,50%,.1);
  color: #666;
  font: inherit;
  font-weight: 400;
}
        .box1{
            justify-content:center;
            /*项目在主轴方向的对齐方式*/
            align-items:center;
            /*项目延交叉轴的对齐方式*/
        }

悬挂式布局

右边是头像,右侧是作品的布局用flex达成也很适宜:

<div class="media">
    <img class="media-figure" src="kitten.jpg" />
    <div class="media-body">
        <h3>Media Object Title</h3>
        <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.</p>
    </div>
</div>

.media {
  display: flex;
  align-items: flex-start;
}

.media-figure {
  margin-right: 1em;
}

.media-body {
  flex: 1;
}

可以套用刚才的grid系统贯彻多列和嵌套:

<div class="hang-layout grid">
    <div class="row nest">
        <div class="cell c-50">
            <div class="item">
                <div class="media">
                    <img class="media-figure" src="kitten.jpg" />
                    <div class="media-body">
                        <h3>Media Object Title</h3>
                        <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="item">
                <div class="media">
                    <img class="media-figure" src="kitten.jpg" />
                    <div class="media-body">
                        <h3>Media Object Title</h3>
                        <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.</p>
                        <div class="row nest">
                            <div class="cell">
                                <div class="item">
                                    <div class="media">
                                        <img class="media-figure" src="kitten.jpg" />
                                        <div class="media-body">
                                            <h3>Media Object Title</h3>
                                            <p>Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.hang-layout{
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  .media{
    display: flex;
    flex-basis: 50%;
    align-items: flex-start;
    padding:10px;
    text-align: left;
    color: #2b2d2f;
    .media-figure {
      margin-right: 1em;
      width:50px;
    }
    .media-body {
      flex: 1;
    }
  }
}

   
分析一下:大饼是在正中间的,即项目在容器的主轴和交叉轴的对齐地点均是中等
对应设置居中就能够。

流式布局

即每行的门类数一定,自动分行,在此之前是用float完毕的。
第一正是设置项目的flex-grow,flex-shrink,flex-basis。

<div class="flowLayout">
    <div class="flowItem"></div>
    <div class="flowItem"></div>
    <div class="flowItem"></div>
    <div class="flowItem"></div>
    <div class="flowItem"></div>
</div>

.flowLayout{
  display: flex;
  flex-wrap: wrap;
  .flowItem{
    border: 2px solid red;
    padding:2em;
    flex: 0 0 25%;
  }
}

接下去晋级一下,二饼

笔直居中

本条一贯是网页布局的梦魇,纵然你想垂直居中一个轻重缓急不定的因素,还也许有一对hack的法门,倘诺你想垂直一组大小不定,数目不定的成分。。。。good
luck
而选取flex,那实质上太轻松了,使用align-items,align-self,justify-content你能够从中任何事物!

<div class="vertical">
    <div class="item">
        <h3>We are Centered Anyway</h3>
        <p contenteditable="true">click me and try</p>
    </div>
    <div class="item">
        <h3>We are Centered Anyway</h3>
        <p contenteditable="true">click me and try</p>
    </div>
    <div class="item">
        <h3>We are Centered Anyway</h3>
        <p contenteditable="true">click me and try</p>
    </div>
</div>

.vertical{
  background-color: hsla(31,15%,50%,.1);
  /*only these importent*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*only these importent*/
  padding:1em;
  min-height: 900px;
  .item{
    background-color: hsla(31,15%,50%,.1);
    max-width:50%;
    padding:1em;
    margin: 1em;
    border-radius: 4px;
  }
}
  <section class="box2">
        <div class="point"></div>
        <div class="point"></div>
    </section>

 能够观望那几个二饼是竖着在那边的
直接换行的话,你会意识那俩黑蛋蛋是占不满一行的所以也不会换行,那时候就只可以强行让他换行了,让她的主轴方向换到竖着的,那时,就会得到多少个竖着的饼了,接下去正是调解到中路地点了,此时主轴方向一度换了,水平居中也就是在类型的穿插轴上居中,getit√接下去正是把那连个竖着在中间的睾丸给分开了,此时垂直方向分开约等于在等级次序的主轴让项目两端对齐,能够设置space-between和space-around都能完结效果,就看对区间的切实须要了。

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

    接下去是三饼,第2个在荧屏中间,第五个在显示器的右下角,一条笔直得斜线将容器分成两瓣。通过对容器的品质设置那个就有一点点难点了,你会发觉,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;
      
        }

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

图片 2

  当然了,假若你设置的各样饼的宽高比例大于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;*/
            /*多轴线时 轴线的对齐方式*/
        }

此间嵌套是要留神几点:

一最外层容器设置给项目标体制对齐间接包括的子成分有效,嵌套的体系供给对被嵌套项目标器皿设置;


嵌套的门类要做容器也要记得加多display:flex;那样本事在次成分上对其连串设置样式;

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

    

相关文章

Leave a Reply

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