flex布局 + grid【CSS 知识汇点2】

228 阅读6分钟

什么是 flex 布局

直接设置 display: flexdisplay:inline-flex的元素成为 flex 容器,里面的子元素成为 flex 子项。

flex 和 inline-flex 的区别是:inline-flex 容器为行内特性,因此可以和图片文字一行现实;flex 容器保持块状特性,宽度默认 100%。

flex 布局相关属性分为两种,一种作用在 flex 容器上,一种作用在 flex 子项上。无论作用在 flex 容器上,还是作用在 flex 子项上,都是控制 flex 子项的呈现,只是前者控制整体,后者控制个体。

flex容器:

flex容器特性可选值
flex-direction控制子项整体布局方式row(行,方向为当前文档水平流),row-reverse,column,column-reverse order
flex-wrap控制子项整体单行显示还是折行显示nowrap(单行显示,不换行) 、wrap(宽度不足换行)、wrap-reverse(从下往上,宽度不足换行)
flex-flow是 flex-direction 和 flex-wrap 的缩写多属性时,空格分割
justify-content水平方向子项的对齐和分布方式flex-start(左对齐)、flex-end、center、space-between(两端对齐)、space-around(等宽环绕)、space-evenly(两侧空白间距完全相等)
align-items子项们在垂直方向上的对齐方式stretch(子项拉伸)、flex-start(顶部对齐)、flex-end、center、 baseline(容器基线)
align-content垂直方向子项的对齐和分布方式stretch(子项等比拉伸)、flex-start(顶部对齐)、flex-end、center、space-between(两端对齐,等分)、space-around(等宽环绕)、space-evenly(两侧空白间距完全相等)

flex子项:

flex子项特性可选值
order控制子项排序位置默认值0,想排在前面的话,设置比0小的数,后面与之相反
flex-grow剩余空白间隙的扩展默认值0,如果只有一个子项设置,值 < 1 的话,按总剩余的比例。>1则独享所有剩余空间。如果多个 flex,按比例分配
flex-shrink容器不足时,单个元素的收缩比例默认值1,为 0 的话不收缩
flex-basis宽度如果同时设置了 width 和 flex-basis,会忽略width,当剩余空间不足时,会缩起,如果设置为 auto,会按照内容的多少来等比例放大和缩小。
flex是flex-grow、flex-shrink、flex-basis 缩写默认值:0 1 auto
align-self控制垂直对齐方式stretch(子项拉伸)、flex-start(顶部对齐)、flex-end、center、 baseline(容器基线)

flex 详解

flex:1 === flex: 1 1: 实现了三个不同内容的 div 平分空间。

在分家产上,flex 的作用就是制定每个人该如何分配到家产的规则:

  • flex-basis 分配固定的家产数量
  • flex-grow 剩余家产仍有富余的时候如何分配
  • flex-shrink 剩余家产不足时如何分配

如果 flex 的属性只有一个值:

  • 数值,表示 flex-grow 的值,flex-basis 和 felx-shrink 都是默认值(auto 1)
  • 长度值:表示 flex-basis 的值,其他为默认值

flex 数值值:

  • initial: 默认值,等同于 flex: 0 1 auto;,不会增长变大占据 flex 容器的剩余空间,会收缩变小以适应容器,尺寸根据自身宽高属性进行调整。
  • auto:等同于 flex: 1 1 auto,子项会增长变大占据 flex 容器的剩余空间,会收缩变小以适应容器,尺寸根据自身宽高属性进行调整
  • none:等同于 flex: 0 0 auto,子项不会增长变大占据 flex 容器的剩余空间,也不会收缩变小以适应容器,尺寸根据自身宽高属性会进行调整

grid

网格布局(grid)是最强大的 CSS 布局方案,它将网页分成一个个网格,可以任意组合不同的网格,作出各种各样的布局。

grid 布局和 flex 布局有一定的相似性,都可以指定容器内部多个子项的位置,但 flex 布局是轴线布局,只能指定“子项”针对轴线的位置,可以看作是一维布局。grid 布局则是将容器划分成“行”和“列”,产生单元格,然后指定“子项”所在的单元格,可以看作是二维布局。

grid 的属性

grid 布局的属性分为两类,一类定义在容器上面,称为容器属性,一类定义在子项上,称为子项属性。

display: grid/inline-grid;:指定一个容器采用网格布局;

grid 容器:

flex容器特性
grid-template-columns定义每列的列宽
grid-template-rows定义每行的行高
grid-row-gap设置行和行之间的间隔(行间距)
grid-column-gap设置列和列之间的间隔(列间距)
grid-gapgrid-column-gap 和 grid-row-gap 的合并简写形式
grid-template-areas用于定义区域,.表示不用
grid-auto-flow容器的子元素按照顺序自动放置的顺序,先行后列(row),或者先列后行(column)
justify-items控制子项 内容 的水平位置
align-items控制子项 内容 的垂直位置
place-itemsjustify-items 和 align-items 的合并简写形式
justify-content整个内容区域在容器里面的水平位置
align-content整个内容区域在容器里面的垂直位置
place-contentjustify-content 和 align-content 的合并简写方式
grid-auto-columns现有网格外部,自动生成多余的网格的列宽
grid-auto-rows现有网格外部,自动生成多余的网格的行高
grid-template是 grid-template-columns、grid-template-rows、grid-template-areas 的合并简写方式
grid是 grid-template-columns、grid-template-rows、grid-template-areas、grid-auto-columns、grid-auto-rows、grid-auto-flow 的合并简写方式

grid-template-columns 和 grid-template-rows 可用的方法:

  • repeat(count, value) 简化重复的值:
    • repeat(3, 33.33%): 宽度为33.33%的网格重复3次
    • repeat(2, 100px 20px 80px):第一、四网格为100px,第二、五网格为20px,第三、六网格为 80px;
    • repeat(auto-fill,100px):每个网格100px,希望容器的行或者列容纳最多的 100px 的子项;
  • fr:表示等比关系,1fr 2fr表示后者是前者的两倍
  • minmax:产生一个长度范围,表示长度就在这个范围之中,它接受两个参数,分别为最小值和最大值。minmax(100px, 1fr):表示不小于100px,不大于 1fr
  • auto:由浏览器自己决定长度
  • 网格线的名称:可用方括号,指定每一根网格线的名字,方便以后引用

grid 子项:

flex子项特性
grid-column-start左边框所在的垂直网格线
grid-column-end右边框所在的垂直网格线
grid-row-start上边框所在的水平网格线
grid-row-end下边框所在的水平网格线
grid-column是 grid-column-start 和 grid-column-end 的合并缩写
grid-row是 grid-row-start 和 grid-row-end 的合并缩写
grid-area指定放在哪一个区域,也可以是上面的缩写
justify-self子项内容的水平位置
align-self子项内容的垂直位置
place-self是 align-self 和 justify-self 的合并缩写

九宫格

<div class="square">
  <ul class="square-inner flex">
  	<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

grid 的方式

参考链接

ul {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

flex 的方式

参考链接

li {
  list-style: none;
  width: 100px;
  height: 100px;
}
.square {
  width: 310px;
}
ul {
  display: flex;
  flex-wrap: wrap;
}

float

参考链接

li {
  float: left;
  list-style: none;
  height: 100px;
  width: 100px;
}
ul {
  width: 310px;
}
ul::after{
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

table 布局

参考链接

<table class="table">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>table</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
</table>

.table{
  width: 300px;
  border-collapse: collapse;
  box-sizing: border-box;
}
.table td{
  width: 100px;
  border: 1px solid white;
  height: 100px;
  background: red;
}