flex和grid布局

首先Grid布局和Flex布局不是互斥的

  • Grid布局适合复杂的布局,例如可以用来设计整个页面的布局,可用来设计不合常规的创意布局。
  • Flex布局适合于对齐内容。
  • Grid布局适用于2d布局–行和列。
  • Flex适合同一个方向的布局。 能用Flex的简单处,没必要使用Grid。全部使用Flex也达不到好的效果,混合使用才是顺其自然的方式。

Grid布局

浏览器支持情况

大部分都支持,除了IE。

例子

See the Pen Grid To Flex -- Example 2 by Una Kravets (@una) on CodePen.

基本术语概念

grid_intro_lines.png

  • Grid Container(容器) — 应用样式css display:grid的元素,其子元素将使用grid布局.
  • Grid Item(子项) — Grid Container的子元素.
  • Grid Line(线) — 组成表格结构的竖或横的线,可用从1开始的数字或名称标识。以上图为例,由7根竖线和5根横线。
  • Grid Track(轨道) — 两平行线之间的空间,例如上图有6个竖轨道,5个横轨道。
  • Grid Cell(单元格) — 四条相邻线包围中间的空间,是放置元素的基本单位。
  • Grid Area(区域) — 任意四条线包裹的区域,可包含多个单元格。

基本用法

grid-template-columns

定义列的线名
grid-template-columns: [linename1] 100px [linename2 linename3];

上例中定义了三条线名linename1,linename2,linename3,第一列在linename1和linename2之间,宽度为100PX.

定义列的宽度
grid-template-columns: 1fr 60px;

上例定义了两列,第一列1fraction(部分),第二列60px

fr单位

fr是专门用于grid的长度单位,表示可用部分的一个部分。上例中,第二列60px从表格宽度中去掉后剩下的用于划分部分,由于只有一个部分,则全部给第一列。 而这个例子

grid-template-columns: 1fr 2fr 1fr;

则将表格分成4个部分,第1,3列各占1个宽度,第二列占2个宽度。

grid-template-rows

和grid-template-columns差不多。

grid-auto-rows

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

上例使用grid-auto-rows定义了每行的高度。

grid-auto-rows: minmax(100px, auto);

上例定义了每行的最小高度100px

基于线的布局

.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

上例中的元素将被布局于从第一竖列线开始直到行末横跨了所有列,从第三横线到第五横线,竖跨了两行。

grid-gap

grid-gap: 10px 20px;

上例定义了每行之间10px间隙,每列之间20px间隙。

z-index控制重叠(overlap)

grid布局支持重叠,同一个空间上可能被不同元素的内容占用,默认的是后出现的重叠先出现的。 可使用z-index来控制,值越大的表示越靠近顶层。

看例子:

See the Pen Controlling the order by imhazige (@imhazige) on CodePen.

Flex布局

基本术语概念

  • The main axis(主轴) — 通过flex-direction定义的方向即为主轴,可为四个值row,row-reverse,column,column-reverse.
  • The cross axis(交叉轴) — 与主轴垂直的轴。
  • Start(起始边) — 依据文字书写习惯的起始边。对于英文,中文,为左边,对于阿拉伯语,为右边。
  • End(结束边) — 依据文字书写习惯的结束边。
  • The flex container(容器)— 使用了样式display:flex或者inline-flex的元素。默认样式如下 - flex-direction:row。 - 元素从起始边开始。
    • 元素不会伸展,会自动缩减以适配容器大小,如果缩减了还不能适配,则会overflow。
    • 元素会在交叉轴上伸展显示完整内容。
    • flex-basis:auto.
    • flex-wrap:nowrap.

flex元素的三个属性flex-grow,flex-shrink,flex-basis

flex-basis

元素在主轴方向上的初始大小。 可以是具体数值,也可以是auto表示元素内容大小。

flex-grow

如何分配可用空间用来拉伸 以上图为例,可用空间为200px,有a,b,c三个元素,如果如下给值的话a=2,b=1,c=1,则总共分了4个部分,a占2个部分=200/4*2=100px,b,c各分的50px。

flex-shrink

定义如何按比例缩减(在需要缩减的情况下)。 这个值是比较值,数值高的比数值低的所见的更“迅速”,由于不像flex-grow那样有具体的值来分配,而类似“速度”的机制,故也没有flex-grow那样表现一致。 速写方法

flex:flex-grow  flex-shrink  flex-basis
flex: initial = flex:0 1 auto 
flex: auto = flex:1 1 auto
flex: none = flex: 0 0 auto
flex: <positive-number> = flex: <positive-number> <positive-number> 0

交叉轴对齐align-items

.box {
            display: flex;
            align-items: center;
          }

上例就是很常用的垂直居中。

See the Pen Example by imhazige (@imhazige) on CodePen.

主轴对齐justify-content

.box {
            display: flex;
            justify-content: center;
          }

上例就是很常用的水平居中。

See the Pen Example by imhazige (@imhazige) on CodePen.

Refs

Basic concepts of grid layout

Basic concepts of flexbox


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1